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. 【神经网络与深度学习】【Matlab开发】caffe-windows使能Matlab2015b接口

    [神经网络与深度学习][Matlab开发]caffe-windows使能Matlab2015b接口 标签:[神经网络与深度学习] [Matlab开发] 主要是想全部来一次,所以使能了Matlab的接口 ...

  2. 【Qt开发】QTableWidget设置根据内容调整列宽和行高

    QTableWidget要调整表格行宽主要涉及以下一个函数 1.resizeColumnsToContents();                      根据内容调整列宽            ...

  3. 微信小程序request请求封装，验签

    1/ 公共文件util添加 request请求 //简单封装请求 function request(params, path, isShowLoading = true, goBack = false ...

  4. mysql——视图——概念

    二.视图 视图是一种虚拟的表,是从数据库中的一个或者多个表中导出来的表. 视图还可以从已经存在的视图的基础上定义. 数据库中只存放了视图的定义,并没有存放视图中的数据,这些数据存放在原来的表中. 使用 ...

  5. 小程序图片预览 wx.previewImage

      list: [ 'http://img5.imgtn.bdimg.com/it/u=3300305952,1328708913&fm=26&gp=0.jpg', 'http://i ...

  6. 解决js跨域使用nginx配置问题

    在server域中加入以下配置: #解决跨域问题 add_header Access-Control-Allow-Origin *; add_header Access-Control-Allow-C ...

  7. poj2773（欧基里德算法 或 二分+容斥）

    题目链接:https://vjudge.net/problem/POJ-2773 题意:给定m,k,求与m互质的第k个数. 思路一:利用gcd(a,b)=gcd(b*t+a,b)知道,与m互质的数是以 ...

  8. 初步学习jquery学习笔记（三）

    jQuery学习笔记三 jquery停止动画 stop函数的初步功能 <!DOCTYPE html> <html lang="en"> <head&g ...

  9. 360度3D 旋转插件

    Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比 ...

  10. Jquery复习（九）之noConflict()

    如何在页面上同时使用 jQuery 和其他框架? jQuery 和其他 JavaScript 框架 正如您已经了解到的,jQuery 使用 $ 符号作为 jQuery 的简写. 如果其他 JavaSc ...