快捷導(dǎo)航

學(xué)習(xí)YUI.Ext 第六天--關(guān)于樹TreePanel(Part 2異步獲取節(jié)點(diǎn))

更新時(shí)間：2007年03月10日 00:00:00 作者：

下面將介紹如何異步取一棵樹的所有節(jié)點(diǎn)，具體做法與官方同步取節(jié)點(diǎn)有很大不同，尤其在json的id屬性上，下面是我一些摸索，可能不是最佳方案，有待大家一起研究。
異步取節(jié)點(diǎn)的思路是這樣的：
1、先定義一個(gè)初始化節(jié)點(diǎn)（也可以不定義，看個(gè)人需求）
2、yui-ext根據(jù)該節(jié)點(diǎn)id請(qǐng)求服務(wù)器，獲得子節(jié)點(diǎn)各屬性
3、循環(huán)
特點(diǎn)：可以在上一級(jí)目錄中，在服務(wù)器端預(yù)先將該節(jié)點(diǎn)是否有子節(jié)點(diǎn)讀好（json中的isLeaf屬性），雖然但數(shù)據(jù)庫(kù)將多承擔(dān)一些壓力，但用個(gè)count(*)不會(huì)造成太大負(fù)擔(dān)（除非查詢條件異常復(fù)雜），也可以不讀，即把所有isLeaf設(shè)置為false。
問(wèn)題：
1、目前還無(wú)法進(jìn)行reload，即每次打開節(jié)點(diǎn)都重新讀取一次
2、樣式還有些問(wèn)題，無(wú)法通過(guò)node. childNodes[i]設(shè)置子節(jié)點(diǎn)的style，所以無(wú)法改變最后一級(jí)元素的style（也許是通過(guò)別的途徑改變style的？）
示例：
先給出一段js代碼，可以結(jié)合官方的demo（http://yui-ext.com/playpen/yui-ext.0.40/examples/tree/reorder.html）看看：
//定義根id的變量

復(fù)制代碼代碼如下:

var rootId = 1;  
var TreeTest = function(){  
    // shorthand  
    var Tree = YAHOO.ext.tree;  

    return {  
        init : function(userName){  
            var tree = new Tree.TreePanel('detailTree', {  
                animate:true,   
                //這個(gè)dataUrl是初始化樹所用的url，你也可以不寫或定義一個(gè)靜態(tài)json文件，還可以什么都不寫全部依賴于第二個(gè)url自動(dòng)產(chǎn)生，視具體需求而定  
                loader: new Tree.TreeLoader({dataUrl:'calendarDetail.do?method=getDayDetailJSON&parentId='+rootId}),  
                enableDD:true,  
                containerScroll: true  
            });  

            // set the root node  
            var root = new Tree.AsyncTreeNode({  
                text: 'yui-ext',   
                draggable:false,   
                id:rootId  
            });  
            tree.setRootNode(root);  

            //根據(jù)當(dāng)前節(jié)點(diǎn)id，動(dòng)態(tài)拼出請(qǐng)求服務(wù)器的路徑  
            //每產(chǎn)生一個(gè)節(jié)點(diǎn)，指向一個(gè)事件的引用，將新建loader.dataUrl（具體事件的機(jī)制還需要再研究）  
            //注意調(diào)用函數(shù)是beforeload  
            tree.on('beforeload', function(node){   
                tree.loader.dataUrl = 'calendarDetail.do?method=getDayDetailJSON&parentId='+node.id;  
            });  

              
            //這里演示一個(gè)自定義json的用法(description為自定義json的key)  
            //以及如何定義某節(jié)點(diǎn)的style(node.ui.textNode.style.title)  
            //具體可以看ui這個(gè)類  
            tree.on('beforeexpand', function(node){   
                node.ui.textNode.style.title = ‘red';  
                alert(node.attributes.description);  
            });                                          

            // render the tree  
            tree.render();  

            // false for not recursive (the default), false to disable animation  
            root.expand();  
        }  
    };  
}(); 

同時(shí)再分析一個(gè)json：

復(fù)制代碼代碼如下:

[{"text":"衣服類",    
"id":"5",     //注意：這里是該節(jié)點(diǎn)的id，拼連接時(shí)要用到，與官方的json有所不同   
"leaf":true,  
"cls":"file",  
"description":"這里是衣服類"}]   //自定義只需要這樣就可以了   
給出java產(chǎn)生json的代碼邏輯片斷：   
……  
//list為由傳入的id所求的category集合  
List list=   
findBy("parentId", new Long(parentId.toString()));  
StringBuffer JSONStr = new StringBuffer();  //聲明json  
JSONStr.append("[");  

for(CostCategory i : list){    
    boolean isLeaf = isLeaf(i.getId());  //isLeaf()為判斷是否有以該id為parentId的節(jié)點(diǎn)，具體沒(méi)有給出  
    String icon = isLeaf?"file":"folder";  
    String description = i.getCategoryDescription()==null?"":i.getCategoryDescription();  
    //{"text":"treedata.jsp","id":"treedata.jsp","leaf":true,"cls":"file"},  
    JSONStr.append("{\"text\":\""+  
            i.getCategoryName()+"\",\"id\":\""+  
            i.getId()+"\",\"leaf\":"+  
            isLeaf+",\"cls\":\""+  
            icon+"\",\"description\":\""+  
            description+"\"},");  
}  
JSONStr.deleteCharAt(JSONStr.lastIndexOf(","));  
JSONStr.append("]");  
System.out.println(JSONStr);  
out.print(JSONStr);   //輸出json  
…… 