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. PHP 操作redis 详细讲解 转的 http://www.cnblogs.com/jackluo/p/3412670.html

    phpredis是redis的php的一个扩展,效率是相当高有链表排序功能,对创建内存级的模块业务关系 很有用;以下是redis官方提供的命令使用技巧: 下载地址如下: https://github. ...

  2. 零拷贝Zero-Copy（NIO）

    介绍 Java 的zero copy多在网络应用程序中使用.Java的libaries在linux和unix中支持zero copy,关键的api是java.nio.channel.FileChann ...

  3. SPAMS:稀疏建模工具箱

    https://chunqiu.blog.ustc.edu.cn/?p=570 http://spams-devel.gforge.inria.fr/index.html 在一篇显著性检测文章:Sal ...

  4. Telnet 远程控制

    Telnet 远程控制 一.挂第3张盘,进入RPMS中: 挂盘:mount /dev/cdrom /mnt/cdrom 路径:cd /mnt/cdrom/RedHat/RPMS 二.将rpm文件复制到 ...

  5. QML从文件加载组件简单示例

    QML从文件加载组件简单示例 文件目录列表: Project1.pro QT += quick CONFIG += c++ CONFIG += declarative_debug CONFIG += ...

  6. 【JavaScript】简介、<Script>标签及基本概念

    一.前言 时光荏苒,岁月匆匆.今年年初进入数据平台部门转型做Web平台.要想搞好前端肯定要学好JavaScript,于是准备抓上一俩本书从基础学起. 二.内容       简介 JavaScript是 ...

  7. 【PDF】HTML中嵌入pdf的简单方法

    <embed src="> 或者你不想显示某些功能的话: <embed src=">

  8. codeforces765F Souvenirs

    本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000 作者博客:http://www.cnblogs.com/ljh2000-jump/ ...

  9. Linux内核分析第一周学习博客 --- 通过反汇编方式学习计算机工作过程

    Linux内核分析第一周学习博客 通过反汇编方式学习计算机工作过程 总结: 通过这次对一个简单C程序的反汇编学习,我了解到计算机在实际工作工程中要涉及大量的跳转指针操作.计算机通常是顺序执行一条一条的 ...

  10. 复习JavaScript随手记

    数据类型 基本类型 string number boolean undefined number类型,包含整数浮点数 NaN和自己都不相等,涉及NaN的计算结果都是NaN isNaN()函数用于判断一 ...