Jquery easyui tree的使用

客官°小女子只卖身不卖艺 2022-08-11 15:30 202阅读 0赞

这个ui用的一切都是json数据。树也是如此！

后台需要返回与格式匹配的json数据才能正确加载树。

页面定义一个ui：

JS访问后台：

//人员树
    	$('#messageInfoAddTree').tree({    
    		url: "controller/crmMessageInfo/selectEditTree.json?rid=-1",
    		loadFilter: function(data){   
    			return data;      
    		}     
    	});

后台实体Bean中需要的属性：

public class EmployeeTree {
 	private Integer id; //人员编号
 	private String text; //人员名称
 	private Boolean checked = false; //是否选中
 	private List<EmployeeTree> children; //子节点
 }

按照此种格式填充数据就能得到下面的结果：

![SouthEast][]

获取已勾选的节点数据：

var nodes = $('#messageInfoAddTree').tree('getChecked');

还有一个功能，就是让tree的所有节点都勾选上或者取消勾选，在api中找了一下有一个方法：

<table> 
 <tbody> 
 <tr> 
 <td>check</td> 
 <td>target</td> 
 <td>选中指定节点。</td> 
 </tr> 
 </tbody> 
</table>

那我们只能是选中根节点后，实现全选。

<table> 
 <tbody> 
 <tr> 
 <td>getRoot</td> 
 <td>none</td> 
 <td>获取根节点，返回节点对象。</td> 
 </tr> 
 </tbody> 
</table>

全选：

var root = $('#messageInfoAddTree').tree('getRoot');
    $("#messageInfoAddTree").tree('check',root.target);

取消选择：

var root = $('#messageInfoAddTree').tree('getRoot');
    $("#messageInfoAddTree").tree('uncheck',root.target);

Jquery easyui tree Api：

### Tree（树） ###

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

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

![Image 1][]

### ###

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

*  draggable
 *  droppable

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

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

1. **<ul** id="tt" class="easyui-tree"**>**  
2.     **<li>**  
3.         ****Folder****  
4.         **<ul>**  
5.             **<li>**  
6.                 ****Sub Folder 1****  
7.                 **<ul>**  
8.                     **<li>**  
9.                         **<a** href="\#"**>**File 11**</a>**  
10.                     **</li>**  
11.                     **<li>**  
12.                         ****File 12****  
13.                     **</li>**  
14.                     **<li>**  
15.                         ****File 13****  
16.                     **</li>**  
17.                 **</ul>**  
18.             **</li>**  
19.             **<li>**  
20.                 ****File 2****  
21.             **</li>**  
22.             **<li>**  
23.                 ****File 3****  
24.             **</li>**  
25.         **</ul>**  
26.     **</li>**  
27.     **<li>**  
28.         ****File21****  
29.     **</li>**  
30. **</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> 在用户点击一个节点的时候触发。 代码示例：&nbsp; <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> 在右键点击节点的时候触发。 代码示例：&nbsp; <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'&nbsp;或 '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'&nbsp;或 '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新增获取方式）

[SouthEast]: /images/20220810/7050cc95a431491c8351c7b3fbe13caa.png
[Image 1]: