layui树组件根据jsion数据动态添加树节点

layui的树状组件（Tree控件）可以根据JSON数据动态地加载和渲染树节点。JSON数据通常需要包含每个节点的层级结构以及标识信息，例如"children"属性用于表示子节点数组，而"id"或"name"等属性则代表节点的唯一标识。

以下是使用layui Tree组件动态添加节点的基本步骤：

1. 初始化树组件：

   layui.use('tree', function() {
       var tree = layui.tree;
       // 创建一个树容器
       var treeObj = tree.render({
           elem: '#treeDemo', // 渲染元素的选择器
           data: [], // 初始的数据，可以是一个已填充好数据的对象数组
           method: 'getNodes', // 数据获取方法名
           init: true // 是否初始化即渲染一次，默认为true
       });
   });

2. 定义数据获取方法 `getNodes`：

   function getNodes(treeId, callback) {
       // 模拟异步获取JSON数据
       setTimeout(function() {
           var nodesData = [
               { id: '1', name: '根节点1', children: [{ id: '2', name: '子节点1' }] },
               { id: '3', name: '根节点2', children: [] } // 空的子节点表示无子项
           ];
           callback(null, nodesData);
       }, 500);
   }

3. 当数据变化时，动态添加节点：

   function addNode(data) {
       // 将新数据传入到 `treeObj` 的 `refresh` 方法，实现节点的添加
       treeObj.refresh({ parents: data.parentId || '', node: data });
   }
   
   // 示例：当有新的json数据时，通过addNode函数添加到树上
   let newNode = { id: '4', name: '新增节点', parentId: '1' };
   addNode(newNode);