ztree树形菜单demo

阅读目录

zTree树形菜单

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的更多相关文章

Bootstrap风格zTree树形菜单插件
这是一款bootstrap风格jQuery zTree树形菜单插件,支持自定义编辑.添加列表菜单.删除列表等功能的jQuery树形菜单代码.在线演示具体代码实现: <!DOCTYPE html ...
zTree树形菜单交互选项卡效果实现
1. 添加自定义属性 page 2. 为 ztree 每个树形节点,添加点击事件 <!DOCTYPE html> <html> <head> <meta ch ...
zTree树形菜单使用实例
在每个节点添加 id 和 pid, id 表示当前节点编号,pid 表示父节点编号第一步:在页面显示菜单位置,添加 ul设置 class=”ztree” 第二步:开启简单数据格式支持第三步:编写树 ...
ztree树形菜单的增加删除修改和换图标
首先需要注意一点,如果有研究过树形菜单,就会发现实现删除和修改功能特别简单,但是增加却有一点复杂.造成这个现象是ztree树形菜单的历史遗留问题.大概是之前的版本没有增加这个功能,后来的版本加上了这个 ...
默认展开ztree树形菜单
var setting = { view: { selectedMulti: false //按住ctrl是否可以多选 }, check: { enable: true , chkStyle: 'ch ...
thinkphp5 ztree树形菜单
教程:http://makaidong.com/zjfjava/4074_5873678.html 下载:https://github.com/zTree/zTree_v3
EasyUI+zTree实现简单的树形菜单切换
使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="U ...
使用zTree插件构建树形菜单
zTree下载:https://github.com/zTree/zTree_v3 目录: 就我看来,zTree较为实用的有以下几点: zTree 是一个依靠 jQuery 实现的多功能 “树插件”. ...
使用ztree展示树形菜单结构
官网:http://www.treejs.cn/v3/main.php#_zTreeInfo 一.功能简介在权限系统中,实现给角色指定菜单权限的功能.主要包括以下几点: 读取全部菜单项,并以树形结构 ...

随机推荐

ios -- 成员变量、实例变量与属性的区别
最近打开手机就会被胡歌主演的<猎场>刷屏,这剧我也一直在追,剧中的郑秋冬,因为传销入狱五年,却在狱中拜得名师孙漂亮(孙红雷),苦学HR,并学习了心理学,成功收获两样法宝.出狱后因为怕受 ...
Placement of class definition and prototype
When I create a function, I can put the code for it after main if I put the prototype above main. Fo ...
MVC中Controller与View中间的数据传递的常用方法
这几天正在学习MVC,顺便就将自己每天的学习心得记录下来与大家分享一下吧! 在MVC中,Controller与View之间传递数据是很频繁的事情,所以在这里就总结一下我自己在学习中使用的几种常用的方法 ...
HDU6215
Brute Force Sorting Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 65535/32768 K (Java/Othe ...
extract-text-webpack-plugin 作用、安装、使用
作用:该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象安装:插件安装命令如下: npm install extract-text-webpack-plugin -- ...
LearnX控件漏洞挖掘与利用
前言大学英语会用到一个 ActiveX 插件 LearnX ,最近从网上下了一个下来分析了一下,找到了一些漏洞并完成了 exploit . 虽然涉及的知识比较老旧,不过还是挺有意思的.这里分享一下整 ...
ViewPager防止Fragment销毁以及取消Fragment的预加载
存在的问题 1. 默认情况下,ViewPager会根据setOffscreenPageLimit()方法设置的大小,自动预加载2. 还是根据setOffscreenPageLimit()方法设置的大小 ...
Nodejs 安装 on centos7
本文演示如何在CentOS7上安装Nodejs. 1 准备工作 1.1 浏览器访问安装包下载地址: https://nodejs.org/dist/ 找到需要安装的版本,以8.11.3版本为例,地址为 ...
IDEA插件清单
zookeeper插件,方便查看zk节点信息 Maven Helper,方便解决jar包冲突 Free Mybatis plugin,自动映射mapper接口到对应查询statements gener ...
对Spring的理解（简单）！
1.Spring是对j2EE诸多功能进行封装了的一个工具集:它的核心就是提供了一种新的机制来管理业务对象及依赖关系:具体就是控制反转.依赖注入,Aop(面向切面). Spring的底层实现机制是用De ...

ztree树形菜单demo

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

随机推荐

热门专题