JQuery EasyUI Tree 用法

NameTypeDescriptionDefaulturlstring一个从远程服务器检索数据的URL.nullmethodstring检索数据的http方法类型.postanimateboolean定义当展开/折叠节点的时候是否显示效果.falsecheckboxboolean定义是否显示checkbox在所有节点之前.falsecascadeCheckboolean定义是否级联选择.trueonlyLeafCheckboolean定义是否仅仅只是在叶子节点显示checkbox.falselinesboolean定义是否显示树线.falsedndboolean定义是否启用drag and drop.falsedataarray这个节点数据将被加载.

$('#tt').tree({
	data: [{
		text: 'Item1',
		state: 'closed',
		children: [{
			text: 'Item11'
		},{
			text: 'Item12'
		}]
	},{
		text: 'Item2'
	}]
});

nullloaderfunction(param,success,error)定义如何从远程服务器加载数据.返回false将终止这个动作.这个函数提供以下参数:
param: 这个参数对象将传送给远程服务器.
success(data): 当检索数据成功之后的回调函数.
error(): 当检索数据出现异常的时候调用的回调函数.json loaderloadFilterfunction(data,parent)返回显示过滤后的数据. 返回的数据是标准的tree格式.这个函数提供以下参数:
data:装载的是原始数据.
parent: DOM 对象, 指定父节点. 

二、事件

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

• id: 绑定到节点的标识值.
• text:显示文本.
• iconCls: 显示icon的css样式.
• checked: 节点是否选中.
• state: 节点状态, 'open' 或者 'closed'.
• attributes: 绑定到节点的自定义属性.
• target: 目标 DOM 对象.

NameParametersDescriptiononClicknode当用户点击节点的时候触发. 示例代码:

$('#tt').tree({
	onClick: function(node){
		alert(node.text);  // alert node text property when clicked
	}
});

onDblClicknode当用户双击一个节点的时候触发.onBeforeLoadnode, param当一个请求加载数据在前触发, 返回false取消加载动作.onLoadSuccessnode, data当数据加载成功之后触发.onLoadErrorarguments当数据加载失败触发,arguments参数和ajax jQuery 的'error'一样 .onBeforeExpandnode节点展开之前触发,返回false取消展开动作.onExpandnode当节点展开之后触发.onBeforeCollapsenode节点折叠之前触发,返回false将取消折叠动作.onCollapsenode当节点折叠之后触发.onChecknode, checked当用户点击checkbox的时候触发.onBeforeSelectnode节点被选中之前触发,返回false取消选择动作.onSelectnode当节点选中之后触发.onContextMenue, 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>

onDroptarget, source, point当节点被放置的时候触发.
target: DOM 对象,这个节点是被放置的目标.
source: 源节点.
point:指明drop操作,可用值有: 'append','top' or 'bottom'.onBeforeEditnode在编辑节点之前触发.onAfterEditnode编辑节点之后触发.onCancelEditnode取消编辑动作时候触发.

 

三、方法

NameParameterDescriptionoptionsnone返回tree 的options.loadDatadata加载tree数据.getNodetarget得到特定的节点对象.getDatatarget得到特定节点数据, 包含其子节点.reloadtarget重新加载tree数据.getRootnone得到根节点, 返回节点对象getRootsnone得到根节点, 返回节点数组.getParenttarget得到父节点,target参数指明节点DOM对象.getChildrentarget得到子节点,target 参数指明节点DOM对象.getCheckednone得到所有选中节点.getSelectednone得到选择节点和返回它,如果没有选择节点将返回null.isLeaftarget解决特定的节点是否是叶子节点, target 参数指明节点DOM对象.findid 查找特定的节点和返回节点对象,代码示例:

// 查找一个节点然后返回它
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);

selecttarget选择一个节点,target 参数指明节点DOM对象.checktarget设置特定的节点选中.unchecktarget设置特定的节点取消选中.collapsetarget折叠一个节点, target 参数指明节点DOM对象.expandtarget展开一个节点, target 参数指明节点DOM对象,当节点的状态是closed的时候 和没有子节点,节点id值(参数命名为'id')将发送给服务器请求子节点数据.collapseAlltarget折叠所有节点.expandAlltarget展开所有节点.expandTotarget展开从根节点到指定的节点 .appendparam附加一些子节点到父节点中. 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'
		}]
	}]
});

toggletarget切换expanded/collapsed 节点的状态,target 参数指明节点DOM对象.insertparam插入一个节点到特定节点的之前或之后.'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'
		}
	});
}

removetarget移除一个节点和其子节点,target 参数指明节点DOM对象.poptarget移除一个节点和其子节点,这个方法和remove类似,但是它返回移除的节点数据.updateparam更新特定的节点. 'param'参数包含以下属性:
target(DOM 对象, 更新的节点),id,text,iconCls,checked,等等.

示例代码:

// 更新选择的节点文本
var node = $('#tt').tree('getSelected');
if (node){
	$('#tt').tree('update', {
		target: node.target,
		text: 'new text'
	});
}

enableDndnone启用 drag 和 drop 功能.disableDndnone禁用 drag 和drop 功能.beginEdittarget开始编辑一个节点.endEdittarget结束编辑一个节点.cancelEdittarget取消编辑一个节点.