场景

最近在使用G6 TreeGrap展示树形结构数据的时候,由于节点数量比较多,导致页面卡顿,甚至崩溃,最后不得不考虑懒加载的形式加载节点,每次点击节点动态的增加子级节点。

实现代码

通过对当前节点的children赋值然后调用graph.changeData()方法即可

// .....
// 节点点击事件
graph.on("node:click", function (evt) {
        const item = evt.item;
        const nodeId = item.get("id");
        console.log(nodeId);
        const model = item.getModel();
        const children = model.children;
        if (!children || children.length === 0) {
          //点击节点获取下级节点接口
          //...........
          const parentData = graph.findDataById(nodeId);
          if (!parentData.children) {
            parentData.children = [];
          }
          // 如果childData是一个数组,则直接赋值给parentData.children
          // 如果是一个对象,则使用parentData.children.push(obj)
          parentData.children = childData;
          graph.changeData();
        }
      });

fuGUI
1.6k 声望1.9k 粉丝

The best time to plant a tree is ten years ago, and the second,let us start