dtree.js 树结构点击父节点异步加载子节点数据

由于此次项目开发框架使用layui，树结构自然想到了使用dtree,功能需求是选择省份下的企业，由于企业数据达到上万家，一次性将所有的数据加载出来会造成页面卡顿，由此想到先加载行政区划再根据点击事件获取企业数据：
解决思路：
① 、先使用dtree.render() 封装行政区划树结构，此处要注意树结构数据格式，dtree官网提供快速使用方法
②、参考官网提供右键选择工具栏(toolbarFun)对节点进行增删改查的方法，对源码稍作提炼异步加载子节点

一、参考文档示例：
1、初始化树结构， 由于功能需要使用复选框，故参考lis集合数据结构，返回结果一定要有checkArr，不然复选框无法生成。

2、异步加载子节点

3、使用方法注意点

二、具体实现方法如下：

 var regionEnpTree = getRegionEnpTree(dtree, 'regionEnpTree');//获取行政区划调用方法
//    var param = dtree.getCheckbarNodesParam("regionEnpTree");  // 获取选中数据
/**
 * 获取行政区划树结构，点击子级获取企业
 * dtree 模块名称
 * treeId 组件容器id
 * initRegionCode 初始化行政区划选中值(编辑页面回显赋值时传值，无默认选中值可不填)
 * initEnpCode 初始化企业选中值(编辑页面回显赋值时传值，无默认选中值可不填)
 **/
function getRegionEnpTree(dtree, treeId, initRegionCode, initEnpCode) {
    var regionEnpTree = null;
    $.get('行政区划树结构接口地址', {}, function(initData){
        if (initData.data && initData.data.length>0) {
        //此处循环是因为后台返回接口无法添加checkArr字段，故前端循环封装处理，若后台返回有checkArr字段，此段代码可不要
            $.each(initData.data,function (index,value) {
                value.checkArr = [{"type": "0", "checked": "0"}];
                value.parentId = -1;
                $.each(value.children,function (a,b) {
                    b.checkArr = [{"type": "0", "checked": "0"}];
                    $.each(b.children,function (x,y) {
                        y.checkArr = [{"type": "0", "checked": "0"}];
                    })
                })
            });
            regionEnpTree = dtree.render({
                elem: "#"+treeId,
                data: initData.data,
                method:'GET',
                url:'/getEnpByReg', //根据行政区划节点获取企业数据接口，需调用自己服务器地址
                width:470, //容器宽度
                dataStyle: "layuiStyle",  //使用layui风格的数据格式
                menubar: false, //开启菜单栏
                checkbar:true, //开启复选框
                record:true, //开启添加额外参数
                done: function (res, $ul, first) {
                    //点击非该元素操作区域隐藏弹出层
                    $(document).click(function(event){
                        var _con = $("input[dtree-id="+treeId+"]");
                        if(!_con.is(event.target) && _con.has(event.target).length === 0){
                            $('.layui-card.dtree-select').removeClass('dtree-select-show');
                        }
                    });
                    if(initRegionCode){
                        dtree.dataInit(treeId, initRegionCode); //初始化赋值
                        dtree.selectVal(treeId, initRegionCode); //初始化选中值
                    }
                }
            });

            dtree.on("node("+treeId+")" ,function(obj){ //点击节点事件
                if(obj.param.leaf){
                    var $div = obj.dom, $ul = $div.next("ul");
                    regionEnpTree.url = '/getEnpByReg'; //参考源码给regionEnpTree的url添加接口地址，需调用自己服务器地址，可在控制台输入regionEnpTree查看具体返回结果
                    $.get('/getEnpByReg', {nodeId:obj.param.nodeId},  function (jsonData) { //此处需注意，参数名必须为nodeId
                        if(jsonData.data && jsonData.data.length > 0){
                            var nodeJson = []; //动态构造字节点数据结构
                            $.each(jsonData.data,function (x,y) {
                                regionEnpTree.temp = [y.code, $ul, $div, Number(obj.param.level)+1];
                                nodeJson.push({
                                    checkArr: [],
                                    children: [],
                                    iconClass: null,
                                    id: y.code,
                                    isLast: true,
                                    parentId: obj.param.nodeId,
                                    title: y.name
                                });
                            });
                            regionEnpTree.toolbarFun.addTreeNode(nodeJson,$div); // 调用toolbarFun 的addTreeNode方法异步加载数据
                            regionEnpTree.changeTreeNodeAdd("refresh") ；//重新渲染子节点
                        }
                    })
                }
            });
        }
    });
    return regionEnpTree
}

三、接口返回结果及效果参考
1、行政区划接口返回结果

2、企业节点接口返回结果

3、效果