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