LayUi 树形组件tree 实现懒加载模式,展开父节点时异步加载子节点数据
('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'
}]);
}
}
// ();
// ();
// ();
}
});
});