阅读目录

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. 伪类选择器 E:nth-child(n)、E:nth-of-type(n)

    结构伪类是css3新增的类型选择器. E:nth-child(n).E:nth-of-type(n)就是其中之二.搞懂了这两个,基本上跟他俩一家的其他几个兄弟伙基本上也可以弄懂了. 首先先用文字语言来 ...

  2. Ubuntu 18 + Redis安装

    Ubuntu 18 + Redis安装 1.安装命令: opengis@gisserver20:~$ sudo apt-get install redis-server 2.查看tcp 连接 open ...

  3. Nginx入门到精通

    目录 入门篇 1.Nginx的介绍 2.Nginx的安装 3.Nginx的深入剖析 4.Nginx的虚拟主机 5.Nginx的常用功能 6.Nginx的日志剖析 7.Nginx的location剖析 ...

  4. 自定义控件详解（三）：Canvas效果变换

    Canvas 画布 从前面我们已经知道了 Canvas 类可以绘出 各种形状. 这里学习一下Canvas 类的变换效果(平移,旋转等) 首先需要了解一下Canvas 画布, 我们用Canvas.Dra ...

  5. const修饰指针的三种效果

    当用const进行修饰时,根据const位置的不同有三种不同效果. 判断的标准是:const修饰谁,谁的内容就是不可变的. 1 const int *p = &a; const修饰*p, *p ...

  6. (后端)Java中关于金额大小写的工具类

    /** * 金额小数转换成中文大写金额 * * @author Neil Han * */ private static final String UNIT[] = { "万", ...

  7. xshell 5连接NAT模式的虚拟机

    这里简称真实的外部电脑为主机.当虚拟机NAT模式上网时(区别于桥接上网,桥接上网的话,主机和虚拟机可以互访),虚拟机是可以访问主机的,但是由于NAT机制,导致主机不能访问虚拟机,那么如何让主机上的xs ...

  8. 系统运维|SqlServer2008|数据库日志文件过大需要清理的操作攻略

    摘要: 1.执行SQL语句改成“简单模式” 2.收缩数据库 3.执行SQL语句改回“完全模式”   原文链接: http://www.lookdaima.com/WebForms/WebPages/B ...

  9. Hibernate 中的 idclass mapping 问题

    关于出现 idclass mapping 运行错误 @IdClass 注释通常用于定义包含复合键id的Class.即多个属性的关键复合. @IdClass(CountrylanguageEntityP ...

  10. C# 生成强命名程序集并添加到GAC

    针对一些类库项目或用户控件项目(一般来说,这类项目最后编译生成的是一个或多个dll文件),在程序开发完成后,有时需要将开发的程序集(dll文件)安装部署到GAC(全局程序集缓存)中,以便其他的程序也可 ...