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. 基于vant实现一个问卷调查

    实现背景 最近学习<vue实战>,第二篇进阶篇有一个练习 刚好最近在研究vue移动端框架vant 两者结合,实现这么个小项目 实现代码 新建 vue单文件 L0529L.vue <t ...

  2. mysql——多表——子查询——示例

    子查询: 子查询是将一个查询语句嵌套在另外一个查询语句中,内层查询语句的查询结果,可以作为外来层查询语句提供查询条件. 因此在特定条件下,一个查询语句的条件,需要另外一个查询语句来获取. 前期准备表: ...

  3. centoss7下将命令加开机服务

    https://www.cnblogs.com/hxun/p/11075755.html

  4. [转帖]什么是 LLVM？Swift, Rust, Clang 等语言背后的支持

    要了解用于以编程方式生成机器原生代码的编译器框架是如何让新语言的推出以及对现有的语言进行增强比以往更加容易了. https://www.oschina.net/translate/what-is-ll ...

  5. issubclass 和 isinstance和断点调试

    issubclass 和 isinstance和断点调试 一.issubclass 判断第一个类是不是第二个类的子类,返回True或Flase class Foo: pass class Bar(Fo ...

  6. vue.js之过渡动画

    vue提供了一个封装动画的组件 <transition name="tr"></transition>,将需要执行动画的元素包裹在该组件中,在通过css修改 ...

  7. Cookie、Session和LocalStorage

    前记 前面我已经写了一篇关于Cookie的文章,但是那时候我其实理解的并不是很深刻,会有些搞不懂的地方,今天我就再写一次,博客也是我的学习笔记 Cookie Cookie是服务器发送到用户浏览器并保存 ...

  8. jQuery jsonp跨域请求详解

    跨域的安全限制都是对浏览器端来说的,服务器端是不存在跨域安全限制的. 浏览器的同源策略限制从一个源加载的文档或脚本与来自另一个源的资源进行交互. 如果协议,端口和主机对于两个页面是相同的,则两个页面具 ...

  9. Jade学习（一）之特性、安装

    前言 流行的模板 PHP:Smarty SimpleTemplate Xtemplate Savant Java:Velocity FreeMarker Jbyte C#:Dotiquid Sharp ...

  10. mac osx sed 命令

    $ sed -i "s/devicedemo/device/g" `grep devicedemo -rl ./` sed: 1: ".//.coveragerc&quo ...