菜板 — Thu, 19 Feb 2009 04:55:00 GMT

今天先讲下YUI的数据表��g��,从服务端获取数据和根据服务端数据排序的方�?官方�C�Z��的地址:http://developer.yahoo.com/yui/treeview/
首先是必备的js,css文�g的引�?可以从以下地址配置: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">YUIa>'},
    {type:'MenuNode',label:'branch 3',title:'this is a menu node', expanded:false, children:[
        'Label 3-0',
        'Label 3-1'
    ]}
]

当然,实际情况是你不一定返回一模一��L��格式,但可以根据自��q��l�构来生成这��L��格式!
下面是项目中用到的一个用来获取这�U�格式的�Ҏ��(�?我的�Ҏ��属于比较�W�的�Ҏ��,用的是递归循环)

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");  //一个递归的函�?用于生成�W�合YUI树标准的JSON对象
                    }
                }
            });
            return eval(str); //其实刚刚的STR那只是个字符�?最后通过eval�Ҏ��可以转成对象.
        }

数据准备好了,下一步就是构建树�?br />

//构徏树结�?/span>
        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事�g,但我更喜�ƢJQUERY�?写法比较��?呵呵

        $(document).ready(function(){
            var tree = YAHOO.uunav.buildTree("catalogTree");
        });

如果你的树只是想做菜�?�q�接之用,到这里就可以�?但如果希望能够在响应单击事�g的时候做出点其他动作,那还需要给tree注册事�g

tree.subscribe('clickEvent',function(oArgs) {
treeNodeClick(oArgs.node.data.id);
});

合�v来应该是下面�q�个样子

$(document).ready(function(){
            var tree = YAHOO.uunav.buildTree("catalogTree");

            //��d��l�点单击事�g
            tree.subscribe('clickEvent',function(oArgs) {
                treeNodeClick(oArgs.node.data.id);
            });
        });

对参数做下解�?
oArgs.node.data:表示的是�q�个�l�点带的数据,而这些数据就是在生成树的JSON对象里面�?事实�?默认的最��单的树结点�ƈ没有oArgs.node.data.id�q�个数据,�q�个数据是在生成树结点JSON对象时加�q�去�?见如下代�?

同样可以通过oArgs.node.data.label讉K��l�点名字,不过也可以直接通过oArgs.node.label直接讉K��label,至于什么原�?看了API��q��道了

看上去貌��D��是有些复�?大家只当是个参考吧!

菜板 2009-02-19 12:55 发表评论

菜板 — Sat, 07 Feb 2009 13:25:00 GMT

摘要: 今天先讲下YUI的数据表��g��,从服务端获取数据和根据服务端数据排序的方�?官方�C�Z��的地址:http://developer.yahoo.com/yui/examples/datatable/dt_dynamicdata.html 首先是必备的js,css文�g的引�?可以从以下地址配置:http://developer.yahoo.com/yui/articles/hosting/?datat... 阅读全文

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

日韩欧美三区,成人亚洲欧美,92久久精品