今天先讲下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就知道了
看上去貌似还是有些复杂,大家只当是个参考吧!