API与Demo:http://www.treejs.cn/v3/api.php

使用插件，第一步依然是引入：

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

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

<script type="text/javascript" src="jquery.ztree.all.js"></script>

　　//详细的引入请参见API——如果有较多地方需要引入，请将引入部分抽取为专门的JSP页面，使用 <include />，例如，引入的页面：

<link href="${ctxStatic}/treeTable/themes/vsStyle/treeTable.min.css" rel="stylesheet" type="text/css" />

<script src="${ctxStatic}/treeTable/jquery.treeTable.min.js" type="text/javascript"></script>

　　　　如何引入：

<%@include file="/WEB-INF/views/include/treeview.jsp" %>

　　接下来看实例：

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

　　大致分析：

　　其中，$.fn.zTree.init为初始化树的方法，它接收三个参数，第一个为ztree的DOM容器，通常为 <ul> 或 <div>，例如：

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

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

//请务必设置class为 ztree，以指定为ztree的容器。

　　第二个参数为ztree的配置，用于显示树的显示样式，例如：

// zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）

var setting = {};

//详细配置后续补充

　　第三个参数为ztree的数据源，格式为JSON：

var zNodes = [

  {name:"test1", open:true,"checked":"true", children:[

     {name:"test1_1","checked":"true"}, {name:"test1_2"}]},

  {name:"test2", open:true, children:[

     {name:"test2_1"}, {name:"test2_2"}]}

  ];

　　这样，一个最简单的树便可以加载了：

<!DOCTYPE html>

<HTML>

 <HEAD>

  <TITLE> ZTREE DEMO </TITLE>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

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

  <script src="js/jquery-1.4.4.min.js"></script>

  <script src="js/jquery.ztree.all.js"></script>

  <SCRIPT LANGUAGE="JavaScript">

   var zTreeObj;

   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）

   var setting = {};

   // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）

   var zNodes = [

  {name:"test1111", open:true,"checked":"true", children:[

     {name:"test1_1","checked":"true"}, {name:"test1_2"}]},

  {name:"test2222", open:true, children:[

     {name:"test2_1"}, {name:"test2_2"}]}

  ]; 

      $(function(){

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

      });

  </SCRIPT>

 </HEAD>

<BODY>

<div>

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

</div>

</BODY>

</HTML>

　　

　　【使用开关函数隐藏与显示】：

$(".a").click(function(){

    $("p").toggle()

})

引用网友的理解：zTree的实现就是用setting把树的模型结构定义好，然后用zNodes当数据源，把数据浇灌到这个树

　　settings实例：

var setting = {data:{simpleData:{enable:true,idKey:"id",pIdKey:"pId",rootPId:'0'}},

            callback:{onClick:function(event, treeId, treeNode){

                    var id = treeNode.pId == '0' ? '' :treeNode.pId;

                    $('#officeContent').attr("src","${ctx}/sys/office/list?id="+id+"&parentIds="+treeNode.pIds);

                }

            }

        };

　　　　查阅API可以得知：（回调函数部分这里暂时不进行展开，可以参见官网API）

　　　　其中，simpleData的作用：不需要用户再把数据库中取出的 List 强行转换为复杂的 JSON 嵌套格式，这样，我们就可以使用简单的JSON格式，通过在JSON中指定id,pid来确定ztree的结构关系，而不用通过复杂的JSON嵌套来确定树的关系：

var setting = {

    data: {

        simpleData: {

            enable: true,

            idKey: "id",

            pIdKey: "pId",

            rootPId: 0

        }

    }

};

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"}

];

　　效果如下：

<!DOCTYPE html>

<HTML>

 <HEAD>

  <TITLE> ZTREE DEMO </TITLE>

  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

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

  <script src="js/jquery-1.4.4.min.js"></script>

  <script src="js/jquery.ztree.all.js"></script>

  <SCRIPT LANGUAGE="JavaScript">

   var zTreeObj;

   // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）

var setting = {

    data: {

        simpleData: {

            enable: true,

            idKey: "id",

            pIdKey: "pId",

            rootPId: 0

        }

    }

};

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(){

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

      });

  </SCRIPT>

 </HEAD>

<BODY>

<div>

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

</div>

</BODY>

</HTML>

　　

　　接下来看Web项目中实际使用的Demo:

　　　　后台：

/**

     * 获取机构JSON数据。

     * @param extId 排除的ID

     * @param type    类型（1：公司；2：部门/小组/其它：3：用户）

     * @param grade 显示级别

     * @param response

     * @return

     */

    @RequiresPermissions("user")

    @ResponseBody

    @RequestMapping(value = "treeData")

    public List<Map<String, Object>> treeData(@RequestParam(required=false) String extId, @RequestParam(required=false) String type,

            @RequestParam(required=false) Long grade, @RequestParam(required=false) Boolean isAll, HttpServletResponse response) {

        List<Map<String, Object>> mapList = Lists.newArrayList();

        List<Office> list = officeService.findList(isAll);

        for (int i=0; i<list.size(); i++){

            Office e = list.get(i);

            if ((StringUtils.isBlank(extId) || (extId!=null && !extId.equals(e.getId()) && e.getParentIds().indexOf(","+extId+",")==-1))

                    && (type == null || (type != null && (type.equals("1") ? type.equals(e.getType()) : true)))

                    && (grade == null || (grade != null && Integer.parseInt(e.getGrade()) <= grade.intValue()))

                    && Global.YES.equals(e.getUseable())){

                Map<String, Object> map = Maps.newHashMap();

                map.put("id", e.getId());

                map.put("pId", e.getParentId());

                map.put("pIds", e.getParentIds());

                map.put("name", e.getName());

                if (type != null && "3".equals(type)){

                    map.put("isParent", true);

                }

                mapList.add(map);

            }

        }

        return mapList;

    }

　　　　后台返回的是一个mapList ，此Demo中返回的数据如下：

[{id=, pId=, name=江西省党总部, pIds=,},

{id=, pId=, name=公司领导, pIds=,,},

{id=, pId=, name=综合部, pIds=,,},

{id=, pId=, name=市场部, pIds=,,},

{id=, pId=, name=技术部, pIds=,,},

{id=, pId=, name=研发部, pIds=,,},

{id=, pId=, name=济南市分公司, pIds=,,},

{id=, pId=, name=公司领导, pIds=,,,},

{id=, pId=, name=综合部, pIds=,,,},

{id=, pId=, name=市场部, pIds=,,,},

{id=, pId=, name=技术部, pIds=,,,},

{id=, pId=, name=历城区分公司, pIds=,,,},

{id=, pId=, name=公司领导, pIds=,,,,},

{id=, pId=, name=综合部, pIds=,,,,},

{id=, pId=, name=市场部, pIds=,,,,},

{id=, pId=, name=技术部, pIds=,,,,},

{id=, pId=, name=历下区分公司, pIds=,,,},

{id=, pId=, name=高新区分公司, pIds=,,,},

{id=, pId=, name=公司领导, pIds=,,,,},

{id=, pId=, name=公司领导, pIds=,,,,},

{id=, pId=, name=综合部, pIds=,,,,},

{id=, pId=, name=综合部, pIds=,,,,},

{id=, pId=, name=市场部, pIds=,,,,},

{id=, pId=, name=市场部, pIds=,,,,},

{id=, pId=, name=技术部, pIds=,,,,},

{id=, pId=, name=技术部, pIds=,,,,}]

　　　　前台通过Ajax请求接收：更多Ajax操作请参见API或之前随笔：http://www.cnblogs.com/jiangbei/p/6880157.html

<script type="text/javascript">

        var setting = {data:{simpleData:{enable:true,idKey:"id",pIdKey:"pId",rootPId:'0'}},

            callback:{onClick:function(event, treeId, treeNode){

                    var id = treeNode.pId == '0' ? '' :treeNode.pId;

                    $('#officeContent').attr("src","${ctx}/sys/office/list?id="+id+"&parentIds="+treeNode.pIds);

                }

            }

        };

        function refreshTree(){

            $.getJSON("${ctx}/sys/office/treeData",function(data){

                $.fn.zTree.init($("#ztree"), setting, data).expandAll(true);

            });

        }

        refreshTree();

　　　　这样，一棵树就显示出来了！

　　获取树的节点数据请参见回调函数：

　　实例参见：http://blog.csdn.net/u013008179/article/details/47680951

　　简单实例，待更新：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>ztree</title>

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

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

    <script type="text/javascript" src="js/jquery.ztree.all.js"></script>

</head>

<body>

    <input type="text" name="area" id="area" readonly="readonly">

    <a id="loadztree" href="#">点击加载</a>

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

    <script type="text/javascript">

          // zTree 的参数配置，深入使用请参考 API 文档（setting 配置详解）

           var setting = {

                callback: {

                onClick: zTreeOnClick

           }

               };

           // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）

           var zNodes = [

          {name:"test1111", open:true,"checked":"true", children:[

             {name:"test1_1","checked":"true"}, {name:"test1_2"}]},

          {name:"test2222", open:true, children:[

             {name:"test2_1"}, {name:"test2_2"}]}

          ];

          function zTreeOnClick(event, treeId, treeNode) {

                    alert(treeNode.name);

                    $("#area").val(treeNode.name);

                };

            $("#loadztree").click(function(){

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

                 $("#treeDemo").slideToggle();

             });

         $(function(){

             alert("页面加载完成！");

      });

    </script>

</body>

</html>

　　Jeetise实例：

<font size="5">Hello tree!</font>

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

        <script type="text/javascript">

        var setting = {data:{simpleData:{enable:true,idKey:"id",pIdKey:"pId",rootPId:'0'}},};

        function refreshTree(){

            $.getJSON("${ctx}/po/partyOrganization/treeData",function(data){

                $.fn.zTree.init($("#ztree"), setting, data);

            });

        }

            refreshTree();

JQuery树插件——ztree的更多相关文章

  1. zTree 优秀的jquery树插件

    zTree 优秀的jquery树插件,文档详细,渲染快 使用方法: 1.引用zTree的js和css文件 <link href="~/Content/zTree_v3/css/zTre ...

  2. zTree -- jQuery 树插件 使用方法与例子

    简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件". 网址:http://www.ztree.me/v3/main.php#_zTreeInfo 上面的网址里有z ...

  3. 顶级jQuery树插件

    顶级jQuery树插件 顶级jQuery树插件 2013-03-05 17:20 139人阅读 评论(0) 收藏 举报 jsTree JsTree是一个基于jQuery的Tree控件.支持HTML.J ...

  4. ASP.NET MVC jQuery 树插件在项目中使用方法（一）

    jsTree是一个 基于jQuery的Tree控件.支持XML,JSON,Html三种数据源.提供创建,重命名,移动,删除,拖"放节点操作.可以自己自定义创建,删 除,嵌套,重命名,选择节点 ...

  5. JQuery/JS插件 zTree树，点击当前节点展开，其他节点关闭

    好像没找到现成的,就自己写了一个demo. 效果如下: 代码: <!DOCTYPE html> <html> <head> <meta http-equiv= ...

  6. 主攻ASP.NET.4.5.1 MVC5.0之重生:在项目中使用zTree jQuery 树插件

    效果图和json格式 Controllers代码 using HR.Models; using HR.Models.Repository; /***************************** ...

  7. zTree -- jQuery 树插件

    http://www.ztree.me/v3/main.php#_zTreeInfo http://plugins.jquery.com/zTree.v3/ 例子:http://www.ztree.m ...

  8. zTree -- jQuery 树插件实现点击文字展开子节点

    新版本的zTree是单击+号展开子项,点击文字选中该项,双击文字展开子项 项目用的是3.5版本的,如果要点击文字展开子项暂时没查到资料,自己琢磨了下 项目用的是jquery.ztree.core-3. ...

  9. 树 插件 ztree 的基本用法

    因业务需要 用到 ztree 插件 第一次用tree插件上手有点难度 官网 http://www.treejs.cn/v3/main.php#_zTreeInfo 第一步:初始化树,树的所有数据从后台 ...

随机推荐

  1. Jquery 获取Checkbox值，prop 和 attr 函数区别

    总结: 版本 1.6 1.6 1.4 1.4 函数 勾选 取消勾选 勾选 取消勾选 attr('checked') checked undefined true false .prop('checke ...

  2. Google的Python代码格式化工具YAPF详解

    平时习惯了杂乱无章地编写代码,而最后的代码勘定,却依赖于PyCharm自带的格式化工具,以及其自带的提示功能来规范代码.而pycharm里的格式化工具,不支持对多文件进行代码批量格式化,曾经尝试些解决 ...

  3. Python条件判断if、for、while

    if条件判断 if 条件判断: 逻辑操作...... ...... 判断字符串是否为空 if a.strip(): #表示字符串不为空 pass 判断是否为字典 d = dict(a=1) if is ...

  4. Android Studio 动态调试 apk 反编译出的 smali 代码

    在信安大赛的准备过程中,主要通过 Android Studio 动态调试 apk 反编译出来的 smali 代码的方式来对我们分析的执行流程进行验证.该技巧的主要流程在此记录.以下过程使用 Andro ...

  5. SOJ 1017 Power of Cryptography 库函数精度

    Background Current work in cryptography involves (among other things) large prime numbers and comput ...

  6. 2018-2019-2 《网络对抗技术》Exp0 Kali安装 Week1 20165322

    Exp0 Kali安装 由于VMWare已经装好,镜像也是从上届拷下来的.下载部分就省略.. 新建虚拟机 安装好VM后点击新建虚拟机 选择稍后安装操作系统,系统选择Linux-ubuntu 接下来根据 ...

  7. 「NOIP2018 保卫王国」

    题目 强制选点我们可以把那个点权搞成\(-inf\),强制不选我们搞成\(inf\),之后就真的成为动态\(dp\)的板子题了 由于不想像板子那样再写一个最大独立集的方程,之后利用最小点覆盖=总点权- ...

  8. 笔试面试之C++

    7 类B是类A的公有派生类, 类A和类B中都定义了虚函数func(), p 是一个指向类A对象的指针,则p->A::func()将() A 调用类A中的函数 B 调用类B中的函数 C 根据p所指 ...

  9. D、CSL 的字符串 【栈+贪心】 （“新智认知”杯上海高校程序设计竞赛暨第十七届上海大学程序设计春季联赛）

    题目传送门:https://ac.nowcoder.com/acm/contest/551#question 题目描述 CSL 以前不会字符串算法,经过一年的训练,他还是不会……于是他打算向你求助. ...

  10. 容器适配器(一):queue

    除了标准的顺序容器外,STL还提供了3种容器适配器,queue,priority_queue和stack 适配器是对顺序容器的包装,它的作用是简化接口. queue接口十分的简单,只有8个方法.再加上 ...