ZTree异步加载树结构

Posted 2020-11-09 yifansj

var setting = {
    async:{
        autoParam:["parentId"],      
        enable:true,     
        type:"post",      
        url:getUrl,    
        dataFilter:filter,    
    },    
    check : {    
        chkStyle: "radio",    
        enable: false,    
        chkboxType : { "Y" : "s", "N" : "ps" },    
        radioType : "level"    
    },    
    view: {    
        dblClickExpand: false,    
        addDiyDom:addDiyDom    
    },    
    data : {    
        key : {    
            name : "unitName"    
        },    
        simpleData : {
            enable : true,    
            idKey : "id",    
            pIdKey : "parentId",    
            rootPId : 0    
        }    
    },    
    callback : {
        beforeAsync : ztreeBeforeAsync,    
        onAsyncSuccess : ztreeOnAsyncSuccess,    
        onClick:ztreeOnAsyncSuccess    
    }    
};    

最关键的部分就是async参数设置上的部分还有callback中onAsyncSuccess的设置上

autoParam：异步加载时需要自动提交父节点属性的参数。

enable:true, 设置 zTree 是否开启异步加载模式

type:"post", Ajax 的 http 请求模式。

url:getUrl，Ajax 获取数据的 URL 地址。设置固定的异步加载 url 字符串（例子中是一个空方法。是在onAsyncSuccess中再加载，比较麻烦）

dataFilter:filter,用于对 Ajax 返回数据进行预处理的函数。

onAsyncSuccess:ztreeOnAsyncSuccess, 用于捕获异步加载正常结束的事件回调函数

function ztreeOnAsyncSuccess(event, treeId, treeNode){    
    var url = "unitAction!xzqhTree.action?parentId=";    
    if(treeNode == undefined){    
        url += "1";    
    }    
    else{    
        url += treeNode.id;    
    }    
    $.ajax({    
        type : "post",    
        url : url,    
        data : "",    
        dataType : "json",    
        async : true,    
        success : function(jsonData) {                  
            if (jsonData != null) {         
                var data = jsonData.unitList;    
                if(data != null && data.length != 0){    
                    if(treeNode == undefined){    
                        treeObj.addNodes(null,data,true);// 如果是根节点，那么就在null后面加载数据    
                    }    
                    else{    
                        treeObj.addNodes(treeNode,data,true);//如果是加载子节点，那么就是父节点下面加载    
                    }    
                }    
                treeObj.expandNode(treeNode,true, false, false);// 将新获取的子节点展开    
            }    
        },    
        error : function() {    
            alert("请求错误！");    
        }    
    });    
};   

就是一个简单的ajax请求。

还有就是在JS的初始化中把树结构初始化一下  $.fn.zTree.init($("#chooseXzqhTree"), setting);

到这里，一个简单的异步加载就完成了。