layui tree树形数据加载缓慢的问题（已解决） 懒加载 数据分批加载

一级标题

layui呈现树形：

//暂存已经查询到的节点，用于后边数据整合（全局变量）
var temp;
//暂存已经查询到的节点的id，用于后边节点的展开（全局变量）
var arrSwjgDm = [];

//树形填充数据
var treeData;


//树形图加载第一步（先加载三层）
 $.post('/dagdgl/****/*****', function (res) {
    
    
            if(res.rtnCode == '200'){
    
    
                temp = res.data.array;
                arrSwjgDm.push(res.data.swjgDm);
                treeData = layui.treeTable.pidToChildren(temp, 'id', 'pid');
                inst = tree.render({
    
    
                    elem: '#organizationTree',
                    onlyIconControl: false,
                    data: treeData,
                    id:'treeId',
                    click: function (obj) {
    
    
                        selObj = obj;
                        $('#organizationTree').find('.ew-tree-click').removeClass('ew-tree-click');
                        $(obj.elem).children('.layui-tree-entry').addClass('ew-tree-click');
                        swjgDmSelected = obj.data.id;
                        sum =  treeData[0].id;
                    }
                });
            }else {
    
    
                layer.msg("树初始化失败！", {
    
    icon: 2});
            }
        });

单击树节点触发事件回调:

/**
     * 单击树节点触发事件
     */
    $(document).on("click",".layui-tree-main",function(){
    
    
    
        var swjgDm = $(this).parent("div").parent("div").find("data-id").prevObject[0].dataset.id;

//判断暂存节点，防止重复点击回调
        if(arrSwjgDm.indexOf(swjgDm) == -1){
    
    
            var arr = [];
            $.ajax({
    
    
                type: "POST",
                url: '/dagdgl/zzdarkgl/querySwjgTreeChilds',
                async: false,//下一步需要等待此状态的返回值再进行操作，需要使用同步方式
                data: {
    
    
                    swjgDm: swjgDm
                },
                success: function (res) {
    
    
                    if (res.rtnCode == '200') {
    
    
                    //将已经点击的节点暂存
                        arrSwjgDm.push(swjgDm);
                        //使点击过的节点都呈现展开状态
                        for(var i = 0; i < temp.length; i++){
    
    
                            if(arrSwjgDm.indexOf(temp[i].id) != -1){
    
    
                                temp[i].spread = true;
                            }
                        }
                        //数据整合
                        temp = temp.concat(res.data)
                        treeData = layui.treeTable.pidToChildren(temp, 'id', 'pid');
                        //树刷新
                        tree.reload('treeId',{
    
     data: treeData });
                    }
                }
            });
        }
    });

数据格式：

（注：数据为乱写，只看格式就好）

temp  = [
	{
		id: '12456968',
		name: 'name1',
		pid: '1236485455'   //父节点
	},
	{
		id: '12456984668',
		name: 'name2',
		pid: '65465451456'  
	},
	{
		id: '12456984668',
		name: 'name2',
		pid: '65465451456'  
	}
]；

treeData = [
			{
		id: '12456968',
		name: 'name1',
		pid: '1236485455' ,  //父节点
		spread: true,
		children：[
			{
				id: '12456984668',
				name: 'name2',
				pid: '65465451456'  
			}
		]
	}
]

知识点讲解：

1、给这个<div>添加点击事件(根据class添加点击事件)
$(document).on("click",".layui-tree-main",function(){
});

2、获取本<div>的父元素（父元素的父元素中的data-id属性是我们要的id）
$(this).parent("div").parent("div").find("data-id").prevObject[0].dataset.id;

3、layui中自带方法pidToChildren()，文件为treeTable.js
layui.treeTable.pidToChildren(temp, 'id', 'pid');

4、两个数组合并（不去重）
arr1.concat(arr2)