阅读目录

zTree树形菜单

树形菜单使用方式如下：
HTML引入的方式如下：

<!DOCTYPE html>

 <html>

    <head>

        <meta charset="utf-8">

        <title>ztree树形菜单demo</title>

        <link rel='stylesheet' href='libs/zTreeStyle.css' />

        <link rel='stylesheet' href='libs/remodal.css' />

        <link rel='stylesheet' href='libs/remodal-default-theme.css' />

        <link rel='stylesheet' href='css/index.css' />

    </head>

    <body>

        <!--  弹窗 -->

        <div class="remodal w360" data-remodal-id="modal2" id='data-modal2'>

          <div class="remodal-wrap">

            <div class='m-title'>新增账户</div>

            <div class="m-center-modal">

              <div class='directory'>

                <label>目录结构</label>

                <span></span>

              </div>

              <div class="account-name">

                <label>账户名称</label>

                <input type="text" maxlength="16" />

              </div>

              <div class="modal-tips hidden"></div>

            </div>

          </div>

          <div class='m-btn'>

            <button class="remodal-cancel">取消</button>

            <button class="remodal-confirm">确定</button>

          </div>

        </div>

        <div class="container" id="container">

          <div class="account_page content">

            <div class='ztree-container' style='border-right:none'>

              <div class="add-btn" id="add-btn"></div>

              <ul id="ztreeId" class="ztree" data-add-url='' data-del-url='' data-img-url='' data-tree=''></ul>

            </div>

            <!-------------------------------下面是右侧的内容 ----------------------->

            <div class='ztree-content'>

                右侧的内容放在这里

            </div>

            <div class="catalog-line"></div>

          </div>

        </div>

        <script src='libs/jquery.min.js'></script>

        <script src='libs/jquery.ztree.core.js'></script>

        <script src='libs/jquery.ztree.exedit.js'></script>

        <script src='libs/remodal.js'></script>

        <script src='libs/ztree.js'></script>

        <script src='js/index.js'></script>

    </body>

</html>

注意：
1. css需要引入：

<link rel='stylesheet' href='libs/zTreeStyle.css' />

<link rel='stylesheet' href='libs/remodal.css' />

<link rel='stylesheet' href='libs/remodal-default-theme.css' />

<link rel='stylesheet' href='css/index.css' />

2. JS需要引入如下：

<script src='libs/jquery.min.js'></script>

<script src='libs/jquery.ztree.core.js'></script>

<script src='libs/jquery.ztree.exedit.js'></script>

<script src='libs/remodal.js'></script>

<script src='libs/ztree.js'></script>

<script src='js/index.js'></script>

3. 在id为ztreeId 添加4个属性，
    3-1： data-add-url 为添加菜单的接口（数据返回的格式和成本中心的 /catalog/addAccCatalog 的格式字段一样）。
    3-2： data-del-url 为删除菜单接口(数据返回的格式和成本中心的 /catalog/delAccCatalog 格式字段一样)。
    3-3: data-img-url: 图片的相对路径，比如图片的路径为 xxx/yyy/images/xx.png 因此 data-img-url = 'xxx/yyy' 就可以了。
    3-4: data-tree: 树形目录的数据.

4. 弹窗树形菜单 模糊匹配
配置如下：
在页面上放一个隐藏域input 设置id为 ztreeId， data-img-url 和上面一样，是图片前缀路径， data-tree 是 树形菜单的数据。如下代码：
<input type='hidden' id="ztreeId" data-img-url='.' data-tree = '' />

github查看demo

注意：

1. 添加菜单，删除菜单，需要发ajax请求成功后才能生效。

2. 返回的json数据需要支持我上面的数据格式即可。

ztree树形菜单demo的更多相关文章

  1. Bootstrap风格zTree树形菜单插件

    这是一款bootstrap风格jQuery zTree树形菜单插件,支持自定义编辑.添加列表菜单.删除列表等功能的jQuery树形菜单代码.在线演示 具体代码实现: <!DOCTYPE html ...

  2. zTree树形菜单交互选项卡效果实现

    1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html> <head> <meta ch ...

  3. zTree树形菜单使用实例

    在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号 第一步:在页面显示菜单位置,添加 ul设置 class=”ztree” 第二步:开启简单数据格式支持 第三步:编写树 ...

  4. ztree树形菜单的增加删除修改和换图标

    首先需要注意一点,如果有研究过树形菜单,就会发现实现删除和修改功能特别简单,但是增加却有一点复杂.造成这个现象是ztree树形菜单的历史遗留问题.大概是之前的版本没有增加这个功能,后来的版本加上了这个 ...

  5. 默认展开ztree树形菜单

    var setting = { view: { selectedMulti: false //按住ctrl是否可以多选 }, check: { enable: true , chkStyle: 'ch ...

  6. thinkphp5 ztree树形菜单

    教程:http://makaidong.com/zjfjava/4074_5873678.html 下载:https://github.com/zTree/zTree_v3

  7. EasyUI+zTree实现简单的树形菜单切换

    使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="U ...

  8. 使用zTree插件构建树形菜单

    zTree下载:https://github.com/zTree/zTree_v3 目录: 就我看来,zTree较为实用的有以下几点: zTree 是一个依靠 jQuery 实现的多功能 “树插件”. ...

  9. 使用ztree展示树形菜单结构

    官网:http://www.treejs.cn/v3/main.php#_zTreeInfo 一.功能简介 在权限系统中,实现给角色指定菜单权限的功能.主要包括以下几点: 读取全部菜单项,并以树形结构 ...

随机推荐

  1. javascript如何操作数组

    说明 如需求:后台返回一个用户列表数组,该数组可能为空,最多只可能会有10个用户, 页面中A,B两处展示用户列表,B处不管如何都会展示返回的所有用户,A处需要展示10个用户,不足10个展示默认用户, ...

  2. 解决vue-cli不能初始化webpack模板的问题(vue init卡住了，解决办法)

    报这个错误 有人说是代理问题.我也不懂,但这个方法有用 1.去github上下载要初始化的模板 https://github.com/vuejs-templates/webpack 或者直接用git去 ...

  3. 5大JavaScript前端框架简介

    译者按: 简要介绍五大前端框架特性 原文: Top 5 JavaScript Frameworks 译者: Fundebug 为了保证可读性,本文采用意译而非直译.另外,本文版权归原作者所有,翻译仅用 ...

  4. HDU5293(SummerTrainingDay13-B Tree DP + 树状数组 + dfs序)

    Tree chain problem Time Limit: 6000/3000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Other ...

  5. CSS常见布局

    一.单列布局 1. 水平居中 1.1 使用inline-block和text-align .parent{text-align:center;} .child{display:inline-block ...

  6. vue2.0 element-ui中el-upload的before-upload方法返回false时submit()不生效解决方法

    我要实现的功能是在上传文件之前校验是否表格中存在重复的数据,有的话,需要弹窗提示是否覆盖,确认之后继续上传,取消之后,就不再上传. 项目中用的element-ui是V1.4.3 <el-uplo ...

  7. 【代码笔记】Web-利用Dreamweaver实现form

    一,打开Dreamweaver---->File---New---->如下图所示.选择HTML,点击OK. 二,会出现如下图所示界面.把光标放到Body处. 三,将上面的栏切换到Desig ...

  8. ionic 项目中ios上遇到的软键盘输入法自动弹出的问题

    一.  安装插件 cordova plugin add ionic-plugin-keyboard 二. 软键盘显示监听 window.addEventListener('native.keyboar ...

  9. 性能测试 Apache参数配置与性能调优

    Apache性能调优 by:授客 QQ:1033553122 环境: Apache 2.4 1.选择合适的MPM(Multi -Processing Modules, 多处理模块) Unix/Linu ...

  10. (后端)SQL Server日期时间函数

    转自博客园: 1.获取当前日期GetDate getdate()函数以datetime数据类型的格式返回当前SQLServer服务器所在计算机的日期和时间.其语法格式为getdate().返回值舍入到 ...