### Tree(树)
使用$.fn.tree.defaults重写默认值对象。
树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。
![](https://box.kancloud.cn/2016-07-19_578d913a99ccd.png)
####
#### 依赖关系
-
[draggable](#)
-
[droppable](#)
####
#### 使用案例
树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。以下显示的元素将被用作树节点嵌套在<ul>元素中。
1. **<ul** id="tt" class="easyui-tree"**>**
1. **<li>**
1. **<span>**Folder**</span>**
1. **<ul>**
1. **<li>**
1. **<span>**Sub Folder 1**</span>**
1. **<ul>**
1. **<li>**
1. **<span><a** href="#"**>**File 11**</a></span>**
1. **</li>**
1. **<li>**
1. **<span>**File 12**</span>**
1. **</li>**
1. **<li>**
1. **<span>**File 13**</span>**
1. **</li>**
1. **</ul>**
1. **</li>**
1. **<li>**
1. **<span>**File 2**</span>**
1. **</li>**
1. **<li>**
1. **<span>**File 3**</span>**
1. **</li>**
1. **</ul>**
1. **</li>**
1. **<li>**
1. **<span>**File21**</span>**
1. **</li>**
1. **</ul>**
<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>
树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据。
1. **<ul** id="tt"**></ul>**
<ul id="tt"></ul>
1. $('#tt').tree({
1. url:'tree_data.json'
1. });
$('#tt').tree({ url:'tree_data.json' });
使用loadFilter函数处理来自Web Services的JSON数据。
1. $('#tt').tree({
1. url: ...,
1. loadFilter: function(data){
1. if (data.d){
1. return data.d;
1. } else {
1. return data;
1. }
1. }
1. });
$('#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. [{
1. "id":1,
1. "text":"Folder1",
1. "iconCls":"icon-save",
1. "children":[{
1. "text":"File1",
1. "checked":true
1. },{
1. "text":"Books",
1. "state":"open",
1. "attributes":{
1. "url":"/demo/book/abc",
1. "price":100
1. },
1. "children":[{
1. "text":"PhotoShop",
1. "checked":true
1. },{
1. "id": 8,
1. "text":"Sub Bookds",
1. "state":"closed"
1. }]
1. }]
1. },{
1. "text":"Languages",
1. "state":"closed",
1. "children":[{
1. "text":"Java"
1. },{
1. "text":"C#"
1. }]
1. }]
[{ "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>**
<ul class="easyui-tree" data-options="url:'get_data.php'"></ul>
树控件读取URL。子节点的加载依赖于父节点的状态。当展开一个封闭的节点,如果节点没有加载子节点,它将会把节点id的值作为http请求参数并命名为'id',通过URL发送到服务器上面检索子节点。
下面是从服务器端返回的数据。
1. [{
1. "id": 1,
1. "text": "Node 1",
1. "state": "closed",
1. "children": [{
1. "id": 11,
1. "text": "Node 11"
1. },{
1. "id": 12,
1. "text": "Node 12"
1. }]
1. },{
1. "id": 2,
1. "text": "Node 2",
1. "state": "closed"
1. }]
[{ "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 class="doc-table"><tbody><tr><th><strong>属性名</strong></th> <th><strong>属性值类型</strong></th> <th><strong>描述</strong></th> <th><strong>默认值</strong></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>queryParams</td> <td>object</td> <td><span>在请求远程数据的时候增加查询参数并发送到服务器。<strong><font color="#ff0000">(该属性自1.4版开始可用)</font></strong></span></td> <td>{}</td></tr><tr><td>formatter</td> <td>function(node)</td> <td><span>定义</span><span>如何渲染</span><span>节点的</span><span>文本</span><span>。<br/><p>代码示例:</p><pre>$('#tt').tree({
formatter:function(node){
return node.text;
}
});</pre></span></td> <td>false</td></tr><tr><td>loader</td> <td>function(param,success,error)</td> <td>定义如何从远程服务器加载数据。返回false可以忽略本操作。该函数具备以下参数:<br/>param:发送到远程服务器的参数对象。<br/>success(data):当检索数据成功的时候调用的回调函数。<br/>error():当检索数据失败的时候调用的回调函数。</td> <td>json loader</td></tr><tr><td>loadFilter</td> <td>function(data,parent)</td> <td>返回过滤过的数据进行展示。返回数据是标准树格式。该函数具备以下参数:<br/>data:加载的原始数据。<br/>parent: DOM对象,代表父节点。 </td> <td/></tr></tbody></table>
####
#### 事件
很多事件的回调函数都包含'node'参数,其具备如下属性:
-
id:绑定节点的标识值。
-
text:显示的节点文本。
-
iconCls:显示的节点图标CSS类ID。
-
checked:该节点是否被选中。
-
state:节点状态,'open' 或 'closed'。
-
attributes:绑定该节点的自定义属性。
-
target:目标DOM对象。
<table class="doc-table"><tbody><tr><th><strong>事件名</strong></th> <th><strong>事件参数</strong></th> <th><strong>描述</strong></th></tr><tr><td>onClick</td> <td>node</td> <td> <p>在用户点击一个节点的时候触发。</p> <p>代码示例: </p><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可以取消选择动作。<strong><font color="#ff0000">(该事件自1.3.1版开始可用)</font></strong></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> <p>在右键点击节点的时候触发。</p> <p>代码示例: </p><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
});
}
});
// 右键菜单定义如下:
<div id="mm" class="easyui-menu" style="width:120px;">
<div onclick="append()" data-options="iconCls:'icon-add'">追加</div>
<div onclick="remove()" data-options="iconCls:'icon-remove'">移除</div>
</div>
</pre></td></tr><tr><td>onBeforeDrag</td> <td>node</td> <td>在开始拖动节点之前触发,返回false可以拒绝拖动。<strong><font color="#ff0000">(该事件自1.3.2版开始可用)</font></strong></td></tr><tr><td>onStartDrag</td> <td>node</td> <td>在开始拖动节点的时候触发。<strong><font color="#ff0000">(该事件自1.3.2版开始可用)</font></strong></td></tr><tr><td>onStopDrag</td> <td>node</td> <td>在停止拖动节点的时候触发。<strong><font color="#ff0000">(该事件自1.3.2版开始可用)</font></strong></td></tr><tr><td>onDragEnter</td> <td>target, source</td> <td>在拖动一个节点进入到某个目标节点并释放的时候触发,返回false可以拒绝拖动。<br/>target:释放的目标节点元素。<br/>source:开始拖动的源节点。<br/><strong><font color="#ff0000">(该事件自1.3.2版开始可用)</font></strong></td></tr><tr><td>onDragOver</td> <td>target, source</td> <td>在拖动一个节点经过某个目标节点并释放的时候触发,返回false可以拒绝拖动。<br/>target:释放的目标节点元素。<br/>source:开始拖动的源节点。<br/><strong><font color="#ff0000">(该事件自1.3.2版开始可用)</font></strong></td></tr><tr><td>onDragLeave</td> <td>target, source</td> <td>在拖动一个节点离开某个目标节点并释放的时候触发,返回false可以拒绝拖动。<br/>target:释放的目标节点元素。<br/>source:开始拖动的源节点。<br/><strong><font color="#ff0000">(该事件自1.3.2版开始可用)</font></strong></td></tr><tr><td>onBeforeDrop</td> <td>target, source, point</td> <td>在拖动一个节点之前触发,返回false可以拒绝拖动。<br/>target:释放的目标节点元素。<br/>source:开始拖动的源节点。<br/>point:表示哪一种拖动操作,可用值有:'append','top' 或 'bottom'。<br/><strong><font color="#ff0000">(该事件自1.3.3版开始可用)</font></strong> </td><td/> </tr><tr><td>onDrop</td> <td>target, source, point</td> <td>当节点位置被拖动时触发。<br/>target:DOM对象,需要被拖动动的目标节点。<br/>source:源节点。<br/>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 class="doc-table"><tbody><tr><th><strong>方法名</strong></th> <th><strong>方法参数</strong></th> <th><strong>描述</strong></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>nodeEl</td> <td>获取通过“nodeEl”参数指定的节点的顶部父节点元素。<strong><font color="#ff0000">(该方法自1.4版开始可用)</font></strong></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'节点。 <p>代码示例:</p><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新增获取方式)var nodes = $('#tt').tree('getChecked', ['unchecked','indeterminate']);</pre></td></tr><tr><td>getSelected</td> <td>none</td> <td>获取选择节点并返回它,如果未选择则返回null。</td></tr><tr><td>isLeaf</td> <td>target</td> <td>判断指定的节点是否是叶子节点,target参数是一个节点DOM对象。</td></tr><tr><td>find</td> <td>id</td> <td> <p>查找指定节点并返回节点对象。</p> <p>代码示例: </p><pre style="COLOR: #006600">// 查找一个节点并选择它
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);
</pre></td></tr><tr><td>select</td> <td>target</td> <td>选择一个节点,'target'参数表示节点的DOM对象。</td></tr><tr><td>check</td> <td>target</td> <td>选中指定节点。</td></tr><tr><td>uncheck</td> <td>target</td> <td>取消选中指定节点。</td></tr><tr><td>collapse</td> <td>target</td> <td>折叠一个节点,'target'参数表示节点的DOM对象。</td></tr><tr><td>expand</td> <td>target</td> <td>展开一个节点,'target'参数表示节点的DOM对象。在节点关闭或没有子节点的时候,节点ID的值(名为'id'的参数)将会发送给服务器<br/>请求子节点的数据。 </td></tr><tr><td>collapseAll</td> <td>target</td> <td>折叠所有节点。</td></tr><tr><td>expandAll</td> <td>target</td> <td>展开所有节点。</td></tr><tr><td>expandTo</td> <td>target</td> <td>打开从根节点到指定节点之间的所有节点。</td></tr><tr><td>scrollTo</td> <td>target</td> <td>滚动到指定节点。<strong><font color="#ff0000">(该方法自1.3.4版开始可用)</font></strong></td></tr><tr><td>append</td> <td>param</td> <td> <p>追加若干子节点到一个父节点,param参数有2个属性:<br/>parent:DOM对象,将要被追加子节点的父节点,如果未指定,子节点将被追加至根节点。<br/>data:数组,节点数据。</p> <p>代码示例:</p><pre style="COLOR: #006600">// 追加若干个节点并选中他们
var selected = $('#tt').tree('getSelected');
$('#tt').tree('append', {
parent: selected.target,
data: [{
id: 23,
text: 'node23'
},{
text: 'node24',
state: 'closed',
children: [{
text: 'node241'
},{
text: 'node242'
}]
}]
});
</pre></td></tr><tr><td>toggle</td> <td>target</td> <td>打开或关闭节点的触发器,target参数是一个节点DOM对象。</td></tr><tr><td>insert</td> <td>param</td> <td>在一个指定节点之前或之后插入节点,'param'参数包含如下属性:<br/>before:DOM对象,在某个节点之前插入。<br/>after:DOM对象,在某个节点之后插入。<br/>data:对象,节点数据。 <p>下面的代码展示了如何将一个新节点插入到选择的节点之前:</p><pre>var node = $('#tt').tree('getSelected');
if (node){
$('#tt').tree('insert', {
before: node.target,
data: {
id: 21,
text: 'node text'
}
});
}</pre><pre>译者注:(1.3.4新增获取方式)var node = $('#tt').tree('getSelected');
if (node){
$('#tt').tree('insert', {
before: node.target,
data: [{
id: 23,
text: 'node23'
},{
text: 'node24',
state: 'closed',
children: [{
text: 'node241'
},{
text: 'node242'
}]
}]
});
}</pre></td></tr><tr><td>remove</td> <td>target</td> <td>移除一个节点和它的子节点,'target'参数是该节点的DOM对象。</td></tr><tr><td>pop</td> <td>target</td> <td>移除一个节点和它的子节点,该方法跟remove方法一样,不同的是它将返回被移除的节点数据。</td></tr><tr><td>update</td> <td>param</td> <td>更新指定节点。'param'参数包含以下属性:<br/>target(DOM对象,将被更新的目标节点),id,text,iconCls,checked等。 <p>代码示例:</p><pre>// 更新选择的节点文本
var node = $('#tt').tree('getSelected');
if (node){
$('#tt').tree('update', {
target: node.target,
text: 'new text'
});
}</pre></td></tr><tr><td>enableDnd</td> <td>none</td> <td>启用拖拽功能。</td></tr><tr><td>disableDnd</td> <td>none</td> <td>禁用拖拽功能。</td></tr><tr><td>beginEdit</td> <td>target</td> <td>开始编辑一个节点。</td></tr><tr><td>endEdit</td> <td>target</td> <td>结束编辑一个节点。</td></tr><tr><td>cancelEdit</td> <td>target</td> <td>取消编辑一个节点。</td></tr></tbody></table>
- jQuery EasyUI 1.4 版 API 中文版 (Made By Richie696)
- 文档说明
- 汉化说明
- EasyUI更新说明
- Base(基础)
- parser(解析器)
- easyloader(简单加载)
- draggable(拖动)
- droppable(放置)
- resizable(调整大小)
- pagination(分页)
- searchbox(搜索框)
- progressbar(进度条)
- tooltip(提示框)
- Layout(布局)
- panel(面板)
- tabs(选项卡)
- accordion(分类)
- layout(布局)
- Menu and Button(菜单和按钮)
- menu(菜单)
- linkbutton(按钮)
- menubutton(菜单按钮)
- splitbutton(分割按钮)
- Form(表单)
- form(表单)
- validatebox(验证框)
- textbox(文本框)
- combo(自定义下拉框)
- combobox(下拉列表框)
- combotree(树形下拉框)
- combogrid(数据表格下拉框)
- numberbox(数值输入框)
- datebox(日期输入框)
- datetimebox(日期时间输入框)
- datetimespinner(日期时间微调框)
- calendar(日历)
- spinner(微调)
- numberspinner(数字微调)
- timespinner(时间微调)
- slider(滑动条)
- filebox(文件框)
- Window(窗口)
- window(窗口)
- dialog(对话框窗口)
- messager(消息窗口)
- DataGrid and Tree(表格和树)
- datagrid(数据表格)
- propertygrid(属性表格)
- tree(树)
- treegrid(树形表格)
- Extension(扩展)
- Portal(门户)
- DataGrid View(数据表格展示)
- Editable DataGrid(可编辑表格)
- Editable Tree(可编辑树)
- DataGrid Filter Row(可过滤行的数据表格)
- Drag and Drop Rows in DataGrid(可拖放行的数据表格)
- Drag and Drop Rows in TreeGrid(可拖放行的树形表格)
- DWR Loader(DWR装载器)
- RTL Support(RTL支持)
- Ribbon(Ribbon界面)