【zTree】zTree的3.5.26静态树与动态树(实用)

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静态树与动态树(实用)的更多相关文章

zTree静态树与动态树的用法——（七）
0.[简介] zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件兼容 IE.FireFox.Chrome 等浏览器在一个页面内可同时生成多个 Tree 实 ...
luogu3703 [SDOI2017]树点涂色(线段树+树链剖分+动态树)
link 你谷的第一篇题解没用写LCT,然后没观察懂,但是自己YY了一种不用LCT的做法我们考虑对于每个点,维护一个fa,代表以1为根时候这个点的父亲再维护一个bel,由于一个颜色相同的段一定是一 ...
点分治Day2 动态树分治
蒟蒻Ez3real冬令营爆炸之后滚回来更新blog... 我们看一道题 bzoj3924 ZJOI2015D1T1 幻想乡战略游戏给一棵$n$个点的树$(n \leqslant 150000)$ 点 ...
可持久化线段树（主席树）——静态区间第k大
主席树基本操作:静态区间第k大 #include<bits/stdc++.h> using namespace std; typedef long long LL; ,MAXN=2e5+, ...
Trie树（字典树）（1）
Trie树.又称字典树,单词查找树或者前缀树,是一种用于高速检索的多叉树结构. Trie树与二叉搜索树不同,键不是直接保存在节点中,而是由节点在树中的位置决定. 一个节点的全部子孙都有同样的前缀(pr ...
wpf 逻辑树与可视化树
XAML天生就是用来呈现用户界面的,这是由于它具有层次化的特性.在WPF中,用户界面由一个对象树构建而成,这棵树叫作逻辑树.逻辑树的概念很直观,但是为什么要关注它呢?因为几乎WPF的每一方面(属性.事 ...
浅谈算法和数据结构: 十平衡查找树之B树
前面讲解了平衡查找树中的2-3树以及其实现红黑树.2-3树种,一个节点最多有2个key,而红黑树则使用染色的方式来标识这两个key. 维基百科对B树的定义为“在计算机科学中,B树(B-tree)是一种 ...
动态树之LCT(link-cut tree)讲解
动态树是一类要求维护森林的连通性的题的总称,这类问题要求维护某个点到根的某些数据,支持树的切分,合并,以及对子树的某些操作.其中解决这一问题的某些简化版(不包括对子树的操作)的基础数据结构就是LCT( ...
从B 树、B+ 树、B* 树谈到R 树
从B 树.B+ 树.B* 树谈到R 树作者:July.weedge.Frankie.编程艺术室出品. 说明:本文从B树开始谈起,然后论述B+树.B*树,最后谈到R 树.其中B树.B+树及B*树部分由 ...

随机推荐

PHP面向对象之final关键字
最终类最终类,其实就是一种特殊要求的类:要求该类不允许往下继承下去. 形式: final class 类名{ //类的成员定义...跟一般类的定义一样! } 最终方法最终方法,就是一个不允许下 ...
第164天：js方法调用的四种模式
js方法调用的四种模式 1.方法调用模式 function Persion() { var name1 = "itcast", age1 = 19, show1 = functio ...
WebClient的使用
1.下载网页源码: private void button1_Click(object sender, EventArgs e) { string url = textBox1.Text; strin ...
HDU4787_GRE Words Revenge
这个题目做得泪牛满面. 题目为给你若干串,有的表示添加一个串,有的表示询问一个串有多少个字串为前面出现过的串. 题目一看就知道肯定是AC自动机(不过后缀自动机也是可以的) 但是细想就会发现AC自动机好 ...
uva1391-Astronauts
宇航员执行任务,有三个任务ABC.把宇航员按照平均年龄分成新老两组,老宇航员可以去AC,新宇航员可以取BC.宇航员之间有不能共存关系,问是否有合法的分配方案. 分析虽然有三个任务,但每个宇航员还是只 ...
LR安装No Background bmp defined in section General entry BGBmp的解决办法
问题描述:我在win10装LR11总是报这个错误:No Background bmp defined in section "General" entry "BGBmp& ...
【刷题】BZOJ 2142 礼物
Description 一年一度的圣诞节快要来到了.每年的圣诞节小E都会收到许多礼物,当然他也会送出许多礼物.不同的人物在小E 心目中的重要性不同,在小E心中分量越重的人,收到的礼物会越多.小E从商店 ...
【比赛】HNOI2018 总结
一将功成万骨枯,我就是给那些队爷做基数的一.比赛过程 Day1 看完题,暴力好打,然后就打觉得第三题模型很好建啊,先看第三题吧(结果第三题是最..的) 图建出来,先看树的情况,设dp试一下结果一 ...
Hive（四）hive函数与hive shell
一.hive函数 1.hive内置函数 (1)内容较多,见< Hive 官方文档> https://cwiki.apache.org/confluence/displ ...
ＭDK5.13新建工程步骤
http://www.stmcu.org/module/forum/thread-600249-1-1.html 本人也是接触stm32没多久,之前用的MDK是5.1,现在用的是5.13,MDK5.0 ...

【zTree】zTree的3.5.26静态树与动态树(实用)

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

随机推荐

热门专题