Ext tree 节点的新增和移除

最近在用Extjs树,实现了机构下面挂人,现在需要对选中人员可以进行移除和新增操作。查询API发现,获取父级节点,调用 removeChildappendChild方法可以实现增删,这里记录下来,方便备查。
Ext 树创建的js程序代码

Ext.define("Ext.Demo.Panel", {
	extend : "Ext.tree.Panel",
	rootVisible : false,
	urlSrc : "/rygl/syd/load?theme=none",
	initComponent : function() {
		var me = this;
		var store = this.createTreeStore(urlsrc);
		this.store = store;
		this.callParent(arguments);
	},
	//创建树节点的store
	createTreeStore : function(urlstr) {
		var me = this;
		var treeStore = Ext.create('Ext.data.TreeStore', {
			//autoLoad : true,
			fields : [//叶子model属性,可扩展
			{
				name : 'id'
			}, {
				name : 'text' 
			}, {
				name : 'leaf'
			},
			proxy : {
				type : 'ajax',
				url : urlstr,
				reader : {
					type : 'json',
					root : 'DT'
				}
			},
			sorters : [{
				property : 'pindex',
				direction : 'ASC'
			}],
			root : {
				nodeType : 'async',
				text : me.paraText,
				expanded : true
			}
		});
		return treeStore;
	},
	//渲染
	onRender : function(ct, position) {
		this.callParent(arguments);
	}

对树上节点的新增和删除,都需要获取父级节点,调用 removeChildappendChild 方法来实现。

移除

1、获取选中的节点

var checkedRecords = this.getSelectionModel().getSelection();

2、获取选中节点的父节点

var parentNode = checkedRecords[0].parentNode;

3、removeChild 方法直接移除

parentNode.removeChild(checkedRecords[0])
新增

1、 新增加节点对象

var newNode = Ext.create('Ext.data.NodeInterface',{
	leaf: true
});

2、获取选中的节点

var checkedRecords = this.getSelectionModel().getSelection();
//当前选中节点的父ID 
var parentId = records[0].data.id;

3、根据parentId获取父节点

var parentNode = this.getStore().getNodeById(parentId);

4、创建节点 并对应节点的信息

var newNode = parentNode.createNode(newNode);
newNode.set("parentId",parentId);
newNode.set("id",records[0].data.id);
newNode.set("checked","true");
newNode.set("leaf",true);

5、将节点插入到对应的位置

parentNode.appendChild(newNode);

构建的机构树如下图所示:
在这里插入图片描述

博客来源:

【1】https://blog.csdn.net/littlechang/article/details/7771453

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值