今天先講下YUI的數(shù)據(jù)表格中,從服務(wù)端獲取數(shù)據(jù)和根據(jù)服務(wù)端數(shù)據(jù)排序的方法.官方示例的地址:http://developer.yahoo.com/yui/treeview/
首先是必備的js,css文件的引入,可以從以下地址配置:http://developer.yahoo.com/yui/articles/hosting/?treeview#configure
JSON數(shù)據(jù)格式
[
'Label 0',
{type:'Text', label:'text label 1', title:'this is the tooltip for text label 1'},
{type:'Text', label:'branch 1', title:'there should be children here', expanded:true, children:[
'Label 1-0'
]},
{type:'Text',label:'YAHOO',title:'this should be an href', href:'http://www.yahoo.com', target:'somewhere new'},
{type:'HTML',html:'<a href="developer.yahoo.com/yui">YUI</a>'},
{type:'MenuNode',label:'branch 3',title:'this is a menu node', expanded:false, children:[
'Label 3-0',
'Label 3-1'
]}
]
當(dāng)然,實(shí)際情況是你不一定返回一模一樣的格式,但可以根據(jù)自己的結(jié)構(gòu)來生成這樣的格式!
下面是項(xiàng)目中用到的一個(gè)用來獲取這種格式的方法(注:我的方法屬于比較笨的方法,用的是遞歸循環(huán))
YAHOO.uunav.getCatalogTree = function(root){
var str;
$.ajax({
url:"${contextPath}/ajax/catalog!initTree.act", //從服務(wù)器獲取數(shù)據(jù)
dataType:"json",
async :false,
success:function(data){
if(typeof(data.records)!="undefined" ){
str=createNodes(data.records,"menu"); //一個(gè)遞歸的函數(shù),用于生成符合YUI樹標(biāo)準(zhǔn)的JSON對象
}
}
});
return eval(str); //其實(shí)剛剛的STR那只是個(gè)字符串,最后通過eval方法可以轉(zhuǎn)成對象.
}
數(shù)據(jù)準(zhǔn)備好了,下一步就是構(gòu)建樹了
//構(gòu)建樹結(jié)構(gòu)
YAHOO.uunav.buildTree=function(treeContent){
var treeNodes = YAHOO.uunav.getCatalogTree(0);
var tree=new YAHOO.widget.TreeView(treeContent,treeNodes);
tree.render();
return tree;
}
上面的只是個(gè)方法,需要在頁面load的時(shí)候加載,YUI有它自己的load事件,但我更喜歡JQUERY的,寫法比較簡單,呵呵
$(document).ready(function(){
var tree = YAHOO.uunav.buildTree("catalogTree");
});
如果你的樹只是想做菜單,連接之用,到這里就可以了,但如果希望能夠在響應(yīng)單擊事件的時(shí)候做出點(diǎn)其他動(dòng)作,那還需要給tree注冊事件
tree.subscribe('clickEvent',function(oArgs) {
treeNodeClick(oArgs.node.data.id);
});
合起來應(yīng)該是下面這個(gè)樣子
$(document).ready(function(){
var tree = YAHOO.uunav.buildTree("catalogTree");
//添加結(jié)點(diǎn)單擊事件
tree.subscribe('clickEvent',function(oArgs) {
treeNodeClick(oArgs.node.data.id);
});
});
對參數(shù)做下解釋:
oArgs.node.data:表示的是這個(gè)結(jié)點(diǎn)帶的數(shù)據(jù),而這些數(shù)據(jù)就是在生成樹的JSON對象里面的,事實(shí)上,默認(rèn)的最簡單的樹結(jié)點(diǎn)并沒有oArgs.node.data.id這個(gè)數(shù)據(jù),這個(gè)數(shù)據(jù)是在生成樹結(jié)點(diǎn)JSON對象時(shí)加進(jìn)去的,見如下代碼:
function createNodes(list,nodeType){ //這就是前面的遞歸生成結(jié)點(diǎn)JSON對象的函數(shù)
var treeNodeStr="[";
$(list).each(function(i){
if(i>0) treeNodeStr+=",";
treeNodeStr+="{\"label\":\""+this.names+"\",\"id\":"+this.id+","; //這里的id就是data對象里的id
if(this.children.length>0){
treeNodeStr+="\"children\":"+createNodes(this.children,nodeType)+",";
}
treeNodeStr+="\"type\":\""+nodeType+"\"}";
});
treeNodeStr+="]";
return treeNodeStr;
}
同樣可以通過oArgs.node.data.label訪問結(jié)點(diǎn)名字,不過也可以直接通過oArgs.node.label直接訪問label,至于什么原因,看了
API就知道了
看上去貌似還是有些復(fù)雜,大家只當(dāng)是個(gè)參考吧!