我接触过好多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整理下来。晚安
2014-01-06 22:46:03