easyUI-tree

末蓝、 2022-08-20 10:22 148阅读 0赞

### Tree（树） ###

使用$.fn.tree.defaults重写默认值对象。

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

![Image 1][]

####  ####

#### 依赖关系 ####

*  draggable
 *  droppable

####  ####

#### 使用案例 ####

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

1. <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote><ul id="tt" class="easyui-tree">
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote><li>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote>Folder
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote><ul>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote><li>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote>Sub Folder 1
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote><ul>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote><li>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote><a href="#">File 11</a>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote></li>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote><li>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote>File 12
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote></li>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote><li>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote>File 13
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote></li>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote></ul>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote></li>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote><li>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote>File 2
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote></li>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote><li>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote>File 3
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote></li>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote></ul>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote></li>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote><li>
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote>File21
 <blockquote style="margin: 0 0 0 40px; border: none; padding: 0px;"></blockquote></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>

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

1. **<ul**id="tt"**></ul>**

1.  $('\#tt').tree(\{
2.  url:'tree\_data.json'
3.  \});

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

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

1.  $('\#tt').tree(\{
2.  url: ...,
3.  loadFilter: function(data)\{
4.  if (data.d)\{
5.  return data.d;
6.  \} else \{
7.  return data;
8.  \}
9.  \}
10. \});

$('\#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: 一个节点数组声明了若干节点。

一些案例：

1.  \[\{
2.  "id":1,
3.  "text":"Folder1",
4.  "iconCls":"icon-save",
5.  "children":\[\{
6.  "text":"File1",
7.  "checked":true
8.  \},\{
9.  "text":"Books",
10. "state":"open",
11. "attributes":\{
12. "url":"/demo/book/abc",
13. "price":100
14. \},
15. "children":\[\{
16. "text":"PhotoShop",
17. "checked":true
18. \},\{
19. "id": 8,
20. "text":"Sub Bookds",
21. "state":"closed"
22. \}\]
23. \}\]
24. \},\{
25. "text":"Languages",
26. "state":"closed",
27. "children":\[\{
28. "text":"Java"
29. \},\{
30. "text":"C\#"
31. \}\]
32. \}\]

\[\{ "id":1, "text":"Folder1", "iconCls":"icon-save", "children":\[\{ "text":"File1", "checked":true \},\{ "text":"Books", "state":"open", "attributes":\{ "url":"/demo/book/abc", "price":100 \}, "children":\[\{ "text":"PhotoShop", "checked":true \},\{ "id": 8, "text":"Sub Bookds", "state":"closed" \}\] \}\] \},\{ "text":"Languages", "state":"closed", "children":\[\{ "text":"Java" \},\{ "text":"C\#" \}\] \}\]

####  ####

#### 异步树控件 ####

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

1. **<ul**class="easyui-tree"data-options="url:'get\_data.php'"**></ul>**

树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点，如果节点没有加载子节点，它将会把节点id的值作为http请求参数并命名为'id'，通过URL发送到服务器上面检索子节点。

下面是从服务器端返回的数据。

1.  \[\{
2.  "id": 1,
3.  "text": "Node 1",
4.  "state": "closed",
5.  "children": \[\{
6.  "id": 11,
7.  "text": "Node 11"
8.  \},\{
9.  "id": 12,
10. "text": "Node 12"
11. \}\]
12. \},\{
13. "id": 2,
14. "text": "Node 2",
15. "state": "closed"
16. \}\]

\[\{ "id": 1, "text": "Node 1", "state": "closed", "children": \[\{ "id": 11, "text": "Node 11" \},\{ "id": 12, "text": "Node 12" \}\] \},\{ "id": 2, "text": "Node 2", "state": "closed" \}\]

节点1和节点2是封闭的，当展开节点1的时候将直接显示它的子节点。当展开节点2的时候它将发送值(2)到服务器获取子节点。

####  ####

#### 属性 ####

<table> 
 <tbody> 
 <tr> 
 <th>属性名</th> 
 <th>属性值类型</th> 
 <th>描述</th> 
 <th>默认值</th> 
 </tr> 
 <tr> 
 <td>url</td> 
 <td>string</td> 
 <td>检索远程数据的URL地址。</td> 
 <td>null</td> 
 </tr> 
 <tr> 
 <td>method</td> 
 <td>string</td> 
 <td>检索数据的HTTP方法。（POST / GET）</td> 
 <td>post</td> 
 </tr> 
 <tr> 
 <td>animate</td> 
 <td>boolean</td> 
 <td>定义节点在展开或折叠的时候是否显示动画效果。</td> 
 <td>false</td> 
 </tr> 
 <tr> 
 <td>checkbox</td> 
 <td>boolean</td> 
 <td>定义是否在每一个借点之前都显示复选框。</td> 
 <td>false</td> 
 </tr> 
 <tr> 
 <td>cascadeCheck</td> 
 <td>boolean</td> 
 <td>定义是否层叠选中状态。</td> 
 <td>true</td> 
 </tr> 
 <tr> 
 <td>onlyLeafCheck</td> 
 <td>boolean</td> 
 <td>定义是否只在末级节点之前显示复选框。</td> 
 <td>false</td> 
 </tr> 
 <tr> 
 <td>lines</td> 
 <td>boolean</td> 
 <td>定义是否显示树控件上的虚线。</td> 
 <td>false</td> 
 </tr> 
 <tr> 
 <td>dnd</td> 
 <td>boolean</td> 
 <td>定义是否启用拖拽功能。</td> 
 <td>false</td> 
 </tr> 
 <tr> 
 <td>data</td> 
 <td>array</td> 
 <td>节点数据加载。 <pre>$('#tt').tree({
	data: [{
		text: 'Item1',
		state: 'closed',
		children: [{
			text: 'Item11'
		},{
			text: 'Item12'
		}]
	},{
		text: 'Item2'
	}]
});
</pre> </td> 
 <td>null</td> 
 </tr> 
 <tr> 
 <td>formatter</td> 
 <td>function(node)</td> 
 <td>定义如何渲染节点的文本。 代码示例： <pre>$('#tt').tree({
	formatter:function(node){
		return node.text;
	}
});</pre> </td> 
 <td>false</td> 
 </tr> 
 <tr> 
 <td>loader</td> 
 <td>function(param,success,error)</td> 
 <td>定义如何从远程服务器加载数据。返回false可以忽略本操作。该函数具备以下参数： param：发送到远程服务器的参数对象。 success(data)：当检索数据成功的时候调用的回调函数。 error()：当检索数据失败的时候调用的回调函数。</td> 
 <td>json loader</td> 
 </tr> 
 <tr> 
 <td>loadFilter</td> 
 <td>function(data,parent)</td> 
 <td>返回过滤过的数据进行展示。返回数据是标准树格式。该函数具备以下参数： data：加载的原始数据。 parent: DOM对象，代表父节点。</td> 
 <td>&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

####  ####

#### 事件 ####

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

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

<table> 
 <tbody> 
 <tr> 
 <th>事件名</th> 
 <th>事件参数</th> 
 <th>描述</th> 
 </tr> 
 <tr> 
 <td>onClick</td> 
 <td>node</td> 
 <td> 在用户点击一个节点的时候触发。 代码示例： <pre style="color:#006600">$('#tt').tree({
	onClick: function(node){
		alert(node.text); // 在用户点击的时候提示
	}
});
</pre> </td> 
 </tr> 
 <tr> 
 <td>onDblClick</td> 
 <td>node</td> 
 <td>在用户双击一个节点的时候触发。</td> 
 </tr> 
 <tr> 
 <td>onBeforeLoad</td> 
 <td>node, param</td> 
 <td>在请求加载远程数据之前触发，返回false可以取消加载操作。</td> 
 </tr> 
 <tr> 
 <td>onLoadSuccess</td> 
 <td>node, data</td> 
 <td>在数据加载成功以后触发。</td> 
 </tr> 
 <tr> 
 <td>onLoadError</td> 
 <td>arguments</td> 
 <td>在数据加载失败的时候触发，arguments参数和jQuery的$.ajax()函数里面的'error'回调函数的参数相同。</td> 
 </tr> 
 <tr> 
 <td>onBeforeExpand</td> 
 <td>node</td> 
 <td>在节点展开之前触发，返回false可以取消展开操作。</td> 
 </tr> 
 <tr> 
 <td>onExpand</td> 
 <td>node</td> 
 <td>在节点展开的时候触发。</td> 
 </tr> 
 <tr> 
 <td>onBeforeCollapse</td> 
 <td>node</td> 
 <td>在节点折叠之前触发，返回false可以取消折叠操作。</td> 
 </tr> 
 <tr> 
 <td>onCollapse</td> 
 <td>node</td> 
 <td>在节点折叠的时候触发。</td> 
 </tr> 
 <tr> 
 <td>onBeforeCheck</td> 
 <td>node, checked</td> 
 <td>在用户点击勾选复选框之前触发，返回false可以取消选择动作。（该事件自1.3.1版开始可用）</td> 
 </tr> 
 <tr> 
 <td>onCheck</td> 
 <td>node, checked</td> 
 <td>在用户点击勾选复选框的时候触发。</td> 
 </tr> 
 <tr> 
 <td>onBeforeSelect</td> 
 <td>node</td> 
 <td>在用户选择一个节点之前触发，返回false可以取消选择动作。</td> 
 </tr> 
 <tr> 
 <td>onSelect</td> 
 <td>node</td> 
 <td>在用户选择节点的时候触发。</td> 
 </tr> 
 <tr> 
 <td>onContextMenu</td> 
 <td>e, node</td> 
 <td> 在右键点击节点的时候触发。 代码示例： <pre style="color:#006600">// 右键点击节点并显示快捷菜单
$('#tt').tree({
	onContextMenu: function(e, node){
		e.preventDefault();
		// 查找节点
		$('#tt').tree('select', node.target);
		// 显示快捷菜单
		$('#mm').menu('show', {
			left: e.pageX,
			top: e.pageY
		});
	}
});

// 右键菜单定义如下：
&lt;div id="mm" class="easyui-menu" style="width:120px;"&gt;
	&lt;div οnclick="append()" data-options="iconCls:'icon-add'"&gt;追加&lt;/div&gt;
	&lt;div οnclick="remove()" data-options="iconCls:'icon-remove'"&gt;移除&lt;/div&gt;
&lt;/div&gt;
</pre> </td> 
 </tr> 
 <tr> 
 <td>onBeforeDrag</td> 
 <td>node</td> 
 <td>在开始拖动节点之前触发，返回false可以拒绝拖动。（该事件自1.3.2版开始可用）</td> 
 </tr> 
 <tr> 
 <td>onStartDrag</td> 
 <td>node</td> 
 <td>在开始拖动节点的时候触发。（该事件自1.3.2版开始可用）</td> 
 </tr> 
 <tr> 
 <td>onStopDrag</td> 
 <td>node</td> 
 <td>在停止拖动节点的时候触发。（该事件自1.3.2版开始可用）</td> 
 </tr> 
 <tr> 
 <td>onDragEnter</td> 
 <td>target, source</td> 
 <td>在拖动一个节点进入到某个目标节点并释放的时候触发，返回false可以拒绝拖动。 target：释放的目标节点元素。 source：开始拖动的源节点。 （该事件自1.3.2版开始可用）</td> 
 </tr> 
 <tr> 
 <td>onDragOver</td> 
 <td>target, source</td> 
 <td>在拖动一个节点经过某个目标节点并释放的时候触发，返回false可以拒绝拖动。 target：释放的目标节点元素。 source：开始拖动的源节点。 （该事件自1.3.2版开始可用）</td> 
 </tr> 
 <tr> 
 <td>onDragLeave</td> 
 <td>target, source</td> 
 <td>在拖动一个节点离开某个目标节点并释放的时候触发，返回false可以拒绝拖动。 target：释放的目标节点元素。 source：开始拖动的源节点。 （该事件自1.3.2版开始可用）</td> 
 </tr> 
 <tr> 
 <td>onBeforeDrop</td> 
 <td>target, source, point</td> 
 <td>在拖动一个节点之前触发，返回false可以拒绝拖动。 target：释放的目标节点元素。 source：开始拖动的源节点。 point：表示哪一种拖动操作，可用值有：'append','top' 或 'bottom'。 （该事件自1.3.3版开始可用）</td> 
 <td>&nbsp;</td> 
 </tr> 
 <tr> 
 <td>onDrop</td> 
 <td>target, source, point</td> 
 <td>当节点位置被拖动时触发。 target：DOM对象，需要被拖动动的目标节点。 source：源节点。 point：表示哪一种拖动操作，可用值有：'append','top' 或 'bottom'。</td> 
 </tr> 
 <tr> 
 <td>onBeforeEdit</td> 
 <td>node</td> 
 <td>在编辑节点之前触发。</td> 
 </tr> 
 <tr> 
 <td>onAfterEdit</td> 
 <td>node</td> 
 <td>在编辑节点之后触发。</td> 
 </tr> 
 <tr> 
 <td>onCancelEdit</td> 
 <td>node</td> 
 <td>在取消编辑操作的时候触发。</td> 
 </tr> 
 </tbody> 
</table>

####  ####

#### 方法 ####

<table> 
 <tbody> 
 <tr> 
 <th>方法名</th> 
 <th>方法参数</th> 
 <th>描述</th> 
 </tr> 
 <tr> 
 <td>options</td> 
 <td>none</td> 
 <td>返回树控件属性。</td> 
 </tr> 
 <tr> 
 <td>loadData</td> 
 <td>data</td> 
 <td>读取树控件数据。</td> 
 </tr> 
 <tr> 
 <td>getNode</td> 
 <td>target</td> 
 <td>获取指定节点对象。</td> 
 </tr> 
 <tr> 
 <td>getData</td> 
 <td>target</td> 
 <td>获取指定节点数据，包含它的子节点。</td> 
 </tr> 
 <tr> 
 <td>reload</td> 
 <td>target</td> 
 <td>重新载入树控件数据。</td> 
 </tr> 
 <tr> 
 <td>getRoot</td> 
 <td>none</td> 
 <td>获取根节点，返回节点对象。</td> 
 </tr> 
 <tr> 
 <td>getRoots</td> 
 <td>none</td> 
 <td>获取所有根节点，返回节点数组。</td> 
 </tr> 
 <tr> 
 <td>getParent</td> 
 <td>target</td> 
 <td>获取父节点，'target'参数代表节点的DOM对象。</td> 
 </tr> 
 <tr> 
 <td>getChildren</td> 
 <td>target</td> 
 <td>获取所有子节点，'target'参数代表节点的DOM对象。</td> 
 </tr> 
 <tr> 
 <td>getChecked</td> 
 <td>state</td> 
 <td>获取所有选中的节点。'state'可用值有：'checked','unchecked','indeterminate'。如果'state'未指定，将返回'checked'节点。 代码示例： <pre>var nodes = $('#tt').tree('getChecked');	// get checked nodes
var nodes = $('#tt').tree('getChecked', 'unchecked');	// 获取未选择节点
var nodes = $('#tt').tree('getChecked', 'indeterminate');	// 获取不确定的节点</pre> <pre>译者注：（1.3.4新增获取方式）

[Image 1]:

easyUI-tree

发表评论取消回复

还没有评论，来说两句吧...

相关阅读