阅读目录

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. 【Java并发编程】19、DelayQueue源码分析

    DelayQueue,带有延迟元素的线程安全队列,当非阻塞从队列中获取元素时,返回最早达到延迟时间的元素,或空(没有元素达到延迟时间).DelayQueue的泛型参数需要实现Delayed接口,Del ...

  2. 【Spring】13、使用Spring 3的@value简化配置文件的读取

    Spring 3支持@value注解的方式获取properties文件中的配置值,大简化了读取配置文件的代码. 1.在applicationContext.xml文件中配置properties文件 & ...

  3. jQuery实例之ajax请求json数据案例

    今天有这样一个需求,点击六个大洲,出现对应的一些请求信息,展示在下面,请求请求过后,第二次点击就无需请求.如图所示:点击北美洲下面出现请求的一些数据 html代码结构: <div class=& ...

  4. php向数据库插入数据

    <?php header("Content-type: text/html;charset=utf-8"); $con = mysql_connect("local ...

  5. 移动端安卓手机不能识别border 0.5px解决方案

    由于安卓手机无法识别border 0.5px,因此我们要用0.5px的话必须要借助css3中的-webkit-transform:scale缩放来实现, 原理:将伪元素的宽设为200%,height设 ...

  6. svg简介与使用

    什么是svg SVG是"Scalable Vector Graphics"的简称.中文可以理解成"可缩放矢量图形". 可缩放矢量图形是基于可扩展标记语言(标准通 ...

  7. ListView实现下拉动态渲染数据

    欢迎讨论欢迎一起学习:微信jkxx123321 这是一篇关于LIstView实现动态数据渲染的文章![RN] 首先我们讲讲数据是如何来规划的 一般情况下我们有两种规划方案前提比如我们数据是100条+ ...

  8. springcloud 入门 7 （zuul路由网关）

    Zuul简介: Zuul的主要功能是路由转发和过滤器.路由功能是微服务的一部分,比如/api/user转发到到user服务,/api/shop转发到到shop服务.zuul默认和Ribbon结合实现了 ...

  9. 机器学习实战（Machine Learning in Action）学习笔记————10.奇异值分解(SVD)原理、基于协同过滤的推荐引擎、数据降维

    关键字:SVD.奇异值分解.降维.基于协同过滤的推荐引擎作者:米仓山下时间:2018-11-3机器学习实战(Machine Learning in Action,@author: Peter Harr ...

  10. [20180403]访问dba_autotask_task无输出问题.txt

    [20180403]访问dba_autotask_task无输出问题.txt --//链接http://www.itpub.net/thread-1911421-1-1.html的讨论,还没注意原先的 ...