zTree（三）异步加载节点数据（非官方实例方法）

功能需求

1、实现树状图显示终端
2、实现异步加载显示节点数据（数据量可能达到2w）
3、默认树状图接口是组织、异步加载节点数据是终端

技术分析

1、还是采用zTree插件
2、基于组织、终端关系不采用官方异步加载实例
3、基于现状采用zTree.addNodes 方法

开工

引入文件包我就不放进去了

html

<div class="ztree">
    <ul id="treeTerm" ></ul>
</div> 

js

//数据
//数据是普通json数据，有一点要注意就是因为是根据组织查询终端，所以需要简单处理
//通过termNum是否大于0（也就是有终端）,添加父节点为true
var orgList =[
    {
        id:3006334,
        pId:0,
        name:"研发二部",
        orgCode:    "000-0000-00000003006334",
        orgName:    "研发二部",
        parentCode: "0",
        termNum:    9,          
    },
    {
        id:3015724,
        pId:3006334,
        name:"研发一组",
        orgCode:    "000-0000-00000003015724",
        orgName:    "研发一组",
        parentCode: "000-0000-00000003006334",
        termNum:    0,

    },
    {
        id:3011478,
        pId:3015724,
        name:"研发1",    
        orgCode:    "000-0000-00000003011478",
        orgName:    "研发1",
        parentCode: "000-0000-00000003015724",
        termNum:    1
    }
]
for(var i in orgList){
    if(orgList[i].termNum > 0){
        orgList[i].isParent = true;
    }
}
//配置项 配置一下展开方法
var setting = {       
   data: {
        simpleData: {
            enable: true
        }
    },
    //回调
    callback: {
        onExpand: zTreeOnExpand
    }

};
//点击展开项
function zTreeOnExpand(event,treeId, treeNode) {       
     addNodes(treeNode);       
 } 
//添加节点  第一次展开的时候
function addNodes(treeNode){
    var param = {'orgCode':treeNode.orgCode};
    var treeObj = $.fn.zTree.getZTreeObj("treeTerm");
    var parentZNode = treeObj.getNodeByParam("id", treeNode.id, null);//获取指定父节点
    var childNodes = treeObj.transformToArray(treeNode);//获取子节点集合
    //因为子节点还包括组织，所以这里需要筛选一下
    // console.log(childNodes);
    var key = false;
    for(var i in childNodes){
        if(childNodes[i].udn){//如果当前组织有终端 就不再加载
            key = true;
            break;
        }                  
    }
    if(!key){//如果不存在  就加载(第一次加载)
        $.ajax({
            method:'post',
            url: ip + 'mgmt/getTerm.do',
            data:JSON.stringify(param),
            success:function(res){
                var data = JSON.parse(res);
                if(data.termList){
                    data = data.termList; 
                }else{
                    data=[];
                }                                           
                for(var i in data){
                    var orgCode = (data[i].orgCode).substring((data[i].orgCode).length - 7);                  
                    orgCode = Number(orgCode);
                    data[i].id = Number(data[i].udn);
                    data[i].pId = orgCode;
                }
                treeObj.addNodes(parentZNode,data, false);    //添加节点                           
            }
        })
    }
}
//初始化
$(function(){
  $.fn.zTree.init($("#treeTerm"), setting, orgList);
})

完成效果