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. Linux下objdump查看C程序编译后的汇编代码

    http://m.blog.csdn.net/article/details?id=47747047 Uboot中start.S源码的指令级的详尽解析 http://www.crifan.com/fi ...

  2. idea tomcat debug 失效

    idea 开发神器 有时候遇到各种问题 这不 现在遇到了一个问题 启动容器时 debug断点不能进入 在网上找了老半天 终于找到答案了 原因是使用tomcat的时候 没有选择"pass en ...

  3. MATLAB串口操作和GUI编程

    程序说明 V1.0 2015/2/08 MATLAB串口操作和GUI编程   概述   本文介绍了程序AD9512_Serial_GUI的编程思路和功能.该程序设计到MATLAB的图像用户界面编程的基 ...

  4. 第161天：CSS3实现兼容性的渐变背景(gradient)效果

    CSS实现兼容性的渐变背景(gradient)效果 一.有点俗态的开场白 在对CSS3支持日趋完善的今天,实现兼容性的渐变背景效果已经完全成为可能,本文就将展示如何实现兼容性的渐变背景效果.在众多的浏 ...

  5. Angel Beats,AFOer Beats?

    意识模糊的时候适合写一些奇怪的东西? NOI退役之后我尝试了很多方法调节心态.(比如做OI题,出OI题,学文化课,读书,吃饭,睡觉,水群,看番,推galgame). 然而看啥都是退役的画风.比如说推W ...

  6. 迁移数据到历史表SQL(转)

    有时工作需要需要把当前表的数据,移到历史表中,而历史表基本是以时间(年)为后缀来命名历史表的,如 A_2011,A_2012,在移数据时,要按数据的时间,移到不同的表中,且由于如果数据有同步.一次处理 ...

  7. BZOJ4985 评分（二分答案+树形dp）

    首先二分答案简化一下问题,现在只有0和1了,要求最后剩下的是1.再简化一下考虑没有已固定的位置怎么做.考虑每个位置由其合并到的位置连边,显然这样形成了一棵三叉树.设f[i]为使得某位置为1其子树至少要 ...

  8. 洛谷 P3258 [JLOI2014]松鼠的新家

    树剖,裸题,鉴定完毕. 我是题面 读完题,恩,树剖,裸题,没劲. 处理很简单,既然每到一个房间吃一块糖,那么就在每条路径上的每个房间放一颗糖,但是每条路径的终点也就是下一条路径的起点,在这里只能加一次 ...

  9. StringUtils工具类说明

    /***************************************为空判断***************************************/ //null 和 " ...

  10. C++四种类型转化

    2018-08-02 (星期四)C++类型转换:static_cast提供编译时期静态类型检测:    static_cast <type-id> (expression)    1)完成 ...