easyui _tree的一级子节点节点添加

最新推荐文章于 2022-02-17 16:22:24 发布

翻译最新推荐文章于 2022-02-17 16:22:24 发布 · 5.2k 阅读

本文介绍如何在树形结构中通过JavaScript实现节点的增删改查操作，包括获取当前节点的直接子节点、插入节点、删除节点等方法，并提供了实例代码演示。

参考官网的文档

不提供获得当前节点一级子节点的方法，

var nodeChi = $('#orgTree').tree('getChildren', node.target);

getChildren ：获得当前节点的最后一个子孙节点（一当前展开场景计算）

如果需要在当前节点，的一级节点添加一个新节点，则需要两步1、获得一级节点2、用insert插入该节点

由于不提供获得当前节点一级子节点的方法，so需要自己用到重载

如下：

//tree 获取一级子节点
$.extend($.fn.tree.methods,{
    getLeafChildren:function(jq, params){
            var nodes = [];
            $(params).next().children().children("div.tree-node").each(function(){
                    nodes.push($(jq[0]).tree('getNode',this));
            });
            return nodes;
    }
});

测试：

//获得一级子节点 数组
var nodeChi = $('#orgTree').tree('getLeafChildren', node.target);
if(nodeChi && nodeChi.length>0){
	$('#orgTree').tree('insert', {
		after: nodeChi[nodeChi.length-1].target,//最后一个节点
		data: {
	 		id: nodeid, //nodeid、nodename为插入节点的id和name
	 		text: nodename,
		}
	});
}

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

insert是在当前节点后面插入一个新节点（优点：自动刷新树菜单）

// append some nodes to the selected node
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'
		}]
	}]
});

append 给当前节点添加一个子节点（需要手动刷新树--放弃）