EleTree组件异步加载实现
div id="test1" lay-filter="data1"></div>
<script>
layui.config({
base: "/static/layuiadmin/modules/"
}).use('eleTree', function(){
var $ = layui.$;
var eleTree = layui.eleTree;
var el;
var rootId=0;
//渲染
el=eleTree.render({
elem: '#test1'
,url:"/item/cat/list/"+rootId
,type:'get'
,id: 'demoId1'
,showLine:true
,showCheckbox: true
});
// 节点点击事件
eleTree.on("nodeClick(data1)",function(d) {
$.ajax({
url:"/item/cat/list/"+d.data.currentData.id,
type:'get',
success:function (result) {
var nodes = result.data;
for(var i=0;i<nodes.length;i++){
var node=JSON.parse(JSON.stringify(nodes[i]));//不加这个会出现找不到ID属性的问题?
el.append(d.data.currentData.id,node); } //测试数据
// {
// id: 1,
// label: "安徽省",
// children: []
// }
// console.log(d.data);
// 点击节点对应的数据
// console.log(d.event);
// event对象
// console.log(d.node);
// 点击的dom节点
// console.log(this); // 与d.node相同
}
});
})
});
</script>
优化版
el=eleTree.render({
elem: '#test1'
,url:"/content/find/"+rootId
,type:'get'
,id: 'demoId1'
,lazy: true
,showLine:true
,accordion:false
,checkStrictly: true
,highlightCurrent:true
,defaultExpandAll: true
,contextmenuList: ["add.async","edit","remove"]
,load:function (oldNode,callback) {
$.ajax({
url: "/content/find/" + oldNode.id,
type: 'get',
success: function (result) {
var newNode = result.data;
setTimeout(function () {
callback(newNode);
}, 100);
}
});
}
});