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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页