zTreeV3.4基础

 

zTree简述

1.基于 jQuery的树插件；

2.开源，官网地址：http://www.ztree.me/

3.v3.x比之前版本更加规范统一，也有很多不同；

   v3.0 将核心代码按照功能进行了分割，不需要的代码可以不用加载

   v2.6是2.x的最后一个版本

 

正文

　　包括五部分：JS引用、初始化、异步加载、选中效果、复选框。

• JS引用

1 <link rel="stylesheet" href="./css/demo.css" type="text/css" />
2 <link rel="stylesheet" href="./css/zTreeStyle/zTreeStyle.css" type="text/css" />
3 <script src="./js/jquery-1.4.4.min.js" type="text/javascript"></script>
4 <script src="./js/jquery.ztree.all-3.4.min.js" type="text/javascript"></script>
5 <script src="./ztree.js" type="text/javascript"></script>

<div>
  <ul id="treeDemo" class="ztree ztree-custom" style="width:500px"></ul>
 </div>

　　　　zTree v3.4下载地址：http://jquerytree.googlecode.com/files/JQuery%20zTree%20v3.4.zip

　　　　zTree v3.4 api: http://www.ztree.me/v3/api.php

• 初始化

　　　　根据dataType分为两种：SimpleData[Array(json)]和非SimpleData[json][默认]。

　　　　方式1：

 1 var setting = {
 2     data: {
 3         simpleData: {
 4             enable: true,
 5             idKey: 'id', // 默认
 6             pIdKey: 'pId', // 默认
 7             rootPId: '0' // 默认
 8         }
 9 };
10 
11 var zNodes =[
12     { id:1, pId:0, name:"主菜单 1", open:true},
13     { id:11, pId:1, name:"子菜单 1-1", open:true}, // 初始化状态为展开
14     { id:111, pId:11, name:"叶子节点 1-1-1"},
15     { id:112, pId:11, name:"叶子节点 1-1-2"},
16     { id:113, pId:11, name:"叶子节点 1-1-3"},
17     { id:114, pId:11, name:"叶子节点 1-1-4"},
18     { id:12, pId:1, name:"子菜单 1-2"},
19     { id:121, pId:12, name:"叶子节点 1-2-1"}
20 ];
21 
22 $.fn.zTree.init($("#treeDemo"), setting, zNodes);

 

　　　　方式2：

 1 var setting = {
 2 };
 3 
 4 var zNodes = [
 5         {"name":"网站导航", open:true, children: [
 6            { "name":"google", isParent:true},
 7            { "name":"baidu", isParent:true},
 8            { "name":"sina"}
 9 ];
10 
11 $.fn.zTree.init($("#treeDemo"), setting, zNodes);

 

•  异步加载

　　　　根据前后台交互的数据类型分为两种：text和json

　　　　方式1：

 1 var setting = {
 2     async : {
 3         enable : true,
 4         url : "./ZTreeServlet",
 5         autoParam : [ "id" ],
 6         dataType : "text", // 默认
 7         type : "post" // 默认
 8     },
 9     callback: {
10         onAsyncSuccess: function(event, treeId, treeNode, msg) {
11             if(treeNode){　　　　　　　　　　　　　　　　}
12         },
13         onAsyncError: function(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {        }
14     }
15 };

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

 1 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 2         
 3         String id = request.getParameter("id");
 4         if(id == null){
 5             id = "0";
 6         }
 7         String     ret = "[";
 8                     ret += "{id:"+id+"1,pId:"+id+",name:\"menu-"+id+"1\",isParent:true},";
 9                     ret += "{id:"+id+"2,pId:"+id+",name:\"menu-"+id+"2\",isParent:false}";
10                 ret += "]";
11         System.out.println(ret);
12         Writer out = response.getWriter();
13         out.write(ret);
14         out.close();
15     }

　　　　方式2：

 1 var setting = {
 2     async : {
 3         enable : true,
 4         url : "./ZTreeServlet",
 5         autoParam : [ "level" ],
 6         dataType : "json",
 7         type : "get"
 8     },
 9     callback: {
10         onAsyncSuccess: function(event, treeId, treeNode, msg) {
11             if(treeNode){     
12             }
13         },
14         onAsyncError: function(event, treeId, treeNode, XMLHttpRequest, textStatus, errorThrown) {
15         }
16     }
17 };

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

 1 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
 2                 
 3         String id = request.getParameter("id");
 4         if(id == null){
 5             id = "0";
 6         }
 7         String     ret = "[";
 8                     ret += "{id:"+id+"1,pId:"+id+",name:\"menu-"+id+"1\",isParent:true},";
 9                     ret += "{id:"+id+"2,pId:"+id+",name:\"menu-"+id+"2\",isParent:false}";
10                 ret += "]";
11         System.out.println(ret);
12         Writer out = response.getWriter();
13         out.write(ret);
14         out.close();
15     }

 

　　　　注意：

　　　　　　SimpleData使用id和fId作为关键字，要求数据源中id和fId符合上下对应关系并且对于id冲突敏感；

　　　　　　而非SimpleData中id和fId未使用到，使用treeNode.id/fId返回undefined。

• 选中效果

　　　　zTree可以指定选中一个或是多个：

1 var setting = {
2     view: {
3         selectedMulti: true, // true为选中多个，false为选择一个
4     }
5 };

 

　　　　选中事件：

 1 var setting = {
 2         callback: {
 3             beforeClick: function(){
 4                 return false;
 5             },
 6             onClick: function(event, treeId, treeNode, clickFlag){
 7                 // treeNode 选中节点
 8                 // clickFlag 选中状态
 9             }
10         }
11 };

 

　　　　获取选中节点：

　 　　 设置节点选中状态：

var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
treeObj.getSelectedNodes(); // 返回值类型 Array(json)

treeObj.selectNode(treeNode);

 

• 复选框

　　　　显示复选框：

1 var setting = {
2     check: {
3         enable: true,
4         chkStyle : "checkbox",
5         chkboxType : {"Y":"s","N":"s"}
6     }
7 };

 

　　　　选中事件：

1 var setting = {
2     callback: {
3         beforeCheck: function(treeId, treeNode, clickFlag){
4             return true; // 如果返回 false，zTree 将不会选中节点，也无法触发 onClick 事件回调函数
5         },
6         onCheck:function(event, treeId, treeNode) {
7         }
8     }
9 };

　　　　获取选中节点：

　　　　设置选中状态：

1 var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
2 
3 treeObj.getCheckedNodes(true); // 获取全部选中节点
4 
5 treeObj.checkNode(treeNode, true, false); // 设置选中

 

 　　　　其他：

　　　　点击节点时，将点击状态赋到复选框，方法是定义节点的beforeSelect事件，如下：

 1 var setting = {
 2     check: {
 3         enable: true,
 4         chkStyle : "checkbox",
 5         chkboxType : {"Y":"s","N":"s"}
 6     },
 7     callback: {
 8         beforeClick: function(treeId, treeNode, clickFlag){
 9             treeObj.checkNode(treeNode, !treeNode.checked, false);
10             return false;
11         }
12     }
13 };

 

　　　　不积跬步，无以至千里。

 

 

转载于:https://www.cnblogs.com/sudb/archive/2012/10/15/2724145.html