EasyUI Tree 树

- 日理万妓 2022-08-22 06:21 132阅读 0赞

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

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

## 用法 ##

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

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

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

<ul id="tt"></ul>
 
 $('#tt').tree({
 url:'tree_data.json'
 });

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

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

## 树的数据格式（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][http_www.jeasyui.net_plugins_185.html]

[http_www.jeasyui.net_plugins_185.html]: http://www.jeasyui.net/plugins/185.html