0
点赞
收藏
分享

微信扫一扫

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');    
    }    
}); 

方法:

selectwhich

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

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

选项卡面板

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

属性名属性值类型描述默认值
idstring选项卡面板的ID属性。null
titlestring选项卡面板的标题文本。
contentstring选项卡面板的内容。
hrefstring从URL加载远程数据内容填充到选项卡面板。null
cacheboolean如果为true,在'href'属性设置了有效值的时候缓存选项卡面板。true
iconClsstring定义了一个图标的CSS类ID显示到选项卡面板标题。null
widthnumber选项卡面板宽度。auto
heightnumber选项卡面板高度。auto
collapsibleboolean如果为true,则允许选项卡摺叠。false

三、easyui图标的使用

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

选项卡:iconCls

举报

相关推荐

0 条评论