今天先講下YUI的數據表格中,從服務端獲取數據和根據服務端數據排序的方法.官方示例的地址:http://developer.yahoo.com/yui/treeview/
首先是必備的js,css文件的引入,可以從以下地址配置:http://developer.yahoo.com/yui/articles/hosting/?treeview#configure
JSON數據格式
[
'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'
]}
]
當然,實際情況是你不一定返回一模一樣的格式,但可以根據自己的結構來生成這樣的格式!
下面是項目中用到的一個用來獲取這種格式的方法(注:我的方法屬于比較笨的方法,用的是遞歸循環)
YAHOO.uunav.getCatalogTree = function(root){
var str;
$.ajax({
url:"${contextPath}/ajax/catalog!initTree.act", //從服務器獲取數據
dataType:"json",
async :false,
success:function(data){
if(typeof(data.records)!="undefined" ){
str=createNodes(data.records,"menu"); //一個遞歸的函數,用于生成符合YUI樹標準的JSON對象
}
}
});
return eval(str); //其實剛剛的STR那只是個字符串,最后通過eval方法可以轉成對象.
}
數據準備好了,下一步就是構建樹了
//構建樹結構
YAHOO.uunav.buildTree=function(treeContent){
var treeNodes = YAHOO.uunav.getCatalogTree(0);
var tree=new YAHOO.widget.TreeView(treeContent,treeNodes);
tree.render();
return tree;
}
上面的只是個方法,需要在頁面load的時候加載,YUI有它自己的load事件,但我更喜歡JQUERY的,寫法比較簡單,呵呵
$(document).ready(function(){
var tree = YAHOO.uunav.buildTree("catalogTree");
});
如果你的樹只是想做菜單,連接之用,到這里就可以了,但如果希望能夠在響應單擊事件的時候做出點其他動作,那還需要給tree注冊事件
tree.subscribe('clickEvent',function(oArgs) {
treeNodeClick(oArgs.node.data.id);
});
合起來應該是下面這個樣子
$(document).ready(function(){
var tree = YAHOO.uunav.buildTree("catalogTree");
//添加結點單擊事件
tree.subscribe('clickEvent',function(oArgs) {
treeNodeClick(oArgs.node.data.id);
});
});
對參數做下解釋:
oArgs.node.data:表示的是這個結點帶的數據,而這些數據就是在生成樹的JSON對象里面的,事實上,默認的最簡單的樹結點并沒有oArgs.node.data.id這個數據,這個數據是在生成樹結點JSON對象時加進去的,見如下代碼:
function createNodes(list,nodeType){ //這就是前面的遞歸生成結點JSON對象的函數
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訪問結點名字,不過也可以直接通過oArgs.node.label直接訪問label,至于什么原因,看了
API就知道了
看上去貌似還是有些復雜,大家只當是個參考吧!