wdtree简介、使用

      我接触过好多jquery插件的tree,比如dwz的tree,ztree,dtree,以及今天我要介绍的wdtree。dwz的tree，我就不多说了，不推荐使用。dtree要是仅作为显示的关系树来说还是不错的。ztree功能很强大，极力推荐。今天的wdTree类似ztree的一个子功能，如果仅是做权限树类似的树状结构的话，我觉得wdtree是一个极好的选择。

　　首先介绍一下wdTree，以下内容摘自官网(http://www.web-delicious.com/jquery-plugins/)

　　wdTree is lightweight jQuery plugin for present tree with nested check boxes. Features highlighted:

• parents/children checking
• lazy load from database
• configurable node attributes

总结：wdTree是一个轻量级jQuery插件用于展示带有复选框的树形控件。支持从数据库懒加载节点，可以配置节点属性。

 1.简介（官方文档API）

Config

cascadecheck	cbiconpath	clicktoggle	data
showcheck	theme	url

cascadecheck

Boolean   Whether node being seleted leads to parent/sub node being selected.

cbiconpath

String   Checkbox image path.

clicktoggle

String   Whether to toggle node when node clicked.

data

Object   Tree theme. Three themes provided. 'bbit-tree-lines' ,'bbit-tree-no-lines' and 'bbit-tree-arrows'.

 1 data:[{
 2     id:"node1", //node id
 3     text:"node 1", //node text for display.
 4     value:"1", //node value
 5     showcheck:false, //whether to show checkbox
 6     checkstate:0, //Checkbox checking state. 0 for unchecked, 1 for partial checked, 2 for checked.
 7     hasChildren:true, //If hasChildren and complete set to true, and ChildNodes is empty, tree will request server to get sub node.
 8      isexpand:false, //Expand or collapse.
 9     complete:false, //See hasChildren.
10      ChildNodes:[] // child nodes
11 }]

 

showcheck

Boolean   Whether to show check box or not.

theme

String   Tree theme. Three themes provided. 'bbit-tree-lines' ,'bbit-tree-no-lines' and 'bbit-tree-arrows'.

url

String   Url for child nodes retrieving.

Events

oncheckboxclick

onnodeclick

oncheckboxclick(  tree,  item,  status)

Fired when check box is clicked on.

Object	tree	This tree object.
Object	item	Node item clicked on.
Number	status	1 for checked, 0 for unchecked.

onnodeclick(  tree,  item)

Fired when a node is clicked on.

Object	tree	This tree object.
Object	item	Ndde item clicked on.

 

 官方文档还是比较简洁的，我的语言组织能力有限，感觉还是英文的文档看着容易理解一点（翻译成中文太别扭了）。

2.demo

 需求操作：显示权限树，并做到级联勾选操作，cascadecheck属性貌似不好用，在仔细看了源码之后，发现.getTSNs(true)这个方法可以实现该需求。

源码：

jquery.tree.js

 

 1  function getck(items, c, fn) {
 2             for (var i = 0, l = items.length; i < l; i++) {
 3                 (items[i].showcheck == true && items[i].checkstate == 1) && c.push(fn(items[i]));
 4                 if (items[i].ChildNodes != null && items[i].ChildNodes.length > 0) {
 5                     getck(items[i].ChildNodes, c, fn);
 6                 }
 7             }
 8         }
 9         function getCkAndHalfCk(items, c, fn) {//获取半勾选和全勾选状态的节点
10             for (var i = 0, l = items.length; i < l; i++) {
11                 (items[i].showcheck == true && (items[i].checkstate == 1 || items[i].checkstate == 2)) && c.push(fn(items[i]));
12                 if (items[i].ChildNodes != null && items[i].ChildNodes.length > 0) {
13                     getCkAndHalfCk(items[i].ChildNodes, c, fn);
14                 }
15             }
16         }
17         me[0].t = {
18             getSelectedNodes: function(gethalfchecknode) {
19                 var s = [];
20                 if (gethalfchecknode) {
21                     getCkAndHalfCk(treenodes, s, function(item) { return item; });
22                 }
23                 else {
24                     getck(treenodes, s, function(item) { return item; });
25                 }
26                 return s;
27             },
28             getSelectedValues: function() {
29                 var s = [];
30                 getck(treenodes, s, function(item) { return item.value; });
31                 return s;
32             },
33             getCurrentItem: function() {
34                 return dfop.citem;
35             },
36             reflash: function(itemOrItemId) {
37                 var id;
38                 if (typeof (itemOrItemId) == "string") {
39                     id = itemOrItemId;
40                 }
41                 else {
42                     id = itemOrItemId.id;
43                 }
44                 reflash(id);
45             }
46         };
47         return me;
48     };
49     //get all checked nodes, and put them into array. no hierarchy
50     $.fn.getCheckedNodes = function() {
51         if (this[0].t) {
52             return this[0].t.getSelectedValues();
53         }
54         return null;
55     };
56     $.fn.getTSNs = function(gethalfchecknode) {
57         if (this[0].t) {
58             return this[0].t.getSelectedNodes(gethalfchecknode);
59         }
60         return null;
61     };
62     $.fn.getCurrentNode = function() {
63         if (this[0].t) {
64             return this[0].t.getCurrentItem();
65         }
66         return null;
67     };
68     $.fn.reflash = function(ItemOrItemId) {
69         if (this[0].t) {
70             return this[0].t.reflash(ItemOrItemId);
71         }
72     };

 ·····我这下面的例子简单的使用了一下这个wdtree，感觉还可以。

  1 <%@page import="cn.gx.ddyzc.domain.GxddyzcFunctionBase"%>
  2 <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
  3 <%@ include file="/WEB-INF/tagLibInclude.inc.jsp"%>
  4 <%
  5     List<GxddyzcFunctionBase> functionList = (List<GxddyzcFunctionBase>)request.getAttribute("functionList"); 
  6 Map<String,String> functionIdMap = (Map<String,String>)request.getAttribute("functionIdMap");
  7 %>
  8 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
  9 <html>
 10 <head>
 11 <link href="wdTree/wdTree/css/tree.css" rel="stylesheet" type="text/css" />
 12 <link href="wdTree/wdTree/sample-css/page.css" rel="stylesheet"
 13     type="text/css" />
 14 <script src="wdTree/wdTree/src/Plugins/jquery.tree.js"
 15     type="text/javascript"></script>
 16 </head>
 17 
 18 <script type="text/javascript">
 19 function createNode(){
 20     var root = {
 21             "id" : "###",
 22             "text" : "root",
 23             "value" : "root",
 24             "showcheck" : true,
 25             complete : true,
 26             "isexpand" : true,
 27             "checkstate" : <%=functionIdMap.size()==0 ? '0':functionIdMap.size()==functionList.size()?'1':'2'%>,
 28             "hasChildren" : true
 29           };
 30     var arr = [];
 31     <%for(int i = 0 ;i < functionList.size();i ++){%>
 32     var subarr = [];
 33     <%if(functionList.get(i).getFunctionType().equals("2")){
 34         for(int j = 0 ;j< functionList.size();j ++){
 35             if(functionList.get(j).getParentFunctionId().equals(functionList.get(i).getFunctionId())){//三级菜单
 36                 subarr.push( {
 37                 "id" : "<%=functionList.get(j).getFunctionId()%>",
 38                 "text" : "<%=functionList.get(j).getFunctionName()%>",
 39                 "value" : "<%=functionList.get(j).getFunctionId()%>",
 40                 "showcheck" : true,
 41                 complete : true,
 42                 "isexpand" : false,
 43                 "checkstate" : <%=functionIdMap.get(functionList.get(j).getFunctionId())== null ? '0' :'1'%>,
 44                 "hasChildren" : false
 45                 });
 46           <%}}%>
 47             arr.push( {
 48                 "id" : "<%=functionList.get(i).getFunctionId()%>",
 49                 "text" : "<%=functionList.get(i).getFunctionName()%>",
 50                 "value" : "<%=functionList.get(i).getFunctionId()%>",
 51                 "showcheck" : true,
 52                 complete : true,
 53                 "isexpand" : true,
 54                 "checkstate" : <%=functionIdMap.get(functionList.get(i).getFunctionId())== null ? '0' :'1'%>,
 55                 "hasChildren" : true,
 56                 "ChildNodes" : subarr
 57             });
 58         <%}}%>
 59          root["ChildNodes"] = arr;
 60      return root; 
 61 }
 62         var userAgent = window.navigator.userAgent.toLowerCase();
 63         $.browser.msie8 = $.browser.msie && /msie 8\.0/i.test(userAgent);
 64         $.browser.msie7 = $.browser.msie && /msie 7\.0/i.test(userAgent);
 65         $.browser.msie6 = !$.browser.msie8 && !$.browser.msie7 && $.browser.msie && /msie 6\.0/i.test(userAgent);
 66         function load() {         
 67             var treedata = [createNode()];
 68             var o = { showcheck: true
 69             //onnodeclick:function(item){alert(item.text);},        
 70             };
 71             o.data = treedata;                  
 72             $("#tree").treeview(o);            
 73         }   
 74         if( $.browser.msie6){  
 75             load();
 76         }
 77         else{  
 78             $(document).ready(load);
 79         }
 80         
 81         function modifyPermissions(){
 82             var idStr = "";
 83             var nodes =  $("#tree").getTSNs(true);//获取所有的勾选节点，包括半勾选
 84             $.each(nodes, function(i,value){      
 85                 var id = value.id;
 86                 if(id!='###'){
 87                     idStr += i ==1 ? id : "," + id;
 88                 }
 89             });
 90             $("#perId").val(idStr);
 91             $("#permissionForm").submit();
 92         }
 93     </script>
 94 <body>
 95 
 96     <form id="permissionForm" action="menu.do?method=modifyMenu"
 97         method="post"
 98         οnsubmit="return validateCallback(this, dialogAjaxDone);">
 99         <input name="rel" value="${rel }" type="hidden" /> <input
100             name="roleId" value="${roleId }" type="hidden" /> <input
101             name="perId" id='perId' type="hidden" />
102     </form>
103     <div>
104         <div class="tabsContent"
105             style="background-color: #fff;padding-left:18%;" layoutH="50">
106             <div
107                 style=" width: 450px; height: 450px; overflow: auto; border: #ededed 1px solid;">
108                 <div id="tree"></div>
109             </div>
110             
111         </div>
112         <div class="formBar" style="border-width: 1px;">
113                 <ul>
114                     <li>
115                         <div class="buttonActive">
116                             <div class="buttonContent">
117                                 <button type="button" οnclick="modifyPermissions();">确定</button>
118                             </div>
119                         </div></li>
120                     <li>
121                         <div class="button">
122                             <div class="buttonContent">
123                                 <button type="button" class="close">取消</button>
124                             </div>
125                         </div></li>
126                 </ul>
127             </div>
128     </div>
129 </body>
130 </html>

这个树是很久以前用的了，这次给整理下来留着以后复习~~，下次有时间把ztree那个demo整理下来。晚安