文档章节

jquery树形插件zTree使用示例

zhiqiangw
 zhiqiangw
发布于 2016/11/29 14:40
字数 296
阅读 241
收藏 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
博文 193
码字总数 142652
作品 0
郑州
程序员
加载中

评论(1)

JxtPro
JxtPro
后台数据结构呢
【zTree】zTree开发使用说明【20140610】

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

shihuafu
2014/06/10
0
0
JQuery Tree v2.6正式版推荐

zTree v2.6正式版对比v2.6.beta来说修改的地方不多,主要是修改了几个Bug。另外对于check功能做了一定完善,希望使用checkbox或radio,但部分节点不显示checkbox/radio的朋友们,使用v2.6正式...

zyyutian_1
2011/06/10
0
1
Jquery-zTree的基本用法

【简介】 zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE、FireFox、Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性...

0o清风徐来o0
2013/03/28
0
0
jquery ztree异步搜索(搜叶子)

一、初始异步加载树 初始化默认给出一个根结点,再结合异步加载的方式手动触发默认加载第一层,如图: 代码如下: var treeSetting = {async: {enable: true, url:"xxx/demo.do?method=listB...

wealpan
2013/12/09
0
3

没有更多内容

加载失败,请刷新页面

加载更多

redis 系列二 -- 常用命令

1.基础命令 info ping quit save dbsize select flushdb flushall 2.键命令 2.1 set 直接赋值 set a a 2.2 get 取值 get a 2.3 exists 是否存在 exists a 2.4 expire 设置剩余时间 秒 expire......

imbiao
31分钟前
1
0
php foreach

<?php// 数组的引用$a=array(1,2,3,4,5);foreach($a as $key=>&$value){$value=$value*2;}print_r($a);echo " $key -------------------$value\r\n";/** * ...

小张525
39分钟前
1
0
12-利用思维导图梳理JavaSE-多线程

12-利用思维导图梳理JavaSE-多线程 主要内容 1.线程概念 2.线程开发 3.线程的状态 4.线程的同步和死锁 5.Java5.0并发库类 QQ/知识星球/个人WeChat/公众号二维码 本文为原创文章,如果对你有一...

飞鱼说编程
今天
0
0
JAVA集合之ArrayList

一、前言 Java 集合类提供了一套设计良好的支持对一组对象进行操作的接口和类,JAVA常用的集合接口有4类,分别是: Collection:代表一组对象,每一个对象都是它的子元素 Set:不包含重复元素...

木木匠
今天
3
0
转:XMLHttpRequest2 新技巧

”XMLHttpRequest 的异步调用网上找的例子运行没问题,但稍微改了一点点就报错”InvalidStateError: XMLHttpRequest has an invalid context“。断断续续 搞了3天终于通了,可以接收二进制文...

SamXIAO
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部