最近在用Extjs树,实现了机构下面挂人,现在需要对选中人员可以进行移除和新增操作。查询API发现,获取父级节点,调用 removeChild 和 appendChild方法可以实现增删,这里记录下来,方便备查。
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);
}
对树上节点的新增和删除,都需要获取父级节点,调用 removeChild 和 appendChild 方法来实现。
移除
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