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. Spring boot整合shiro框架

    ShiroConfiguration package com.energy.common.config; import java.util.LinkedHashMap; import java.uti ...

  2. python 序列化 pickle shelve json configparser

    1. 什么是序列化 我们把变量从内存中变成可存储或传输的过程称之为序列化. 序列化之后,就可以把序列化后的内容写入磁盘,或者通过网络传输到别的机器上. 反过来,把变量内容从序列化的对象重新读到内存里称 ...

  3. BZOJ4976 宝石镶嵌（动态规划）

    显然被留下的宝石应该贡献至少一位,否则就可以扔掉.所以如果n-k>=logw,直接输出所有数的or.现在n变得和k同阶了.于是设f[i][j]为前i个数or为j时至少选几个数,转移显然.当然可以 ...

  4. DataTable 转换 DataSet

    DataTable dt = resuylt.Copy(); var dsR = new DataSet(); ds.Tables.Add(dt);

  5. xpose修改手机imei码，注入广告

      何为hook Hook英文翻译过来就是“钩子”的意思,那我们在什么时候使用这个“钩子”呢? 我们知道,在Android操作系统中系统维护着自己的一套事件分发机制.应用程序,包括应用触发事件和后台逻 ...

  6. Unity3D for VR 学习(6): 再次温故知新-3D数学

    一年前,系统学习过3D数学,并记录了一篇博客<C#程序员整理的Unity 3D笔记(十):Unity3D的位移.旋转的3D数学模型>. 一年后,再次温习之. 坐标系:Unity3D使用左手 ...

  7. NOIP2017 【游记】

    一年过去,想起去年还是个傻b[今年也是],心里总是无限的感慨. 脑海里是日日夜夜在机房的身影,一题一题AC的激情 我等今年等了许久,虽然我是个蒟蒻,但我有梦想的憧憬 鲲鹏展翅翼向天,扶摇直上九万里. ...

  8. 2-sat问题学习记录

    如果你不知道什么是sat问题,请看以下问答. Q:sat问题是什麽?A:首先你有n个布尔变量,然后你有一个关于这n个布尔变量的布尔表达式,问你,如果让你随意给这n个布尔变量赋值,这个布尔表达式能否成立 ...

  9. Vue项目SEO优化的另一种姿态

    背景:当前项目首页和登陆后的平台在一个项目里,路由采用hash模式,现在要做SEO优化,这时候同构SSR(Server Side Rendering)服务端渲染代价显然太大,影响范围比较广,同样更改当 ...

  10. 题解【bzoj3529 [SDOI2014]数表】

    Description \(T\) 组询问,定义 \(F(n)=\sum\limits_{d|n}d\).每次给出 \(n,m,a\) 求 \[\sum\limits_{i=1,j=1,F(\gcd( ...