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'.

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

 

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

 

 function getck(items, c, fn) {
            for (var i = 0, l = items.length; i < l; i++) {
                (items[i].showcheck == true && items[i].checkstate == 1) && c.push(fn(items[i]));
                if (items[i].ChildNodes != null && items[i].ChildNodes.length > 0) {
                    getck(items[i].ChildNodes, c, fn);
                }
            }
        }
        function getCkAndHalfCk(items, c, fn) {//獲取半勾選和全勾選狀態的節點
            for (var i = 0, l = items.length; i < l; i++) {
                (items[i].showcheck == true && (items[i].checkstate == 1 || items[i].checkstate == 2)) && c.push(fn(items[i]));
                if (items[i].ChildNodes != null && items[i].ChildNodes.length > 0) {
                    getCkAndHalfCk(items[i].ChildNodes, c, fn);
                }
            }
        }
        me[0].t = {
            getSelectedNodes: function(gethalfchecknode) {
                var s = [];
                if (gethalfchecknode) {
                    getCkAndHalfCk(treenodes, s, function(item) { return item; });
                }
                else {
                    getck(treenodes, s, function(item) { return item; });
                }
                return s;
            },
            getSelectedValues: function() {
                var s = [];
                getck(treenodes, s, function(item) { return item.value; });
                return s;
            },
            getCurrentItem: function() {
                return dfop.citem;
            },
            reflash: function(itemOrItemId) {
                var id;
                if (typeof (itemOrItemId) == "string") {
                    id = itemOrItemId;
                }
                else {
                    id = itemOrItemId.id;
                }
                reflash(id);
            }
        };
        return me;
    };
    //get all checked nodes, and put them into array. no hierarchy
    $.fn.getCheckedNodes = function() {
        if (this[0].t) {
            return this[0].t.getSelectedValues();
        }
        return null;
    };
    $.fn.getTSNs = function(gethalfchecknode) {
        if (this[0].t) {
            return this[0].t.getSelectedNodes(gethalfchecknode);
        }
        return null;
    };
    $.fn.getCurrentNode = function() {
        if (this[0].t) {
            return this[0].t.getCurrentItem();
        }
        return null;
    };
    $.fn.reflash = function(ItemOrItemId) {
        if (this[0].t) {
            return this[0].t.reflash(ItemOrItemId);
        }
    };

 ·····我這下面的例子簡單的使用了一下這個wdtree，感覺還可以。

<%@page import="cn.gx.ddyzc.domain.GxddyzcFunctionBase"%>
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ include file="/WEB-INF/tagLibInclude.inc.jsp"%>
<%
    List<GxddyzcFunctionBase> functionList = (List<GxddyzcFunctionBase>)request.getAttribute("functionList"); 
Map<String,String> functionIdMap = (Map<String,String>)request.getAttribute("functionIdMap");
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link href="wdTree/wdTree/css/tree.css" rel="stylesheet" type="text/css" />
<link href="wdTree/wdTree/sample-css/page.css" rel="stylesheet"
    type="text/css" />
<script src="wdTree/wdTree/src/Plugins/jquery.tree.js"
    type="text/javascript"></script>
</head>

<script type="text/javascript">
function createNode(){
    var root = {
            "id" : "###",
            "text" : "root",
            "value" : "root",
            "showcheck" : true,
            complete : true,
            "isexpand" : true,
            "checkstate" : <%=functionIdMap.size()==0 ? '0':functionIdMap.size()==functionList.size()?'1':'2'%>,
            "hasChildren" : true
          };
    var arr = [];
    <%for(int i = 0 ;i < functionList.size();i ++){%>
    var subarr = [];
    <%if(functionList.get(i).getFunctionType().equals("2")){
        for(int j = 0 ;j< functionList.size();j ++){
            if(functionList.get(j).getParentFunctionId().equals(functionList.get(i).getFunctionId())){//三級菜單
                subarr.push( {
                "id" : "<%=functionList.get(j).getFunctionId()%>",
                "text" : "<%=functionList.get(j).getFunctionName()%>",
                "value" : "<%=functionList.get(j).getFunctionId()%>",
                "showcheck" : true,
                complete : true,
                "isexpand" : false,
                "checkstate" : <%=functionIdMap.get(functionList.get(j).getFunctionId())== null ? '0' :'1'%>,
                "hasChildren" : false
                });
          <%}}%>
            arr.push( {
                "id" : "<%=functionList.get(i).getFunctionId()%>",
                "text" : "<%=functionList.get(i).getFunctionName()%>",
                "value" : "<%=functionList.get(i).getFunctionId()%>",
                "showcheck" : true,
                complete : true,
                "isexpand" : true,
                "checkstate" : <%=functionIdMap.get(functionList.get(i).getFunctionId())== null ? '0' :'1'%>,
                "hasChildren" : true,
                "ChildNodes" : subarr
            });
        <%}}%>
         root["ChildNodes"] = arr;
     return root; 
}
        var userAgent = window.navigator.userAgent.toLowerCase();
        $.browser.msie8 = $.browser.msie && /msie 8\.0/i.test(userAgent);
        $.browser.msie7 = $.browser.msie && /msie 7\.0/i.test(userAgent);
        $.browser.msie6 = !$.browser.msie8 && !$.browser.msie7 && $.browser.msie && /msie 6\.0/i.test(userAgent);
        function load() {         
            var treedata = [createNode()];
            var o = { showcheck: true
            //onnodeclick:function(item){alert(item.text);},        
            };
            o.data = treedata;                  
            $("#tree").treeview(o);            
        }   
        if( $.browser.msie6){  
            load();
        }
        else{  
            $(document).ready(load);
        }
        
        function modifyPermissions(){
            var idStr = "";
            var nodes =  $("#tree").getTSNs(true);//獲取所有的勾選節點，包括半勾選
            $.each(nodes, function(i,value){      
                var id = value.id;
                if(id!='###'){
                    idStr += i ==1 ? id : "," + id;
                }
            });
            $("#perId").val(idStr);
            $("#permissionForm").submit();
        }
    </script>
<body>

    <form id="permissionForm" action="menu.do?method=modifyMenu"
        method="post"
        onsubmit="return validateCallback(this, dialogAjaxDone);">
        <input name="rel" value="${rel }" type="hidden" /> <input
            name="roleId" value="${roleId }" type="hidden" /> <input
            name="perId" id='perId' type="hidden" />
    </form>
    <div>
        <div class="tabsContent"
            style="background-color: #fff;padding-left:18%;" layoutH="50">
            <div
                style=" width: 450px; height: 450px; overflow: auto; border: #ededed 1px solid;">
                <div id="tree"></div>
            </div>
            
        </div>
        <div class="formBar" style="border-width: 1px;">
                <ul>
                    <li>
                        <div class="buttonActive">
                            <div class="buttonContent">
                                <button type="button" onclick="modifyPermissions();">確定</button>
                            </div>
                        </div></li>
                    <li>
                        <div class="button">
                            <div class="buttonContent">
                                <button type="button" class="close">取消</button>
                            </div>
                        </div></li>
                </ul>
            </div>
    </div>
</body>
</html>

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

2014-01-06 22:46:03