文档章节

jquery树形插件zTree使用示例

zhiqiangw
 zhiqiangw
发布于 2016/11/29 14:40
字数 296
阅读 269
收藏 0

1、通过官网下载demo或者下载zTree相关的插件;

zTree官网 :https://github.com/zTree/zTree_v3

2、页面文件引入需要的zTree插件:

主要引入的对象有:ztree-metro-style.css、jquery.ztree.all.min.js、jquery.min.js。

引入示例:

<link rel="stylesheet" href="/public/static/css/ztree-metro-style.css">
<script src="/public/static/js/jquery.ztree.all.min.js"></script>
<script src="/public/static/js/jquery.min.js"></script>

3、部署js解析html位置:

<div class="layui-tab-content">
   <div class="layui-tab-item layui-show">
     <ul id="tree" class="ztree"></ul>
   </div>
</div>
<input type="hidden" id="group_id" name="id" value="{$id}">
<button class="layui-btn" id="auth-btn">授权</button>

4.js脚本文件:

<script>
    $(document).ready(function(){
        /**
         * 加载树形授权菜单
         */
        var _id = $("#group_id").val();
        var tree = $("#tree");
        var zTree;

        // zTree 配置项
        var setting = {
            check: {
                enable: true
            },
            view: {
                dblClickExpand: false,
                showLine: true,
                showIcon: false,
                selectedMulti: false
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pid",
                    rootpid: ""
                },
                key: {
                    name: "title"
                }
            }
        };

        $.ajax({
            url: "GETURL",
            type: "post",
            dataType: "json",
            cache: false,
            data: {
                id: _id
            },
            success: function (data) {
                zTree = $.fn.zTree.init(tree, setting, data);
            }
        });

        /**
         * 授权提交
         */
        $("#auth-btn").on("click", function () {
            var checked_ids,auth_rule_ids = [];
            checked_ids = zTree.getCheckedNodes(); // 获取当前选中的checkbox
            $.each(checked_ids, function (index, item) {
                auth_rule_ids.push(item.id);
            });
            $.ajax({
                url: "GETURL",
                type: "post",
                cache: false,
                data: {
                    id: _id,
                    auth_rule_ids: auth_rule_ids
                },
                success: function (data) {
                    if(data.code === 1){
                        setTimeout(function () {
                            location.href = data.url;
                        }, 1000);
                    }
                    layer.msg(data.msg);
                }
            });
        });
    });
</script>

至此,一个完整的树形结构完成,如果需要对树进行其他操作可以参考官网API文档.

运行结果如

© 著作权归作者所有

共有 人打赏支持
zhiqiangw
粉丝 12
博文 192
码字总数 142634
作品 0
郑州
程序员
私信 提问
加载中

评论(1)

JxtPro
JxtPro
后台数据结构呢
zTree 3.5.22 发布

zTree 是开源免费的软件, 使用 MIT 许可证,是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。采用了延迟加载技术,上万节点轻松加载...

淡漠悠然
2016/03/03
4.9K
16
【zTree】zTree开发使用说明【20140610】

使用条件: 使用zTree树形结构,需要在当前页面中载入zTree的js文件和样式文件 zTree核心js文件:jquery.ztree-2.6.js zTree样式文件: 因为zTree是基于jquery,所以还需要对应的jQuery库文件 ...

shihuafu
2014/06/10
0
0
OSChina 第 8 期高手问答,主题:zTree

zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件。zTree 刚刚发布了 3.1 版本,详情请看这里。 本期 OSChina 高手问答我们请来了 zTree 的作者张其纲 (@zTree ) ...

红薯
2012/02/19
7.5K
59
【开源访谈】zTree 作者张其纲访谈实录

关于开源访谈 开源访谈是开源中国推出的一系列针对国内优秀开源软件作者的访谈,以文字的方式记录并传播。我们希望开源访谈能全面的展现国内开源软件、开源软件作者的现状,着实推动国内开源...

虫虫
2012/07/31
12.1K
56
jQuery Plugins 发布的插件如何更新信息??

哪位熟悉 jQuery Plugins 上面发布插件的,请帮个忙,谢谢。 我之前把 zTree 注册到了 jQuery Plugins 上,地址:http://plugins.jquery.com/zTree.v3/ 对应的 Github 地址:https://github....

zTree
2013/01/28
206
2

没有更多内容

加载失败,请刷新页面

加载更多

tomcat编译超过64k大小的jsp文件报错原因

  今天遇到一个问题,首先是在tomcat中间件上跑的web项目,一个jsp文件,因为代码行数实在是太多了,更新了几个版本之后编译报错了,页面打开都是报500的错误,500的报错,知道http协议返回...

SEOwhywhy
16分钟前
0
0
flutter http 请求客户端

1、pubspec文件管理Flutter应用程序的assets(资源,如图片、package等)。 在pubspec.yaml中,通过网址“https://pub.dartlang.org/packages/http#-installing-tab-”确认版本号后,将http(0...

渣渣曦
16分钟前
0
0
Django基本命令及moduls举例

一、Django基本命令 1.创建项目 django-admin.py startproject mysite 创建后的项目结构:- mysite - mysite #对整个程序进行配置 - init #导入包专用- settings ...

枫叶云
31分钟前
4
0
zabbix安装

rpm -ivh http://repo.webtatic.com/yum/el6/latest.rpm 安装jdk rpm -ivh (自行在网上下载rpm包) 安装php并修改相应参数 yum -y install php56w php56w-gd php56w-mysqlnd php56w-bcmath......

muoushi
32分钟前
3
0
MySQL自增属性auto_increment_increment和auto_increment_offset

MySQL的系统变量或会话变量auto_increment_increment(自增步长)和auto_increment_offset(自增偏移量)控制着数据表的自增列ID。 mysql> show tables;Empty set (0.00 sec)mysql> CREATE TA......

野雪球
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部