easyui tree基本操作
特定的业务场景,树控件节点全部采用异步方式加载,涉及到树控件节点的增,删,改操作,代码备忘
首先要初始化一个根节点,并注册节点单击事件以及数据加载完成后默认选择选择第一个子节点。
<ul id="tree" class="easyui-tree"
data-options="data: [{text: '根节点',id: 'root'}],
animate:true,
onClick:treeClick,
lines: true,
onLoadSuccess: function (node, data) {if(data.length>2){var n = $('#tree').tree('find', data[0].id);$('#tree').tree('select', n.target);}}">
根据异步获取的后端数据增加节点
function buildTree(data) {
remove();
var selected = $('#tree').tree('getSelected');
var nodes = [];
var ldata = eval(data);
for (var d = 0; d < ldata.length; d++) {
var objNode = {};
objNode.id = "init-" + ldata[d].IDENTITY;
objNode.text = ldata[d].NAME;
nodes.push(objNode);
}
$('#tree').tree('append', {
parent: selected.target,
data: nodes
});
}
修改节点
function UpdateNode(content) {
var selected = $('#tree').tree('getSelected');
$('#tree').tree('update', {
target: selected.target,
text: content
});
}
删除节点,删除除初始化的根节点外所有子节点
function remove() {
var objTree = $("#tree");
var root = objTree.tree('find', 'root');
var children = objTree.tree('getChildren', root.target);
for (var temp in children) {
objTree.tree('remove', children[temp].target);
}
objTree.tree('select', root.target);
}