EasyUI Tree 树

通过 $.fn.tree.defaults 重写默认的 defaults。

树（tree）在网页中以树形结构显示分层数据。它向用户提供展开、折叠、拖拽、编辑和异步加载功能。

用法

树（tree）定义在 <ul> 元素中。该标记可定义叶节点和子节点。节点将是 ul 列表内的 <li> 元素。下面演示了将被用于制作嵌套在 ul 元素内的树节点的元素。

<span style="font-size:18px;">    <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></span>

树（Tree）也可以在一个空的 <ul> 元素中定义，可使用 javascript 加载数据。

<span style="font-size:18px;">    <ul id="tt"></ul>

    $('#tt').tree({
        url:'tree_data.json'
    });</span>

使用 loadFilter 来处理来自 ASP.NET web 服务的 json 数据。

<span style="font-size:18px;">    $('#tt').tree({
        url: ...,
        loadFilter: function(data){
    		if (data.d){
    			return data.d;
    		} else {
    			return data;
    		}
        }
    });</span>

树的数据格式（Tree Data Format）

每个节点可以包括下列属性：

• id：节点的 id，它对于加载远程数据很重要。
• text：要显示的节点文本。
• state：节点状态，'open' 或 'closed'，默认是 'open'。当设置为 'closed' 时，该节点有子节点，并且将从远程站点加载它们。
• checked：指示节点是否被选中。
• attributes：给一个节点添加的自定义属性。
• children：定义了一些子节点的节点数组。

事件

很多事件的回调函数需要 'node' 参数，它包括下列属性：

• id：绑定到节点的标识值。
• text：要显示的文本。
• iconCls：用来显示图标的 css class。
• checked：节点是否被选中。
• state：节点状态，'open' 或 'closed'。
• attributes：绑定到节点的自定义属性。
• target：目标的 DOM 对象。

本文内容来自：http://www.jeasyui.net/plugins/185.html