发布于 2016-12-09 11:34:39 | 107 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的精品教程，程序狗速度看过来！

YUI JavaScript框架

Yahoo! UI Library (YUI) 是一个开放原始码的 JavaScript函数库，为了能建立一个高互动的网页，它采用了AJAX，DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。使用授权为 BSD许可证。

---

下面将介绍如何异步取一棵树的所有节点，具体做法与官方同步取节点有很大不同，尤其在json的id属性上，下面是我一些摸索，可能不是最佳方案，有待大家一起研究。
异步取节点的思路是这样的：
1、先定义一个初始化节点（也可以不定义，看个人需求）
2、yui-ext根据该节点id请求服务器，获得子节点各属性
3、循环
特点：可以在上一级目录中，在服务器端预先将该节点是否有子节点读好（json中的isLeaf属性），虽然但数据库将多承担一些压力，但用个count(*)不会造成太大负担（除非查询条件异常复杂），也可以不读，即把所有isLeaf设置为false。
问题：
1、目前还无法进行reload，即每次打开节点都重新读取一次
2、样式还有些问题，无法通过node. childNodes[i]设置子节点的style，所以无法改变最后一级元素的style（也许是通过别的途径改变style的？）
示例：
先给出一段js代码，可以结合官方的demo（http://yui-ext.com/playpen/yui-ext.0.40/examples/tree/reorder.html）看看：
//定义根id的变量

var rootId = 1;  
var TreeTest = function(){  
    // shorthand  
    var Tree = YAHOO.ext.tree;  

    return {  
        init : function(userName){  
            var tree = new Tree.TreePanel('detailTree', {  
                animate:true,   
                //这个dataUrl是初始化树所用的url，你也可以不写或定义一个静态json文件，还可以什么都不写全部依赖于第二个url自动产生，视具体需求而定  
                loader: new Tree.TreeLoader({dataUrl:'calendarDetail.do?method=getDayDetailJSON&parentId='+rootId}),  
                enableDD:true,  
                containerScroll: true  
            });  

            // set the root node  
            var root = new Tree.AsyncTreeNode({  
                text: 'yui-ext',   
                draggable:false,   
                id:rootId  
            });  
            tree.setRootNode(root);  

            //根据当前节点id，动态拼出请求服务器的路径  
            //每产生一个节点，指向一个事件的引用，将新建loader.dataUrl（具体事件的机制还需要再研究）  
            //注意调用函数是beforeload  
            tree.on('beforeload', function(node){   
                tree.loader.dataUrl = 'calendarDetail.do?method=getDayDetailJSON&parentId='+node.id;  
            });  

              
            //这里演示一个自定义json的用法(description为自定义json的key)  
            //以及如何定义某节点的style(node.ui.textNode.style.title)  
            //具体可以看ui这个类  
            tree.on('beforeexpand', function(node){   
                node.ui.textNode.style.title = ‘red';  
                alert(node.attributes.description);  
            });                                          

            // render the tree  
            tree.render();  

            // false for not recursive (the default), false to disable animation  
            root.expand();  
        }  
    };  
}(); 

同时再分析一个json：

[{"text":"衣服类",    
"id":"5",     //注意：这里是该节点的id，拼连接时要用到，与官方的json有所不同   
"leaf":true,  
"cls":"file",  
"description":"这里是衣服类"}]   //自定义只需要这样就可以了   
给出java产生json的代码逻辑片断：   
……  
//list为由传入的id所求的category集合  
List list=   
findBy("parentId", new Long(parentId.toString()));  
StringBuffer JSONStr = new StringBuffer();  //声明json  
JSONStr.append("[");  

for(CostCategory i : list){    
    boolean isLeaf = isLeaf(i.getId());  //isLeaf()为判断是否有以该id为parentId的节点，具体没有给出  
    String icon = isLeaf?"file":"folder";  
    String description = i.getCategoryDescription()==null?"":i.getCategoryDescription();  
    //{"text":"treedata.jsp","id":"treedata.jsp","leaf":true,"cls":"file"},  
    JSONStr.append("{\"text\":\""+  
            i.getCategoryName()+"\",\"id\":\""+  
            i.getId()+"\",\"leaf\":"+  
            isLeaf+",\"cls\":\""+  
            icon+"\",\"description\":\""+  
            description+"\"},");  
}  
JSONStr.deleteCharAt(JSONStr.lastIndexOf(","));  
JSONStr.append("]");  
System.out.println(JSONStr);  
out.print(JSONStr);   //输出json  
……