tree - Documentation - jQuery EasyUI

jQuery EasyUI

previous page next page

树形菜单 - Tree

使用$.fn.tree.defaults重载默认值。

树形菜单用于web页面以一个树形结构显示分层数据。它提供了用户扩展,折叠,拖拽、编辑和异步加载功能。

依赖组件（Dependencies）

  • draggable
  • droppable

使用方法（Usage Example）

Tree 可以在<ul>元素定义,标记可以定义叶子节点,子节点,节点可以是li元素和内置的ul的列表,下面展示的元素使树节点内嵌ul元素.

Tree 也可以在一个空的ul元素中定义和使用javascript加载数据.

使用loadFilter处理 ASP.NET web services输出的json数据.


Tree 数据转换

所有节点都包含以下属性:

  • id:节点id,这个很重要到加载远程服务器数据 which is important to load remote data
  • text: 显示的节点文本
  • state: 节点状态, 'open' 或者 'closed', 默认是 'open'. 当设置为 'closed', 节点所有的子节点将从远程服务器站点加载
  • checked: 指明检查节点是否选中.
  • attributes: 可以添加到节点的自定义属性
  • children: 一个节点数组,定义一些子节点

一些示例:


异步加载 Tree

tree 支持内置的异步加载模式,用户创建一个空的tree,然后定义一个远程服务器站点返回json数据用于填充tree来异步满足异步加载需求.例如:

tree的加载是通过URL  'get_data.php'站点.子节点的加载依赖于父节点的状态.当展开一个关闭节点,如果节点没有子节点加载,将发送节点id值作为http参数,参数命名为'id'到远程服务器,通过以上URL定义.检索子节点数据
看看这个从服务器返回的数据:

节点1和节点2都是closed状态的,可以直接显示它们的子节点,当展开节点2时,发送值2到远程服务器检索子节点
这个教程创建异步的树click me!!!,展示如何写服务器端代码根据需求返回tree数据.

Properties

Name Type Description Default
url string 一个从远程服务器检索数据的URL. null
method string 检索数据的http方法类型. post
animate boolean 定义当展开/折叠节点的时候是否显示效果. false
checkbox boolean 定义是否显示checkbox在所有节点之前. false
cascadeCheck boolean 定义是否级联选择. true
onlyLeafCheck boolean 定义是否仅仅只是在叶子节点显示checkbox false
lines boolean 定义是否显示树线. false
dnd boolean 定义是否启用drag and drop. false
data array 这个节点数据将被加载. 
$('#tt').tree({
	data: [{
		text: 'Item1',
		state: 'closed',
		children: [{
			text: 'Item11'
		},{
			text: 'Item12'
		}]
	},{
		text: 'Item2'
	}]
});
null
loader function(param,success,error) 定义如何从远程服务器加载数据.返回false将终止这个动作.这个函数提供以下参数:
param: 这个参数对象将传送给远程服务器.
success(data): 当检索数据成功之后的回调函数.
error(): 当检索数据出现异常的时候调用的回调函数. 		json loader
loadFilter function(data,parent) 返回显示过滤后的数据. 返回的数据是标准的tree格式.这个函数提供以下参数:
data:装载的是原始数据.
parent: DOM 对象, 指定父节点.

Events

许多回调函数提供'node'参数, 都包含以下属性:

  • id: 绑定到节点的标识值.
  • text:显示文本.
  • iconCls: 显示icon的css样式.
  • checked: 节点是否选中.
  • state: 节点状态, 'open' 或者 'closed'.
  • attributes: 绑定到节点的自定义属性.
  • target: 目标 DOM 对象.
Name Parameters Description
onClick node 当用户点击节点的时候触发. 示例代码: 
$('#tt').tree({
	onClick: function(node){
		alert(node.text);  // alert node text property when clicked
	}
});
onDblClick node 当用户双击一个节点的时候触发.
onBeforeLoad node, param 当一个请求加载数据在前触发, 返回false取消加载动作.
onLoadSuccess node, data 当数据加载成功之后触发.
onLoadError arguments 当数据加载失败触发,arguments参数和ajax jQuery 的'error'一样.
onBeforeExpand node 节点展开之前触发,返回false取消展开动作.
onExpand node 当节点展开之后触发.
onBeforeCollapse node 节点折叠之前触发,返回false将取消折叠动作.
onCollapse node 当节点折叠之后触发.
onCheck node, checked 当用户点击checkbox的时候触发.
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 onclick="append()" data-options="iconCls:'icon-add'">Append</div>
	<div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div>
</div>
onDrop target, source, point 当节点被放置的时候触发.
target: DOM 对象,这个节点是被放置的目标.
source: 源节点.
point:指明drop操作,可用值有: 'append','top' or 'bottom'.
onBeforeEdit node 在编辑节点之前触发.
onAfterEdit node 编辑节点之后触发.
onCancelEdit node 取消编辑动作时候触发.

Methods

Name Parameter Description
options none 返回tree 的options.
loadData data 加载tree数据.
getNode target 得到特定的节点对象.
getData target 得到特定节点数据, 包含其子节点.
reload target 重新加载tree数据.
getRoot none 得到根节点, 返回节点对象
getRoots none 得到根节点, 返回节点数组.
getParent target 得到父节点,target参数指明节点DOM对象.
getChildren target 得到子节点,target 参数指明节点DOM对象.
getChecked none 得到所有选中节点.
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对象,当节点的状态是closed的时候 和没有子节点,节点id值(参数命名为'id')将发送给服务器请求子节点数据.
collapseAll target 折叠所有节点.
expandAll target 展开所有节点.
expandTo target 展开从根节点到指定的节点.
append param 附加一些子节点到父节点中. param参数有两个属性:
parent: DOM 对象,被添加到的父节点,如果没有分配,附加到根节点.
data: array, the nodes data. Code example: 
// 添加一些节点到选择的节点
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 切换expanded/collapsed 节点的状态,target 参数指明节点DOM对象.
insert param 插入一个节点到特定节点的之前或之后.'param'参数包含以下属性:
before: DOM 对象,节点插入到之前.
after: DOM 对象, 节点插入到之后.
data: object, 节点数据.

以下代码展示,如何插入新节点到选择节点之前:

var node = $('#tt').tree('getSelected');
if (node){
	$('#tt').tree('insert', {
		before: node.target,
		data: {
			id: 21,
			text: 'node text'
		}
	});
}
remove target 移除一个节点和其子节点,target 参数指明节点DOM对象.
pop target 移除一个节点和其子节点,这个方法和remove类似,但是它返回移除的节点数据.
update param 更新特定的节点. 'param'参数包含以下属性:
target(DOM 对象, 更新的节点),id,text,iconCls,checked,等等.

示例代码:

// 更新选择的节点文本
var node = $('#tt').tree('getSelected');
if (node){
	$('#tt').tree('update', {
		target: node.target,
		text: 'new text'
	});
}
enableDnd none 启用 drag 和 drop 功能（拖放）.
disableDnd none 禁用 drag 和 drop 功能（拖放）..
beginEdit target 开始编辑一个节点.
endEdit target 开始编辑一个节点.
cancelEdit target 取消编辑一个节点.
previous page start next page