BlogJava-幻想天堂-文章分类-YUIhttp://www.blogjava.net/x03570227/category/37421.htmlzh-cnTue, 24 Feb 2009 20:45:47 GMTTue, 24 Feb 2009 20:45:47 GMT60YUI - treeView 通过JSON结构的数据构建数据表格http://www.blogjava.net/x03570227/articles/255444.html菜板菜板Thu, 19 Feb 2009 04:55:00 GMThttp://www.blogjava.net/x03570227/articles/255444.htmlhttp://www.blogjava.net/x03570227/comments/255444.htmlhttp://www.blogjava.net/x03570227/articles/255444.html#Feedback0http://www.blogjava.net/x03570227/comments/commentRss/255444.htmlhttp://www.blogjava.net/x03570227/services/trackbacks/255444.html今天先讲下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就知道了

看上去貌似还是有些复杂,大家只当是个参考吧!

菜板 2009-02-19 12:55 发表评论
]]>YUI-dataTable 服务端分页及动态排序http://www.blogjava.net/x03570227/articles/253734.html菜板菜板Sat, 07 Feb 2009 13:25:00 GMThttp://www.blogjava.net/x03570227/articles/253734.htmlhttp://www.blogjava.net/x03570227/comments/253734.htmlhttp://www.blogjava.net/x03570227/articles/253734.html#Feedback0http://www.blogjava.net/x03570227/comments/commentRss/253734.htmlhttp://www.blogjava.net/x03570227/services/trackbacks/253734.html阅读全文

菜板 2009-02-07 21:25 发表评论
]]>