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. word2vec原理浅析

     1.word2vec简介 word2vec,即词向量,就是一个词用一个向量来表示.是2013年Google提出的.word2vec工具主要包含两个模型:跳字模型(skip-gram)和连续词袋模型( ...

  2. python 爬取网页内的代理服务器列表（需调整优化）

    #!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2017-08-30 20:38:23 # @Author : EnderZhou (z ...

  3. 高性能异步分布式事务TCC框架(资料汇总)

    https://github.com/yu199195/hmily tcc源码解析系列(一)之项目结构 https://yu199195.github.io/2017/10/11/TCC/tcc-on ...

  4. Linux-usermod：增加已建立用户的用户组

    usermod --help -g, --gid GROUP force use GROUP as new primary group -G, --groups GROUPS new list of ...

  5. opencv学习之显示图像-imshow函数

    序 上一篇opencv学习之读取图像-imread函数介绍完opencv读取图片函数imread,这次来介绍与它对应的图像显示函数imshow. imshow函数 imshow函数功能 imshow的 ...

  6. java tomcat服务器

    1.什么是javaweb? Java web,是用java技术来解决相关web互联网领域的技术的总称. web包括:web服务器和web客户端两部分.java在最早web客户端的应用有java app ...

  7. DNS服务器搭建笔记

    DNS在linux服务器上的服务名是named,而named服务依赖软件bind. 环境:     系统版本:VBOX虚拟机centos6.0.     本机内网IP 192.168.2.198.   ...

  8. RocketMQ高性能原理(pushConsumer,CommitLog,ZeroCopy)

    1. Rocketmq消费模型(实时性) 常见的数据同步方式有这几种: push:producer发送消息后,broker马上把消息投递给consumer.这种方式好在实时性比较高,但是会增加brok ...

  9. 【转载】Django自带的注册登陆功能

    1.登陆 知识点: a.auth.authenticate(username=name值, password=password值) 验证用户名和密码 b.auth.login(request, use ...

  10. es6 filter() 数组过滤方法总结（转载）

    1.创建一个数组,判断数组中是否存在某个值 var newarr = [ { num: 1, val: 'ceshi', flag: 'aa' }, { num: 2, val: 'ceshi2', ...