ZTree异步加载树结构

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);

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

原文地址：https://www.cnblogs.com/yifanSJ/p/9117389.html