LayUi 树形组件tree 实现懒加载模式,展开父节点时异步加载子节点数据

时间:2025-04-02 16:27:06
('tree', function () { var tree = ; //渲染 var inst1 = ({ elem: '#treelist' , id: 'treelist' , showCheckbox: !1 //复选框 , showLine: !0 //连接线 , accordion: !1 //手风琴模式 , onlyIconControl: !1 //左侧图标控制展开收缩 , isJump: !1 //弹出新窗口跳转 , edit: !1 //开启节点的操作 , data: [{ id: '144115188075855872' , title: '哈尔滨市第三中学' , spread: true , children: [{ id: '144396663052566528' , title: '2016级学生' , children: [{ id: '144397762564194304' , title: '2016级一班' }, { id: '144398862075822080' , title: '2016级二班' }, { id: '144399961587449856' , title: '2016级三班' }] }] }, { id: '144678138029277184' , title: '教职工' , spread: false , children: [] }] , text: { defaultNodeName: '无数据' , none: '加载数据失败!' } , click: function (obj) { (); //得到当前点击的节点数据 // (); //得到当前节点的展开状态:open、close、normal // (); //得到当前节点元素 // (); //当前节点下是否有子节点 } , oncheck: function (obj) { (); //得到当前点击的节点数据 (); //得到当前节点的展开状态:open、close、normal (); //得到当前节点元素 } , spread: function (obj) { if (!) { // 懒加载子节点,异步获取data数据 这里根据像后台请求当前节点数据 // 这里模拟3层用IF判断来测试,实际不需要 if ( === '144678138029277184') { //第二层节点数据 (, , [{ id: '101' , title: '子节点1' }, { id: '102' , title: '子节点2' , spread: false , children: [] }]); } if( === '102'){ //第三层节点数据 (, , [{ id: '10201' , title: '子节点3' }, { id: '10202' , title: '子节点4' , spread: false , children: [] }]); } if( === '10202'){ //第四层节点数据 (, , [{ id: '1020201' , title: '子节点5' }, { id: '1020202' , title: '子节点6' }]); } } // (); // (); // (); } }); });