1.静态树:

目录结构:(css与js为下载的原文件夹)

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHkAAAA8CAIAAADNDYLBAAAEYklEQVR4nO2ba0/aUBjH/RRLfLPNemktY6zI3TG8u4Q5KeAMxmRGs4uZUxKEzWTZFrPouOrKTOA7zCWOmFgzJ9/BV3wNXvXlXoC0lt7k1vZwkv+L5uFw4Px6cp7T59/Tg2IIVGfUo/o/6B5B1jphnctEa0ruvnM6TKqPR8tqGetcJnqwtzU1abfZjDypPkiNSJR1IvF9GB+4FWsxqT5IjUiUtWvUQRAPUaxfmnVyd0P1MehFUqyH8QEMGxwc6pNgHdkINfcPwjRTZpgyw5RLeS+KIWT+iqlGClEMEYzoVFKsUQxBsf77fXf7B+6JsV5amPU8sSpZSb5+XBUEXUFclZ8q8YDWR3QrWdbIENrX23tHcHbnMtFxj3VzfVEJa3JujN9DrMCUKLKOPsNc5fwSEb1KhjU2LDWvj1IRm9V4lIrIgk5/e4/XZ1oB1hV5cyUe3/qI/iS9Xg9Kr9dfPqy9XPIqmdQry8+EegjTTJmOVa9zeS/qp3IxFi4dQwQiaiNrC2vZfcj6Gpn+9l4W9FEqYjbjwp34qdLNvBelq6mSocOoSESnEmUdj+/L7q+jm8tKJvXW+qLq49SCmnpuTO5uKGHteWJVfZxaEKw9QdYgCrKGrEEUZA1ZgyjIGrIGUar6jX6qpPNykjqsG/EbIeuKoN/YOdbQb+wo67b7jRx/CxhTsUHWKIa012+ssQbIVGyGdTv9RhYxOKZi46zb6zfypzMIpmKDrNvuN3LWEGBMxQZZt91v5MxrYEzFRlh3wm/sjpQoz1qJmvQbyfyVyPshYEql2lOsAPZWWkusu1KQNWQNoiBryBpEQdb6Ye1w2QLUZShxHEr+ripxHEocL8R/zcdPXBMTsg9E3aNmWdudI0Hqn+BHgWzRlzhxz8xoAHeYbrakFaabfhpoI+uFbBHFEDJ+4hwfU4ibrYowrS2PgM46mC0GqctgtkhmzgnzrU6UtmBgCljfqqaobdYs9NSp1T4CWXeCdeDHhcVG1Mc5HiNvueANrAIlTDPl61oV/1QkKhrksM4XOD/ENmZKFFlpEKseKKFjtYpNrSuds2bFPxAmwJpTqOJO0trcFAxyO7y+l+xLKdxmnBtZocw2rrl0mmH90IQHNnae7x1bbAT+yDgfL/jebBtNuDxrgSq24Lzm3Jib+bOU9woHb3TIvROCrGsNBK81w5owGwNvtwPU5fTLTaMJN5gM7tUdMnPue7VFEEZJ1oIrqRzr+qq36FFJ4Fg/9ZHkwV/P689mS/WVPgNh8rz67D84n5mbE2ctlp0kWd84FYlEadaJ5wfZ5QIg1qNuZzCy7z+8mA6EDA9Q3DhsJ1d86bMXH1LOxw4x1vzdtExu5HyXPRXJidcHZVhfJ+dabtQFaxRDXG5XcDvuS52OWEwGM+FLn4U+/RybHEOV5MbuUCtYp/5Urh0u2/jUhOHBEG4YmpydHnVX3+aBrFvD2uGy+A8vgtmiqKhigCranbd6lgFTsKYKWYMoyBqyBlH/ASXiK1yFL84hAAAAAElFTkSuQmCC" alt="" />

代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>zTree测试</title>

        <link rel="stylesheet" type="text/css" href="css/demo.css" />

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

        <script src="js/jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>

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

    </head>

    <script type="text/javascript">

        var setting = {

            //多选框显示

            check: {

                enable: true

            },

            data: {

                simpleData: {

                    enable: true,

                    idKey: "id",

                    pIdKey: "pId",

                    rootPId: 0

                }

            },

            callback: {

                onClick: zTreeOnClick,

                onCheck: zTreeOnCheck

            }

        };

        var treeNodes = [{

                "id": 1,

                "pId": 0,

                "name": "test1"

            },

            {

                "id": 11,

                "pId": 1,

                "name": "test11"

            },

            {

                "id": 12,

                "pId": 1,

                "name": "test12"

            },

            {

                "id": 111,

                "pId": 11,

                "name": "test111"

            }

        ];

        //鼠标点击树事件

        function zTreeOnClick(event, treeId, treeNode) {

            alert(treeNode.id + ", " + treeNode.name);

        };

        //鼠标点击前面d复选框事件

        function zTreeOnCheck(event, treeId, treeNode) {

            //    treeNode.checked表示节点d选中状态(true|false)

            alert(treeNode.id + ", " + treeNode.name + treeNode.checked);

        };

        $(document).ready(function() {

            $.fn.zTree.init($("#treeDemo"), setting, treeNodes);

        });

    </script>

    <body>

        <div class="content_wrap">

            <div class="zTreeDemoBackground left">

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

            </div>

        </div>

    </body>

</html>

测试:

点击树:

点击复选框:

2.动态生成带点击事件的树

页面中准备树位置

                            <div class="user_left_tree_info">

                                <div class="user_left_tree_info_title">部门</div>

                                <div class="hr"></div>

                                <div class="ztree" id="treeDemo"></div>

                            </div>

Js请求树数据与生成树结构:

$(function() {

    alert(contextPath)

    var zNodes10;

    $.ajax({

        url : contextPath + '/exam_getDepartmentTree.action',

        async : true,

        dataType : 'json',

        success : function(response) {

            zNodes10 = response.departmentTrees;

            // 生成树结构

            geneDepartmentTree(zNodes10);

        },

        error : function() {

            alert("查询内部部门树失败！！！")

        }

    });

    }

//生成树函数

function geneDepartmentTree(departmentTrees) {

    var setting = {

        view : {

            selectedMulti : false

        },

        check : {

            enable : true

        },

        data : {

            simpleData : {

                enable : true,

                enable : true,

                idKey : "departmentId",

                pIdKey : "upDepartmentId",

                rootPId : null

            },

            key : {

                name : "departmentName",

            }

        },

        callback : {

            onClick : zTreeOnClick

        }

    };

    var treeNodes = departmentTrees;

    $.fn.zTree.init($("#treeDemo"), setting, treeNodes);

}

// 鼠标点击树事件(打印点击的id与名字)

function zTreeOnClick(event, treeId, treeNode) {

    alert(treeNode.departmentId + ", " + treeNode.departmentName);

}

后台返回的JSON数据格式:(主要返回部门ID，上级ID，部门姓名即可构成一颗树)

{"departmentTrees":[{"departmentId":"10","departmentName":"厂级-1"},{"departmentId":"10001","departmentName"

:"部门1_10","upDepartmentId":"10"},{"departmentId":"10001001","departmentName":"班组1_10001","upDepartmentId"

:"10001"},{"departmentId":"10002","departmentName":"部门2_10","upDepartmentId":"10"},{"departmentId":"10002001"

,"departmentName":"班组2_10002","upDepartmentId":"10002"},{"departmentId":"10003","departmentName":"部门3_10"

,"upDepartmentId":"10"},{"departmentId":"11","departmentName":"厂级-2"},{"departmentId":"11001","departmentName"

:"部门1_11","upDepartmentId":"11"},{"departmentId":"12","departmentName":"厂级-3"}]}

结果:

点击树:

3.更复杂的关于树的点击事件参考:

http://www.cnblogs.com/qlqwjy/p/7309721.html

另一个例子:(带有单选按钮的树)

******S   QLQ**********************/

var zTree;

var setting = {

     check:{

            enable:true,

            chkStyle :"radio",

            radioType: "all"

        },

    data : {

        key : {

            name:"typeName"

        },

        simpleData : {

            enable : true,

            idKey: "typeId",

            pIdKey: "upId",

            rootPId: 1

        }

    },

    callback : {

        onClick : clickNode

    //点击节点触发的事件

    }

};

function geneTypeTree(){

    $.getJSON(contextPath+"/trainacontentType_getTraincontenttypeTree.action",function(response){

        var zNodes = response.traincontenttypeTree;

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

    });

}

/************S   点击事件*********/

function clickNode(e, treeId,treeNode) {

    $("#trainContentTypeId").val(treeNode.typeId);//向隐藏的类别编号赋值

    $("[name='typeId']").val(treeNode.typeId);//向隐藏的类别编号赋值

    $("#yeHao").val("1");

    btnFindFy();

}

/************E   点击事件*********/

function openModal(){

    $("#el_empTrainDoc").modal("show");

}

/******E   QLQ**********************/

【zTree】zTree的3.5.26静态树与动态树(实用)的更多相关文章

  1. zTree静态树与动态树的用法——（七）

    0.[简介] zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实 ...

  2. luogu3703 [SDOI2017]树点涂色(线段树+树链剖分+动态树)

    link 你谷的第一篇题解没用写LCT,然后没观察懂,但是自己YY了一种不用LCT的做法 我们考虑对于每个点,维护一个fa,代表以1为根时候这个点的父亲 再维护一个bel,由于一个颜色相同的段一定是一 ...

  3. 点分治Day2 动态树分治

    蒟蒻Ez3real冬令营爆炸之后滚回来更新blog... 我们看一道题 bzoj3924 ZJOI2015D1T1 幻想乡战略游戏 给一棵$n$个点的树$(n \leqslant 150000)$ 点 ...

  4. 可持久化线段树（主席树）——静态区间第k大

    主席树基本操作:静态区间第k大 #include<bits/stdc++.h> using namespace std; typedef long long LL; ,MAXN=2e5+, ...

  5. Trie树（字典树）（1）

    Trie树.又称字典树,单词查找树或者前缀树,是一种用于高速检索的多叉树结构. Trie树与二叉搜索树不同,键不是直接保存在节点中,而是由节点在树中的位置决定. 一个节点的全部子孙都有同样的前缀(pr ...

  6. wpf 逻辑树与可视化树

    XAML天生就是用来呈现用户界面的,这是由于它具有层次化的特性.在WPF中,用户界面由一个对象树构建而成,这棵树叫作逻辑树.逻辑树的概念很直观,但是为什么要关注它呢?因为几乎WPF的每一方面(属性.事 ...

  7. 浅谈算法和数据结构: 十 平衡查找树之B树

    前面讲解了平衡查找树中的2-3树以及其实现红黑树.2-3树种,一个节点最多有2个key,而红黑树则使用染色的方式来标识这两个key. 维基百科对B树的定义为“在计算机科学中,B树(B-tree)是一种 ...

  8. 动态树之LCT(link-cut tree)讲解

    动态树是一类要求维护森林的连通性的题的总称,这类问题要求维护某个点到根的某些数据,支持树的切分,合并,以及对子树的某些操作.其中解决这一问题的某些简化版(不包括对子树的操作)的基础数据结构就是LCT( ...

  9. 从B 树、B+ 树、B* 树谈到R 树

    从B 树.B+ 树.B* 树谈到R 树 作者:July.weedge.Frankie.编程艺术室出品. 说明:本文从B树开始谈起,然后论述B+树.B*树,最后谈到R 树.其中B树.B+树及B*树部分由 ...

随机推荐

  1. TP中if标签

    if标签 If标签如果php中if语句的作用,if是用于流程控制的. 在ThinkPHP中if标签也是用于流程控制的. If标签的语法格式: <if condition=’条件表达式’> ...

  2. Android Studio -导入项目 gradle处理

    如果导入 android studio 项目, 那么一定要注意 需要合适的gradle版本,具体方法为: 首先导入步骤: 打开android studio ==> File ==> New ...

  3. bzoj2699 更新

    题意 对于一个数列A[1..N],一种寻找最大值的方法是:依次枚举A[2]到A[N],如果A[i]比当前的A[1]值要大,那么就令A[1]=A[i],最后A[1]为所求最大值.假设所有数都在范围[1, ...

  4. 【Mybatis】简单的mybatis增删改查模板

    简单的mybatis增删改查模板: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE map ...

  5. Contest 7

    A:搜索好难啊根本不会啊. B:原题都能写挂没救了啊.考虑求出每个数作为最小值时能向左向右扩展到的最远位置,那么这段区间里的所有数就不可能作为唯一的最小值成为最优解了,否则假设可以的话这段区间里的数都 ...

  6. [区分] 1.计算机网络/internet(互联网) 2.Internet(因特网) 3.www/web(万维网)

    internet(互联网或互连网)是一个通用名词,泛指由多个计算机网络互联而成的虚拟网络.Inernet(因特网)是一个专用名词,指当前全球最大的.开放的.由众多网络相互连接而成的特定的计算机网络,它 ...

  7. C#中string[]数组和list<string>泛型的相互转换 【转】

    http://www.cnblogs.com/szjdw/archive/2012/03/09/2387885.html 1,从System.String[]转到List<System.Stri ...

  8. 【刷题】BZOJ 1211 [HNOI2004]树的计数

    Description 一个有n个结点的树,设它的结点分别为v1, v2, -, vn,已知第i个结点vi的度数为di,问满足这样的条件的不同的树有多少棵.给定n,d1, d2, -, dn,编程需要 ...

  9. 【hdu6093】Rikka with Number

    多校第五場的題. 首先是一個好數只在某個進制下,不會是在兩個進制下都爲好數. 另外每個進制好數的個數爲d!-(d-1)!,因爲要保證第一位不爲0. 然後就是在臨界進制下有多少個好數的問題,可以變成兩個 ...

  10. BZOJ2595：[Wc2008]游览计划——题解（插头dp）

    http://www.lydsy.com/JudgeOnline/problem.php?id=2595 Description Input 第一行有两个整数,N和 M,描述方块的数目. 接下来 N行 ...