阅读目录

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. Perfect hashing (And Minimal perfect hashing)

    Perfect Hashing: A hash function that is injective-that is, maps each valid input to a different has ...

  2. 报错No active profile set, falling back to default profiles

    pom.xml加上下面两个依赖 <dependency> <groupId>org.springframework.boot</groupId> <artif ...

  3. System.arraycopy 怎么使用的？

    前言:看 ArrayList 的源码,发现 remove 方法主要依赖了 System.arraycopy() 方法实现的.所以需要了解一下这个方法如何使用.转载请注明出处:https://www.c ...

  4. 【c++】计算句子中单词的平均长度

    Description 编程输入一行文本,计算这行文本的单词平均长度.假设每个单词用至少一个空格或者标点(英文逗号.句号)隔开.使用C++ string类型. Input 输入一行文本,不包含数字 O ...

  5. Python之历史

    一.python简单介绍 python的创始人:吉多·范罗苏姆(Guido van Rossum),于1989年开始编写,到1991年完成了第一个python编译器.它是用C语言实现的,并能够调用C语 ...

  6. 使用 NGINX 流控和 fail2ban 防止 CC 攻击

    背景知识 CC 攻击 攻击者通过创建大量请求导致服务器资源耗尽,主要针对特定服务接口,属于实现 DoS 攻击的一种方式(DoS 攻击更多是针对网络端口,而不是具体服务接口). NGINX 流控 lim ...

  7. MySQL主从及主主环境部署

    主从同步 主机环境 mysql的安装可以参考:https://www.cnblogs.com/brianzhu/p/8575243.htmlCentos7版本master:192.168.192.12 ...

  8. Java集合之TreeMap源码分析

    一.概述 TreeMap是基于红黑树实现的.由于TreeMap实现了java.util.sortMap接口,集合中的映射关系是具有一定顺序的,该映射根据其键的自然顺序进行排序或者根据创建映射时提供的C ...

  9. Expo大作战(三十四)--expo sdk api之LinearGradient(线性渐变)，KeepAwake（保持屏幕不休眠）,IntentLauncherAndroid,Gyroscope，

    简要:本系列文章讲会对expo进行全面的介绍,本人从2017年6月份接触expo以来,对expo的研究断断续续,一路走来将近10个月,废话不多说,接下来你看到内容,讲全部来与官网 我猜去全部机翻+个人 ...

  10. 洗礼灵魂，修炼python（26）--编程核心之“递归”

    递归 1.什么是递归: 其实前面都提过,但没有详细讲.多次调用自身就叫递归 看图,这种就叫递归 看过盗梦空间没?其实也是递归 2.递归需要满足条件: 有调用函数自身 有一个正确的返回条件来结束 在使用 ...