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);
            }
          }
        }
      } 

    }

  }

});

// 效果图

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

                       图·1

// 期间遇到的问题

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

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

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

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

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

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

                      图·2

上一篇:Matlab 绘制三维立体图(以地质异常体为例)


下一篇:speedtest测速网站测速节点添加流程