EasyUI –tree、combotree学习总结
一、 tree总结
(一)、tree基本使用
tree控件是web页面中将数据分层一树形结构显示的。
使用$.fn.tree.defaults重写默认值对象。
tree控件在页面上以<ul></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加载数据。
- <ul id="tt"></ul>
- $('#tt').tree({
- url:'tree_data.json'
- });
(二)tree属性
该控件的每一个节点都有如下属性:
id:节点ID,对加载远程数据很重要。
text:显示节点文本。
state:节点状态,'open' 或 'closed',默认:'open'。如果为'closed'的时候,将不自动展开该节点。
checked:表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。
控件属性:
属性名 | 属性值类型 | 描述 | 默认值 |
url | string | 检索远程数据的URL地址。 | null |
method | string | 检索数据的HTTP方法。(POST / GET) | post |
animate | boolean | 定义节点在展开或折叠的时候是否显示动画效果。 | false |
checkbox | boolean | 定义是否在每一个借点之前都显示复选框。 | false |
cascadeCheck | boolean | 定义是否层叠选中状态。 | true |
onlyLeafCheck | boolean | 定义是否只在末级节点之前显示复选框。 | false |
lines | boolean | 定义是否显示树控件上的虚线。 | false |
dnd | boolean | 定义是否启用拖拽功能。 | false |
data | array | 节点数据加载。 $('#tt').tree({ data: [{ text: 'Item1', state: 'closed', children: [{ text: 'Item11' },{ text: 'Item12' }] },{ text: 'Item2' }] }); | null |
queryParams | object | 在请求远程数据的时候增加查询参数并发送到服务器。(该属性自1.4版开始可用) | {} |
formatter | function(node) | 定义如何渲染节点的文本。 代码示例: $('#tt').tree({ formatter:function(node){ return node.text; } }); | false |
filter | function(q,node) | 定义如何过滤本地展示的数据,返回true将允许节点进行展示。(该属性自1.4.2版开始可用) | json loader |
loader | function(param,success,error) | 定义如何从远程服务器加载数据。返回false可以忽略本操作。该函数具备以下参数: | json loader |
loadFilter | function(data,parent) | 返回过滤过的数据进行展示。返回数据是标准树格式。该函数具备以下参数: |
事件:
事件名 | 事件参数 | 描述 | |
onClick | node | 在用户点击一个节点的时候触发。 代码示例: $('#tt').tree({ onClick: function(node){ alert(node.text); // 在用户点击的时候提示 } }); | |
onDblClick | node | 在用户双击一个节点的时候触发。 | |
onBeforeLoad | node, param | 在请求加载远程数据之前触发,返回false可以取消加载操作。 | |
onLoadSuccess | node, data | 在数据加载成功以后触发。 | |
onLoadError | arguments | 在数据加载失败的时候触发,arguments参数和jQuery的$.ajax()函数里面的'error'回调函数的参数相同。 | |
onBeforeExpand | node | 在节点展开之前触发,返回false可以取消展开操作。 | |
onExpand | node | 在节点展开的时候触发。 | |
onBeforeCollapse | node | 在节点折叠之前触发,返回false可以取消折叠操作。 | |
onCollapse | node | 在节点折叠的时候触发。 | |
onBeforeCheck | node, checked | 在用户点击勾选复选框之前触发,返回false可以取消选择动作。(该事件自1.3.1版开始可用) | |
onCheck | node, checked | 在用户点击勾选复选框的时候触发。 | |
onBeforeSelect | node | 在用户选择一个节点之前触发,返回false可以取消选择动作。 | |
onSelect | node | 在用户选择节点的时候触发。 | |
onContextMenu | e, node | 在右键点击节点的时候触发。 代码示例: // 右键点击节点并显示快捷菜单 $('#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 οnclick="append()" data-options="iconCls:'icon-add'">追加</div> <div οnclick="remove()" data-options="iconCls:'icon-remove'">移除</div> </div> | |
onBeforeDrag | node | 在开始拖动节点之前触发,返回false可以拒绝拖动。(该事件自1.3.2版开始可用) | |
onStartDrag | node | 在开始拖动节点的时候触发。(该事件自1.3.2版开始可用) | |
onStopDrag | node | 在停止拖动节点的时候触发。(该事件自1.3.2版开始可用) | |
onDragEnter | target, source | 在拖动一个节点进入到某个目标节点并释放的时候触发,返回false可以拒绝拖动。 | |
onDragOver | target, source | 在拖动一个节点经过某个目标节点并释放的时候触发,返回false可以拒绝拖动。 | |
onDragLeave | target, source | 在拖动一个节点离开某个目标节点并释放的时候触发,返回false可以拒绝拖动。 | |
onBeforeDrop | target, source, point | 在拖动一个节点之前触发,返回false可以拒绝拖动。 | |
onDrop | target, source, point | 当节点位置被拖动时触发。 | |
onBeforeEdit | node | 在编辑节点之前触发。 | |
onAfterEdit | node | 在编辑节点之后触发。 | |
onCancelEdit | node | 在取消编辑操作的时候触发。 |
方法:
方法名 | 方法参数 | 描述 |
options | none | 返回树控件属性。 |
loadData | data | 读取树控件数据。 |
getNode | target | 获取指定节点对象。 |
getData | target | 获取指定节点数据,包含它的子节点。 |
reload | target | 重新载入树控件数据。 |
getRoot | nodeEl | 获取通过“nodeEl”参数指定的节点的顶部父节点元素。(该方法自1.4版开始可用) |
getRoots | none | 获取所有根节点,返回节点数组。 |
getParent | target | 获取父节点,'target'参数代表节点的DOM对象。 |
getChildren | target | 获取所有子节点,'target'参数代表节点的DOM对象。 |
getChecked | state | 获取所有选中的节点。'state'可用值有:'checked','unchecked','indeterminate'。如果'state'未指定,将返回'checked'节点。 代码示例: var nodes = $('#tt').tree('getChecked'); // get checked nodes var nodes = $('#tt').tree('getChecked', 'unchecked'); // 获取未选择节点 var nodes = $('#tt').tree('getChecked', 'indeterminate'); // 获取不确定的节点 译者注:(1.3.4新增获取方式) |
getSelected | none | 获取选择节点并返回它,如果未选择则返回null。 |
isLeaf | target | 判断指定的节点是否是叶子节点,target参数是一个节点DOM对象。 |
find | id | 查找指定节点并返回节点对象。 代码示例: // 查找一个节点并选择它 var node = $('#tt').tree('find', 12); $('#tt').tree('select', node.target); |
select | target | 选择一个节点,'target'参数表示节点的DOM对象。 |
check | target | 选中指定节点。 |
uncheck | target | 取消选中指定节点。 |
collapse | target | 折叠一个节点,'target'参数表示节点的DOM对象。 |
expand | target | 展开一个节点,'target'参数表示节点的DOM对象。在节点关闭或没有子节点的时候,节点ID的值(名为'id'的参数)将会发送给服务器 |
collapseAll | target | 折叠所有节点。 |
expandAll | target | 展开所有节点。 |
expandTo | target | 打开从根节点到指定节点之间的所有节点。 |
scrollTo | target | 滚动到指定节点。(该方法自1.3.4版开始可用) |
append | param | 追加若干子节点到一个父节点,param参数有2个属性: 代码示例: // 追加若干个节点并选中他们 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' }] }] }); |
toggle | target | 打开或关闭节点的触发器,target参数是一个节点DOM对象。 |
insert | param | 在一个指定节点之前或之后插入节点,'param'参数包含如下属性: 下面的代码展示了如何将一个新节点插入到选择的节点之前: var node = $('#tt').tree('getSelected'); if (node){ $('#tt').tree('insert', { before: node.target, data: { id: 21, text: 'node text' } }); } 译者注:(1.3.4新增获取方式) if (node){ $('#tt').tree('insert', { before: node.target, data: [{ id: 23, text: 'node23' },{ text: 'node24', state: 'closed', children: [{ text: 'node241' },{ text: 'node242' }] }] }); } |
remove | target | 移除一个节点和它的子节点,'target'参数是该节点的DOM对象。 |
pop | target | 移除一个节点和它的子节点,该方法跟remove方法一样,不同的是它将返回被移除的节点数据。 |
update | param | 更新指定节点。'param'参数包含以下属性: 代码示例: // 更新选择的节点文本 var node = $('#tt').tree('getSelected'); if (node){ $('#tt').tree('update', { target: node.target, text: 'new text' }); } |
enableDnd | none | 启用拖拽功能。 |
disableDnd | none | 禁用拖拽功能。 |
beginEdit | target | 开始编辑一个节点。 |
endEdit | target | 结束编辑一个节点。 |
cancelEdit | target | 取消编辑一个节点。 |
doFilter | text | 过滤操作,和filter属性功能类似。(该方法自1.4.2版开始可用) 代码示例: $('#tt').tree('doFilter', 'easyui'); $('#tt').tree('doFilter', ''); // 清除过滤器 |
二、下拉树(combotree)
扩展自$.fn.combo.defaults和$.fn.tree.defaults。使用$.fn.combotree.defaults重写默认值对象。
注意:是能够使用combo中和tree中的方法。
用法:
用<select>标签创建控件
- <select id="cc" class="easyui-combotree" style="width:200px;"
- data-options="url:'get_data.php',required:true"></select>
属性:
树形下拉框属性扩展自combo(自定义下拉框)和tree(树形控件),树形下拉框重写的属性如下:(以前默认值为true)
属性名 | 属性值类型 | 描述 | 默认值 |
editable | boolean | 定义用户是否可以直接输入文本到字段中。 | false |
方法:
树形下拉框方法扩展自combo(自定义下拉框),树形下拉框新增和重写的方法如下:
方法名 | 方法参数 | 描述 |
options | none | 返回属性对象。 |
tree | none | 返回树形对象。以下的例子显示了如何得到选择的树节点。 var t = $('#cc').combotree('tree'); // 获取树对象 var n = t.tree('getSelected'); // 获取选择的节点 alert(n.text); |
loadData | data | 读取本地树形数据。 代码示例: $('#cc').combotree('loadData', [{ id: 1, text: 'Languages', children: [{ id: 11, text: 'Java' },{ id: 12, text: 'C++' }] }]); |
reload | url | 再次请求远程树数据。通过'url'参数重写原始URL值。 |
clear | none | 清空控件的值。 |
setValues | values | 设置组件值数组。 代码示例: $('#cc').combotree('setValues', [1,3,21]);//1,3,21代表id为1,3,21 |
setValue | value | 设置组件值。 代码示例: $('#cc').combotree('setValue', 6); |