Tree
树(tree)在网页中以树形结构显示分层数据。它向用户提供展开、折叠、拖拽、编辑和异步加载功能。
JQuery EasyUI需要引入的文件有如下4个:
<!-- jquery核心库 -->
<script type="text/javascript" src="easyui/jquery.min.js"></script>
<!-- easyui核心库 -->
<script type="text/javascript" src="easyui/jquery.easyui.min.js"></script>
<!-- easyui核心UI文件 css -->
<link href="easyui/themes/default/easyui.css" rel="stylesheet" type="text/css"/>
<!-- easyui图标 -->
<link href="easyui/themes/icon.css" rel="stylesheet" type="text/css"/>
JQuery核心库一定要放在easyui核心库前面引入,不然JQuery.easyui.min.js中会报错:JQuery is not defined。
有的时候,我们需要进行国际化,比如一些提醒、日历等,就需要引入easyui的国际化文件,代码如下:
<!-- Easyui国际化文件 -->
<script type="text/javascript" src="../resource/js/jquery-easyui-1.5/locale/easyui-lang-zh_CN.js"></script>
Tree的定义
树(tree)定义在 ul 元素中。该标记可定义叶节点和子节点。节点将是 ul 列表内的 li 元素。
<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>
树(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
<div data-options="region:'west',split:true" title='系统导航'
style="width: 200px; overflow: hidden; overflow-y: auto; padding: 0px; background-color: #5497d3">
<div class="well well-small">
<ul id="layout_west_tree"></ul>
</div>
</div>
Tree的数据格式(Tree Data Format)
每个节点可以包括下列属性:
id:节点的 id,它对于加载远程数据很重要。
text:要显示的节点文本。
state:节点状态,‘open’ 或 ‘closed’,默认是 ‘open’。当设置为 ‘closed’ 时,该节点有子节点,并且将从远程站点加载它们。
checked:指示节点是否被选中。
attributes:给一个节点添加的自定义属性。
children:定义了一些子节点的节点数组。
[{
"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#"
}]
}]
自定义的Tree实体类
public class Tree implements Serializable
{
private static long serialVersionUID = 980682543891282923L;
private Long id;
private String code;
private String text;
private String state;
private boolean checked;
private Object attributes;
private List<Tree> children;
private String iconCls;
private String pcode;
private String pid;
public Tree() {
this.state = "open";
this.checked = false;
}
setter和getter方法略
}
自定义返回的数据结果格式
@Override
public List<Tree> findTree( SysUser sysUser) {
List<Tree> trees = new ArrayList<Tree>();
if (!sysUser.getLoginname().equals("admin")) {
List<SysResource> resourceIdLists = null;
List<UserRole> roleIdList = this.roleService.findUserRoleByUserId(sysUser.getId());
for ( UserRole userRole : roleIdList) {
SysRole sysRole = new SysRole();
sysRole.setId(userRole.getRole_id());
sysRole = this.publicService.selectObj("sys_role", "", "id", sysRole);
if (sysRole.getStatus() == 0) {
resourceIdLists = this.resourceMapper.findResourceListByRoleIdAndType(userRole.getRole_id(), Config.RESOURCE_MENU.toString(), "");
}
}
for ( SysResource sysResource : resourceIdLists) {
if (sysResource != null && sysResource.getPid() == null) {
Tree treeOne = new Tree();
treeOne.setId(sysResource.getId());
treeOne.setText(sysResource.getName());
treeOne.setIconCls(sysResource.getIcon());
treeOne.setAttributes(sysResource.getUrl());
List<Tree> tree = new ArrayList<Tree>();
for ( SysResource resourceTwo : resourceIdLists) {
if (resourceTwo.getPid() != null && sysResource.getId() == (long)resourceTwo.getPid()) {
Tree treeTwo = new Tree();
treeTwo.setId(resourceTwo.getId());
treeTwo.setText(resourceTwo.getName());
treeTwo.setIconCls(resourceTwo.getIcon());
treeTwo.setAttributes(resourceTwo.getUrl());
tree.add(treeTwo);
}
}
treeOne.setChildren(tree);
trees.add(treeOne);
}
}
return trees;
}
Tree显示数据
layout_west_tree = $('#layout_west_tree').tree(
{
url : '${path }/admin/resource/tree',
parentField : 'pid',
lines : false,
onClick : function(node) {
var url = node.attributes;
url = url == null ? "" : url;
if (url.indexOf("http") >= 0) { //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置
addTab({
url : url,
title : node.text,
iconCls : node.iconCls
});
} else if (url) {
url = '${path }' + node.attributes;
addTab({
url : url,
title : node.text,
iconCls : node.iconCls
});
} else {
layout_west_tree.tree('toggle', node.target); //切换节点的展开/折叠状态,target 参数表示节点的 DOM 对象
}
},
onLoadSuccess : function(node, data) {
$(this).tree('collapseAll'); //折叠所有节点。
},
onExpand : function(node) { //在节点展开的时候触发,判断点击的是不是同个节点,如果是就关闭同个节点。不是就打开新节点,找到并关闭上次节点。
if (layout_west_tree_prenode != node.id) {
var preNode = layout_west_tree.tree('find', layout_west_tree_prenode); //查找指定节点并返回节点对象。
if (preNode != null) {
layout_west_tree.tree('collapse', preNode.target); //折叠一个节点,'target'参数表示节点的DOM对象
}
}
layout_west_tree_prenode = node.id;
}
});
Tree的属性
名称 | 类型 | 描述 | 默认值 |
---|---|---|---|
url | string | 获取远程数据的 URL 。 | null |
method | string | 检索数据的 http 方法(method)。 | post |
animate | boolean | 定义当节点展开折叠时是否显示动画效果。 | false |
checkbox | boolean | 定义是否在每个节点前边显示复选框。 | false |
cascadeCheck | boolean | 定义是否级联检查。 | true |
onlyLeafCheck | boolean | 定义是否只在叶节点前显示复选框。 | false |
lines | boolean | 定义是否显示树线条。 | false |
dnd | boolean | 定义是否启用拖放。 | false |
data | array | 要加载的节点数据。
| null |
formatter | function(node) | 定义如何呈现节点文本。 代码实例:
| |
loader | function(param,success,error) | 定义如何从远程服务器加载数据。返回 false 则取消该动作。该函数有下列参数: param:要传递到远程服务器的参数对象。 success(data):当检索数据成功时调用的回调函数。 error():当检索数据失败时调用的回调函数。 | json loader |
loadFilter | function(data,parent) | 返回要显示的过滤数据。返回数据时以标准树格式返回的。该函数有下列参数: data:要加载的原始数据。 parent:DOM 对象,表示父节点。 |
Tree的事件
很多事件的回调函数需要 'node' 参数,它包括下列属性:
- id:绑定到节点的标识值。
- text:要显示的文本。
- iconCls:用来显示图标的 css class。
- checked:节点是否被选中。
- state:节点状态,'open' 或 'closed'。
- attributes:绑定到节点的自定义属性。
- target:目标的 DOM 对象。
名称 | 参数 | 描述 |
---|---|---|
onClick | node | 当用户点击一个节点时触发。代码实例:
|
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 | 当右键点击节点时触发。代码实例:
|
onBeforeDrag | node | 当节点的拖拽开始时触发,返回 false 则禁止拖拽。该事件自版本 1.3.2 起可用。 |
onStartDrag | node | 当开始拖拽节点时触发。该事件自版本 1.3.2 起可用。 |
onStopDrag | node | 当停止拖拽节点时触发。该事件自版本 1.3.2 起可用。 |
onDragEnter | target, source | 当节点被拖拽进入某个允许放置的目标节点时触发,返回 false 则禁止放置。 target:被放置的目标节点元素。 source:被拖拽的源节点。 该事件自版本 1.3.2 起可用。 |
onDragOver | target, source | 当节点被拖拽到允许放置的目标节点上时触发,返回 false 则禁止放置。 target:被放置的目标节点元素。 source:被拖拽的源节点。 该事件自版本 1.3.2 起可用。 |
onDragLeave | target, source | 当节点被拖拽离开允许放置的目标节点时触发。 target:被放置的目标节点元素。 source:被拖拽的源节点。 该事件自版本 1.3.2 起可用。 |
onBeforeDrop | target,source,point | 节点被放置之前触发,返回 false 则禁止放置。 target:DOM 对象,放置的目标节点。 source:源节点。 point:表示放置操作,可能的值是:'append'、'top' 或 'bottom'。 该事件自版本 1.3.2 起可用。 |
onDrop | target,source,point | 当节点被放置时触发。 target:DOM 对象,放置的目标节点。 source:源节点。 point:表示放置操作,可能的值是:'append'、'top' 或 'bottom'。 |
onBeforeEdit | node | 编辑节点前触发。 |
onAfterEdit | node | 编辑节点后触发。 |
onCancelEdit | node | 当取消编辑动作时触发。 |
Tree的方法
名称 | 参数 | 描述 |
---|---|---|
options | none | 返回树的选项(options)。 |
loadData | data | 加载树的数据。 |
getNode | target | 获取指定的节点对象。 |
getData | target | 获取指定的节点数据,包括它的子节点。 |
reload | target | 重新加载树的数据。 |
getRoot | none | 获取根节点,返回节点对象。 |
getRoots | none | 获取根节点,返回节点数组。 |
getParent | target | 获取父节点,target 参数表示节点的 DOM 对象。 |
getChildren | target | 获取子节点, target 参数表示节点的 DOM 对象。 |
getChecked | state | 获取选中的节点。状态可用值有:'checked'、'unchecked'、'indeterminate'。如果状态未分配,则返回 'checked' 节点。 代码实例:
|
getSelected | none | 获取选中的节点并返回它,如果没有选中节点,则返回 null。 |
isLeaf | target | 把指定的节点定义成叶节点,target 参数表示节点的 DOM 对象。 |
find | id | 找到指定的节点并返回该节点对象。代码实例:
|
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 参数有两个属性: parent:DOM 对象,要追加到的父节点,如果没有分配,则追加为根节点。 data:数组,节点的数据。 代码实例:
|
toggle | target | 切换节点的展开/折叠状态,target 参数表示节点的 DOM 对象。 |
insert | param | 在指定节点的前边或后边插入一个节点,param 参数包括下列属性: before:DOM 对象,前边插入的节点。 after:DOM 对象,后边插入的节点。 data:对象,节点数据。 下面的代码演示了如何在选中节点之前插入一个新的节点:
|
remove | target | 移除一个节点和它的子节点,target 参数表示节点的 DOM 对象。 |
pop | target | 弹出一个节点和它的子节点,该方法和 remove 一样,但是返回了移除的节点数据。 |
update | param | 更新指定的节点,'param' 参数有下列属性: target(DOM 对象,要被更新的节点)、id、text、iconCls、checked,等等。 代码实例:
|
enableDnd | none | 启用拖放功能。 |
disableDnd | none | 禁用拖放功能。 |
beginEdit | target | 开始编辑节点。 |
endEdit | target | 结束编辑节点。 |
cancelEdit | target | 取消编辑节点。 |