1、参考资料

　　1）官网：http://www.treejs.cn/v3/api.php

　　2）z-tree码云：https://gitee.com/zTree/zTree_v3

2、下载解压

　　

　　案例演示：

　　

　　案例演示 demo/cn/index.html

　　all.js = core + excheck + exedit ( 不包括 exhide ); 如果只是要用core中的基本功能，那么引用core.js就可以了。

　　

　　demo/cn/index.html，右键 / 查看页面源代码，file属性是对应的例子的url。在index.html选择自己想要参考的demo，然后去查找其file。

　　

3、第一个demo

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Insert title here</title>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

<link rel="stylesheet" href="js/ztree/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="js/ztree/jquery.ztree.all-3.5.js"></script>

<style type="text/css">

    .ztree1 {

        width: 200px;

        height: 300px;

        border: 2px solid pink;

    }

</style>

</head>

<body>

    <div class="ztree1">

        <!-- 展示树形菜单 -->

        <ul id="ztree1" class="ztree"></ul>

    </div>

<script type="text/javascript">

$(function(){

    // 当页面加载完成后, 动态创建ztree 菜单

    var setting = { // 设置ztree相关的属性

        data: {

            simpleData:{

                enable: true // 启用简单json数据描述节点数据

            }

        },

        check: { // 设置复选框

            enable: true

        }

    };

    var zNodes =  // 节点数据, 每个json对象对应一个节点数据

        [

            {id:'1',pId:'0',name:'系统管理', open: true}, // open:设置是否默认展开

                {id:'100',pId:'1',name:'添加'},

                {id:'101',pId:'1',name:'删除'},

            {id:'2',pId:'0',name:'用户管理'},

                {id:'200',pId:'2',name:'用户等级'},

                    {id:'20001',pId:'200',name:'添加'},

                    {id:'20002',pId:'200',name:'删除'},

                {id:'201',pId:'2',name:'用户财产'},

                    {id:'20101',pId:'201',name:'添加'},

                    {id:'20102',pId:'201',name:'删除'},

            {id:'3',pId:'0',name:'权限管理'},

                {id:'300',pId:'3',name:'添加'},

                {id:'301',pId:'3',name:'删除'},

        ];

    $.fn.zTree.init($("#ztree1"), setting, zNodes);

});

</script>

</body>

</html>

4、ajax请求json数据渲染z-tree

　　设置ztree相关的属性: callback，给ztree每个节点绑定onclick事件

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Insert title here</title>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

<link rel="stylesheet" href="js/ztree/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="js/ztree/jquery.ztree.all-3.5.js"></script>

<style type="text/css">

    .ztree2 {

        width: 200px;

        height: 300px;

        border: 2px solid pink;

    }

</style>

</head>

<body>

    <div>

        <ul id="ztree2" class="ztree"></ul>

    </div>

<script type="text/javascript">

<!-- 发送ajax请求获取json数据构造ztree -->

$(function() {

    var setting2 = { // 设置ztree相关的属性

        data:{

            simpleData:{

                enable: true // 启用简单json数据描述节点数据

            }

        },

        callback:{

            onClick:function(a,b,treeNode){

                var page = treeNode.page;

                if(page != undefined){

                    // 判断当前选项卡是否已经存在

                    var e = $("#tt").tabs("exists", treeNode.name);

                    if(e){  // 存在，选中对应"选项卡"

                        $("#tt").tabs("select", treeNode.name);

                    } else{ // 不存在，新增"选项卡"

                        $("#tt").tabs("add",{

                            title:treeNode.name,

                            content:'<iframe frameborder="0" width="100%" height="100%" src="'+page+'"></iframe>',

                            closable: true

                        });

                    }

                }

            }

        }

    };

    $.post("/data/menu", {}, function(data){

        $.fn.zTree.init($("#ztree2"), setting2, data);

    }, 'json');

});

</script>

</body>

</html>

5、树形菜单选中项添加到表单数据中

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Insert title here</title>

<script type="text/javascript" src="js/jquery-1.8.3.js"></script>

<link rel="stylesheet" href="js/ztree/zTreeStyle.css" type="text/css">

<script type="text/javascript" src="js/ztree/jquery.ztree.all-3.5.js"></script>

<style type="text/css">

    .ztree1 {

        width: 200px;

        height: 300px;

        border: 2px solid pink;

    }

</style>

</head>

<body>

    <form id="form" action="#">

        <input type="hidden" name="ids"/>

        <div class="ztree1">

            <!-- 展示树形菜单 -->

            <ul id="ztree1" class="ztree"></ul>

        </div>

        <input type="button" id="btn" value="提交"/>

    </form>

<script type="text/javascript">

    var setting = { // 设置ztree相关的属性

        data: {

            simpleData:{

                enable: true // 启用简单json数据描述节点数据

            }

        },

        check: { // 设置复选框

            enable: true

        }

    };

    var zNodes =  // 节点数据, 每个json对象对应一个节点数据

        [

            {id:'1',pId:'0',name:'系统管理', open: true}, // open:设置是否默认展开

                {id:'100',pId:'1',name:'添加'},

                {id:'101',pId:'1',name:'删除'},

            {id:'2',pId:'0',name:'用户管理'},

                {id:'200',pId:'2',name:'用户等级'},

                    {id:'20001',pId:'200',name:'添加'},

                    {id:'20002',pId:'200',name:'删除'},

                {id:'201',pId:'2',name:'用户财产'},

                    {id:'20101',pId:'201',name:'添加'},

                    {id:'20102',pId:'201',name:'删除'},

            {id:'3',pId:'0',name:'权限管理'},

                {id:'300',pId:'3',name:'添加'},

                {id:'301',pId:'3',name:'删除'},

        ];

    $(function(){

        // 当页面加载完成后, 动态创建ztree 菜单

        $.fn.zTree.init($("#ztree1"), setting, zNodes);

    });

    $("#btn").on("click", function () {

        var treeObj = $.fn.zTree.getZTreeObj("ztree1"); // 获取ztree对象

        // 提交表单前将选中的checkbox收集

        var nodes = treeObj.getCheckedNodes(true);

        var array = new Array();

        for (var i = 0; i < nodes.length; i++) {

            array.push(nodes[i].id);

        }

        var ids = array.join(",");

        alert("ids=" + ids); // ids=1,100,101

        // 将选中的checkbox数据绑定到input

        $("input[name='ids']").val(ids);

        alert($("#form").serialize()); // ids=1%2C100%2C101

        alert(decodeURIComponent($("#form").serialize())); // ids=1,100,101

        $("#form").submit(); // 提交表单

    });

</script>

</body>

</html>

z-tree的使用的更多相关文章

  1. 【BZOJ2631】tree

    Description 一棵n个点的树.每一个点的初始权值为1. 对于这棵树有q个操作,每一个操作为下面四种操作之中的一个: + u v c:将u到v的路径上的点的权值都加上自然数c: - u1 v1 ...

  2. 【BZOJ2558】Count on a tree

    又是因为傻逼错误浪费了半天时间 原题: 给定一棵N个节点的树,每个点有一个权值,对于M个询问(u,v,k),你需要回答u xor lastans和v这两个节点间第K小的点权.其中lastans是上一个 ...

  3. Luogu 3690 Link Cut Tree

    Luogu 3690 Link Cut Tree \(LCT\) 模板题.可以参考讲解和这份码风(个人认为)良好的代码. 注意用 \(set\) 来维护实际图中两点是否有直接连边,否则无脑 \(Lin ...

  4. HDU 4757 Tree(可持续化字典树，lca)

    题意:询问树上结点x到结点y路上上的权值异或z的最大值. 任意结点权值 ≤ 2^16,可以想到用字典树. 但是因为是询问某条路径上的字典树,将字典树可持续化,字典树上的结点保存在这条路径上的二进制数. ...

  5. Spoj Query on a tree SPOJ - QTREE(树链剖分+线段树)

    You are given a tree (an acyclic undirected connected graph) with N nodes, and edges numbered 1, 2, ...

  6. [BZOJ 2002] [HNOI2010]弹飞绵羊(Link Cut Tree)

    [BZOJ 2002] [HNOI2010]弹飞绵羊(Link Cut Tree) 题面 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一 ...

  7. [BJOI2014]大融合(Link Cut Tree)

    [BJOI2014]大融合(Link Cut Tree) 题面 给出一棵树,动态加边,动态查询通过每条边的简单路径数量. 分析 通过每条边的简单路径数量显然等于边两侧节点x,y子树大小的乘积. 我们知 ...

  8. bzoj1588

    splay #include<cstdio> #include<cstring> #include<algorithm> using namespace std; ...

  9. CF 484E - Sign on Fence

    E. Sign on Fence time limit per test 4 seconds memory limit per test 256 megabytes input standard in ...

  10. 线段树（codevs1082）

    type jd=record z,y,lc,rc,sum,toadd:int64; end; var tree:..] of jd; qzh:..] of int64; x:..] of int64; ...

随机推荐

  1. 【VS开发】使用WinPcap编程（2）——打开网络设备并且开始捕获数据包

    这里需要特别强调的一个数据结构是pcap_t,它相当于一个文件描述符,代表一个已经打开的设备.我们对这个设备进行操作,就是对这个文件描述符进行操作. 首先是打开一个已知的设备,使用pcap_open( ...

  2. 【VS开发】【图像处理】基于灰度世界、完美反射、动态阈值等图像自动白平衡算法的原理、实现及效果

    基于灰度世界.完美反射.动态阈值等图像自动白平衡算法的原理.实现及效果      白平衡是电视摄像领域一个非常重要的概念,通过它可以解决色彩还原和色调处理的一系列问题.白平衡是随着电子影像再现色彩真实 ...

  3. datav轮播表使用事例

    官方事例地址: http://datav.jiaminghi.com/guide/scrollBoard.html 安装: npm install @jiaminghi/data-view 局部引入: ...

  4. python 并发编程 非阻塞IO模型

    非阻塞IO(non-blocking IO) Linux下,可以通过设置socket使其变为non-blocking.当对一个non-blocking socket执行读操作时,流程是这个样子: 从图 ...

  5. java期末考试

    水仙花数 package txt; public class shuixianhua { public static void main(String[] args) { // TODO Auto-g ...

  6. 洛谷 P1472 奶牛家谱 Cow Pedigrees 题解

    题面 这道题我觉得是个不错的题: 根据题意可以较清晰的发现ans只和n和k有关:(因为输入的只有这两个数啊~): 那么设f[i][j]表示前i层用了j个节点的方案数,g[i][j]表示深度小于等于i并 ...

  7. RabbitMQ入门教程(七)：主题交换机Topics

    原文:RabbitMQ入门教程(七):主题交换机Topics 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog. ...

  8. luogu P1758 [NOI2009]管道取珠

    luogu 这个题中的平方有点东西,考虑他的组合意义,也就是做这个过程两次,如果两次得到的结果一样就给答案+1,所以可以考虑dp,设\(f_{i,j,k,l}\)表示第一个过程中上面取到的第\(i\) ...

  9. C#判断点是否在直线上

    判断点在直线上,实际上就是判断点到直线上的垂直距离.点到直线垂直距离为0,则点在线上.当然也可以误差设置误差几个像素. 参考资料并进行修改:http://blog.sina.com.cn/s/blog ...

  10. CodeReview的一些原则

    架构/设计/常规角度: 单一职责原则 一个类只能干一个事情,一个方法最好也只干一件事情.一个类既干UI的事情,又干逻辑的事情,这个在低质量的代码里是很常见. 行为是否统一 缓存是否统一 错误处理是否统 ...