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. 安装docker registry

    docker pull registry 创建目录  /usr/local/docker/registry 创建 docker-compose.yml version: '3' services: r ...

  2. 基于element表格的合并多个行实例

    官方示例地址:https://github.liubing.me/lb-element-table/zh/guide/ 效果图: 0.下载lb-table 并引入 import LbTable fro ...

  3. linux whoami 显示当前用户的用户名

    [root@MongoDB ~]# whoami root

  4. 学习Linux第一周记

    2019/11/25 服务器硬件详述1) CPU                         作用:运算/控制      关注信息 :路数 服务器中CPU的颗数   一般有  (单路    双路  ...

  5. 升级tableau版本

    下载地址: https://www.tableau.com/zh-cn/support/releases 2018以后的版本升级:https://help.tableau.com/current/se ...

  6. 详解Vue 如何监听Array的变化

    详解Vue 如何监听Array的变化:https://www.jb51.net/article/162584.htm

  7. 云服务器以及linux操作系统打开防火墙，在墙上开一个小口

    在服务器运行时,需要在某个端口上开一个小口,以供外部访问 执行命令/sbin/iptables -I INPUT -p tcp --dport 8080 -j ACCEPT 8080为端口号,需要开的 ...

  8. 2017.10.21 C组比赛总结

    今天考得不太好,只拿了100+0+0+30=130分... [GDKOI训练]音乐节拍 考场AC了! 其实就是大水一道! 思路:二分查找 每次输入后,输出该时刻所在的区间的编号就好了. 总体难度:★★ ...

  9. zookeeper 实战操作

    一:监听服务端zookeeper节点数据改变 import java.io.IOException; import java.util.concurrent.CountDownLatch; impor ...

  10. HBASE学习笔记(四)

    这两天把要前几天的知识点回顾一下,接下来我会用自己对知识点的理解来写一些东西 一.知识点回顾 1.hbase集群启动:$>start-hbase.sh ===>hbase-daemon.s ...