场景
最近在使用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();
}
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。