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 };
不积跬步,无以至千里。