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. 【2017.10.13 ROS机器人操作系统】ROS系统常用术语及资源

    ROS机器人操作系统是一种后操作系统,提供了类似于软件开发中使用到的中间件的功能. ROS: Robot Operating System 机器人操作系统 Package: 功能包 Stack: 功能 ...

  2. Python 常用文件

    获取当前文件的路径: from os import path d = path.dirname(__file__) #返回当前文件所在的目录 # __file__ 为当前文件, 若果在ide中运行此行 ...

  3. angularJs的工具方法2

    一.angular.isArray     判断是否是数组 var a = []; console.log(angular.isArray(a)); //判断参数里面的是否是数组 二.angular. ...

  4. luogu P1272 重建道路

    嘟嘟嘟 这好像是一种树上背包. 我们令dp[i][j] 表示在 i 所在的子树中(包括节点 i)分离出一个大小为 j 的子树最少需割多少条边. 那么转移方程就是 dp[u][j] = min(dp[u ...

  5. C语言文件操作总结

    文件的打开操作 fopen 打开一个文件,操作文件指针FILE * 文件的关闭操作 fclose 关闭一个文件 文件的读写操作 fgetc 从文件中读取一个字符 fputc 写一个字符到文件中去 fg ...

  6. TensorFlow学习之 图像预处理

    import tensorflow as tf import matplotlib.pyplot as plt image_raw_data = tf.gfile.GFile("./pict ...

  7. 组合测试(Combinatorial Test)/配对测试 (pairwise)

    组合测试方法:配对测试实践 实施组合测试 常用的Pairwise工具集:http://www.pairwise.org/tools.asp 成对测试(Pairwise Testing)又称结对测试.两 ...

  8. PAT——1047. 编程团体赛

    编程团体赛的规则为:每个参赛队由若干队员组成:所有队员独立比赛:参赛队的成绩为所有队员的成绩和:成绩最高的队获胜. 现给定所有队员的比赛成绩,请你编写程序找出冠军队. 输入格式: 输入第一行给出一个正 ...

  9. 使用Fiddler监控来自手机客户端的请求

    环境配置组成: 1 手机 2 安装Fiddler的PC 设置要点: 1 手机和PC应在同一个局域网内 我的做法是:PC安装WIFI热点,手机连接热点上网 PC的IP是192.168.95.1  手机的 ...

  10. 错误的另一个常见原因是默认的安全组规则。default security group默认情况下不允许ICMP（ping命令使用的协议）

    可以在openstack horizon界面中添加ICMP和ssh(TCP)规则,也可以通过命令行.命令行方式给默认安全组添加规则的方法如下: $ nova secgroup-add-rule def ...