easyUi_tree

简介

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

tree的常用方式

树控件使用< ul >元素定义。标签能够定义分支和子节点。节点都定义在< ul >列表内的< li >元素中。
事例：

<ul id="tt" class="easyui-tree">   
    <li>   
        <span>Folder</span>   
        <ul>   
            <li>   
                <span>Folder 1</span>   
            </li>          
        </ul>   
    </li>   
    
</ul>  

树控件也可以定义在一个空< ul >元素中并使用Javascript加载数据。

<ul id="tt"></ul> 

$('#tt').tree({    
    url:'tree_data.json'   
});  

使用loadFilter函数处理来自Web Services的JSON数据。

$('#tt').tree({    
    url: ...,    
    loadFilter: function(data){    
        if (data.d){    
            return data.d;    
        } else {    
            return data;    
        }    
    }    
});  

树控件数据格式化
每个节点都具备以下属性：

id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，‘open’ 或 ‘closed’，默认：‘open’。如果为’closed’的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。

很多事件的回调函数都包含’node’参数，其具备如下属性：

id：绑定节点的标识值。
text：显示的节点文本。
iconCls：显示的节点图标CSS类ID。
checked：该节点是否被选中。
state：节点状态，‘open’ 或 ‘closed’。
attributes：绑定该节点的自定义属性。
target：目标DOM对象。

异步树控件

树控件内建异步加载模式的支持，用户先创建一个空的树，然后指定一个服务器端，执行检索后动态返回JSON数据来填充树并完成异步请求。
事例：

<ul id="tt"></ul>

<script>
    $(function(){
        $('#tt').tree({
            url:"<%=request.getContextPath()%>/tree.do",
            // onClick:在用户点击一个节点的时候触发。
            onClick: function(node){
                var title=node.text;  // 在用户点击的时候提示
                var url = node.url;
                //选项卡的选择
                var tab = $('#s_tt').tabs('exists',title);
                if(tab){
                    $('#s_tt').tabs('select',title);
                }else{
                    $('#s_tt').tabs('add',{
                        title:title,
                        content:'<iframe style="width:100%;height:100%;position:relative;" src="'+url+'" frameborder="0" scrolling="true" ></iframe>',
                        closable:true,
                        tools:[{
                            iconCls:'icon-mini-refresh',
                            handler:function(){
                                //获取选中的选项卡
                                var tab = $('#s_tt').tabs("getSelected");
                                //刷新选项卡
                                $('#s_tt').tabs('update', {
                                    tab: tab,
                                    options: {
                                    }
                                });
                            }
                        }]
                    });
                }
            }
        });
    })
</script>