Ext.jsTree 向子节点添加叶子节点

// 定义搜索节点树结构Store

const nodeStore = Ext.create('Ext.data.TreeStore',
{
　　autoLoad : true,
　　id : 'nodeStoreTreeId',
　　fields : ['index', 'nodeId', 'name_or_index', 'to_node', 'type'],
　　proxy : {
　　　　type : 'memory',
　　　　reader : {
　　　　　　type : 'json',
　　　　}
　　},
　　root : {
　　　　text : '根节点',
　　　　expanded : true
　　},
　　folderSort : true,
});

 

// 搜索子节点展示树结构面板

const nodeTreePanel = Ext.create('Ext.tree.TreePanel',{

　　title : '子节点树结构图',
　　id : `${data.title}NodeTreeId`,
　　width : '45%',
　　height : 400,
　　region : 'east',
　　collapsed : false,
　　collapsible : false,
　　closeAction : 'hide',
　　useArrows : true,
　　rootVisible : false,
　　autoScroll : true,
　　autoShow : true,
　　animate : true,
　　store : nodeStore,

　　listeners   : {　　// 主要就是这个监听事件

　　　　// 展开之后触发 afteritemexpand

　　　　'afteritemexpand' : function(itme, index)
　　　　{

　　　　　　// 准备的参数或者其他数据，我这边需要一个nodeId

　　　　　　const nodeId = itme.data.nodeId;

　　　　　　// 通过这个nodeId获得当前节点下的子节点数据。

　　　　　　const Result = heapNodeSerialize(jsHeapSnapShot[data.title], nodeId);

　　　　　　// 处理添加新的子节点
　　　　　　for (let i = 0; i < itme.parentNode.childNodes.length; i++)
　　　　　　{
　　　　　　　　const everyChildNode = itme.parentNode.childNodes[i];
　　　　　　　　const everyChildNodeId = everyChildNode.data.nodeId;
　　　　　　　　if (everyChildNodeId == nodeId)
　　　　　　　　{
　　　　　　　　　　// 首次展开需要添加子节点。
　　　　　　　　　　for (let j = 0; j < everyChildNode.parentNode.childNodes.length; j++)
　　　　　　　　　　{
　　　　　　　　　　　　const everyGrandsonNode = everyChildNode.parentNode.childNodes[j];
　　　　　　　　　　　　// 已经加载过子节点的值，后面再次展开无需再加载。
　　　　　　　　　　　　if ((everyGrandsonNode.data.nodeId == nodeId) && everyGrandsonNode.childNodes.length == 0)
　　　　　　　　　　　　{
　　　　　　　　　　　　　　// 将叶子节点数据设置到子节点里面。

　　　　　　　　　　　　　　// 前面都是数据处理，这个才是向子节点添加子节点的地方。
　　　　　　　　　　　　　　everyChildNode.appendChild(Result);
　　　　　　　　　　　　}
　　　　　　　　　　}
　　　　　　　　}
　　　　　　}　

　　　　}

　　}

});

 

// 效果图

　　　　　　　　　　　　　　　　　　　　　　　图·1

 

// 期间遇到的问题

1、之前将使用的是itemclick事件，后来换成了 afteritemexpand 点击展开后触发事件，监听itemclick事件

　  存在使用不怎么友好的问题。

2、当遇到子节点被重复展开触发事件，会出现前面其他子节点同样的子节点和现在的子节点一样的节点

　  数据会出现乱窜问题。（这里可能有点绕-看下图·2）：决解方案：在已经展开的节点上面做记录，如果

      重复展开并且后面的数据是一样的，可直接return。这样避免了数据乱窜的问题。

　　　　　　　　　　　　　　　　　　　　　　图·2