easyui02（tree前端工作）

一、tree控件的使用

tree控件使用<ul>元素定义 ，标签能够定义分支和子节点 ，节点都定义在<ul>列表内的<li>元素中，以下显示的元素将被用作tree节点嵌套在<ul>元素中：

url:请求地址

animate:true：折叠或者展开的到时候是否显示动画效果

<ul id="tt" class="easyui-tree">   
    <li>   
        <span>Folder</span>   
        <ul>   
            <li>   
                <span>Sub Folder 1</span>   
                <ul>   
                    <li>   
                        <span><a href="#">File 11</a></span>   
                    </li>   
                    <li>   
                        <span>File 12</span>   
                    </li>   
                    <li>   
                        <span>File 13</span>   
                    </li>   
                </ul>   
            </li>   
            <li>   
                <span>File 2</span>   
            </li>   
            <li>   
                <span>File 3</span>   
            </li>   
        </ul>   
    </li>   
    <li>   
        <span>File21</span>   
    </li>   
</ul>  

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

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

每个节点都具备以下属性：

• id：节点ID，对加载远程数据很重要。

• text：显示节点文本。

• state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。

• checked：表示该节点是否被选中。

• attributes: 被添加到节点的自定义属性。

• children: 一个节点数组声明了若干节点。

事件：

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

• id：绑定节点的标识值。

• text：显示的节点文本。

• iconCls：显示的节点图标CSS类ID。

• checked：该节点是否被选中。

• state：节点状态，'open' 或 'closed'。

• attributes：绑定该节点的自定义属性。

• target：目标DOM对象

二、tabs控件的使用

通过标签创建选项卡

通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给<div/>标签添加一个类ID'easyui-tabs'

<div id="tt" class="easyui-tabs" style="width:500px;height:250px;">  
    <div title="Tab1" style="padding:20px;display:none;">  
        tab1   
    </div>  
    <div title="Tab2" data-options="closable:true" style="overflow:auto;padding:20px;display:none;">  
        tab2   
    </div>  
    <div title="Tab3" data-options="iconCls:'icon-reload',closable:true" style="padding:20px;display:none;">  
        tab3   
    </div>  
</div>  

通过Javascript创建选项卡

下面的代码演示如何使用Javascript创建选项卡，当该选项卡被选择时将会触发'onSelect'事件

$('#tt').tabs({    
    border:false,    
    onSelect:function(title){    
        alert(title+' is selected');    
    }    
}); 

方法：

select

which

选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。

exists

which

表明指定的面板是否存在，'which'参数可以是选项卡面板的标题或索引。

选项卡面板

选项卡面板属性与panel组件属性的定义类似，下面是2个组件的一些公共属性。

属性名	属性值类型	描述	默认值
id	string	选项卡面板的ID属性。	null
title	string	选项卡面板的标题文本。
content	string	选项卡面板的内容。
href	string	从URL加载远程数据内容填充到选项卡面板。	null
cache	boolean	如果为true，在'href'属性设置了有效值的时候缓存选项卡面板。	true
iconCls	string	定义了一个图标的CSS类ID显示到选项卡面板标题。	null
width	number	选项卡面板宽度。	auto
height	number	选项卡面板高度。	auto
collapsible	boolean	如果为true，则允许选项卡摺叠。	false

三、easyui图标的使用

<div>：data-options="iconCls:'icon-application-home

选项卡：iconCls