easyUI tree jQuery

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

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

// 右键点击节点然后显示上下文菜单
$(‘#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>

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

// 添加一些节点到选择的节点
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‘
		}]
	}]
});

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

var node = $(‘#tt‘).tree(‘getSelected‘);
if (node){
	$(‘#tt‘).tree(‘insert‘, {
		before: node.target,
		data: {
			id: 21,
			text: ‘node text‘
		}
	});
}

示例代码:

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