我接觸過好多jquery插件的tree,比如dwz的tree,ztree,dtree,以及今天我要介紹的wdtree。dwz的tree，我就不多說了，不推薦使用。dtree要是僅作為顯示的關(guān)系樹來說還是不錯的。ztree功能很強大，極力推薦。今天的wdTree類似ztree的一個子功能，如果僅是做權(quán)限樹類似的樹狀結(jié)構(gòu)的話，我覺得wdtree是一個極好的選擇。

　　首先介紹一下wdTree，以下內(nèi)容摘自官網(wǎng)(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

總結(jié)：wdTree是一個輕量級jQuery插件用于展示帶有復(fù)選框的樹形控件。支持從數(shù)據(jù)庫懶加載節(jié)點，可以配置節(jié)點屬性。

?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

?需求操作：顯示權(quán)限樹，并做到級聯(lián)勾選操作，cascadecheck屬性貌似不好用，在仔細看了源碼之后，發(fā)現(xiàn).getTSNs(true)這個方法可以實現(xiàn)該需求。

源碼：

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) {//獲取半勾選和全勾選狀態(tài)的節(jié)點 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);//獲取所有的勾選節(jié)點，包括半勾選 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>

這個樹是很久以前用的了，這次給整理下來留著以后復(fù)習(xí)~~，下次有時間把ztree那個demo整理下來。晚安

2014-01-06?22:46:03

轉(zhuǎn)載于:https://www.cnblogs.com/lucky2u/p/3504312.html

總結(jié)

以上是生活随笔為你收集整理的wdtree简介、使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。