合规国际互联网加速 OSASE为企业客户提供高速稳定SD-WAN国际加速解决方案。 广告
解决LayUI重载数据 经过试验发现 ## 方案场景 最近公司项目上接到了一个这样的需求,即需要将一个一对多的[数组](https://so.csdn.net/so/search?q=%E6%95%B0%E7%BB%84&spm=1001.2101.3001.7020)对象使用表格的形式进行展示,并且能够对表格的记录进行操作。听罢,我当即就想到了这是一棵只有两级的树,并且在表格中点击父节点时需要展示子节点。平常在工作中经常使用的layui表格在这里就无法使用了,因为它没有表格树的功能,只能展示一对一联查得到的数据。 ![3e3ff4e7c33eab33eedded502406c5e2.png](https://img-blog.csdnimg.cn/img_convert/3e3ff4e7c33eab33eedded502406c5e2.png) 采用关键点 treetable-lay组件要求的数据格式比较特殊,如下所示: ~~~clojure { "code": 0, "msg": "ok", "data": [ { "id": 1, "name": "xx", "sex": "male", "pid": -1, "open": true, "updateTime": "2018/07/21 13:56:43", "state": 0 }, { "id": 2, "name": "xx", "sex": "male", "pid": 1, "open": true, "updateTime": "2018/07/21 13:56:43", "state": 0 }, { "id": 3, "name": "xx", "sex": "male", "pid": 1, "open": true, "updateTime": "2018/07/21 13:56:43", "state": 0 }, { "id": 4, "name": "xx", "sex": "male", "pid": 1, "open": true, "updateTime": "2018/07/21 13:56:43", "state": 0 }, { "id": 5, "name": "xx", "sex": "male", "pid": -1, "open": true, "updateTime": "2018/07/21 13:56:43", "state": 0 }, { "id": 6, "name": "xx", "sex": "male", "pid": 5, "open": true, "updateTime": "2018/07/21 13:56:43", "state": 0 }, { "id": 7, "name": "xx", "sex": "male", "pid": 5, "open": true, "updateTime": "2018/07/21 13:56:43", "state": 0 }, { "id": 8, "name": "xx", "sex": "male", "pid": 6, "open": true, "updateTime": "2018/07/21 13:56:43", "state": 0 }, { "id": 9, "name": "xx", "sex": "male", "pid": 6, "open": true, "updateTime": "2018/07/21 13:56:43", "state": 0 }, { "id": 10, "name": "xx", "sex": "male", "pid": 9, "open": true, "updateTime": "2018/07/21 13:56:43", "state": 0 }, { "id": 11, "name": "xx", "sex": "male", "pid": 9, "open": true, "updateTime": "2018/07/21 13:56:43", "state": 0 } ], "count": 11} ~~~ 分析 具体解决办法访问 https://blog.csdn.net/weixin_39934063/article/details/110251797 这里提供该源码的地址:https://gitee.com/whvse/treetable-lay 其它三个树LayUI树的展示 ##[ layui使用tree实现树形下拉菜单](https://blog.csdn.net/m0_46629316/article/details/117261384) https://blog.csdn.net/m0_46629316/article/details/117261384 https://blog.csdn.net/qq_33347814/article/details/103404646 https://blog.csdn.net/ii950606/article/details/109400855/ # # # 解决LayUi tree 树形组件重载:方案一 ~~~javascript var inst1 = tree.render({ elem: '#div' //绑定元素 , data: jsonData , id: "treeID" }); ~~~ 1.你在声明树组件的时候让一个变量接着; ~~~javascript // jsonData是树组件的数据 inst1.config.data = jsonData; // //重载实例 tree.reload('treeID'); ~~~ 2.重载的时候,用inst1.config.data  重新给他赋值,然后,tree.reload('treeID');就行了; > **treeID是我在声明树组件的时候id赋的值;** # 解决LayUi tree 树形组件重载:方案二 ~~~javascript tree.reload('treeID',{ data: jsonData }); ~~~ 没错,这才是官方的正确写法 > **treeID是我在声明树组件的时候id赋的值;** > > **jsonData是树组件的数据源**