|
|
異步取節(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
……
JavaScript技術(shù)：學(xué)習(xí)YUI.Ext 第六天--關(guān)于樹TreePanel(Part 2異步獲取節(jié)點(diǎn))，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
