ZTree学习（二）：异步加载树结构

一，使用场景

遇到这种大数据加载，特别的树结构，而且是在弹出层中加载的，就会出现闪一下或者是卡主的情况，所以选择异步加载。

 

二，异步加载使用关键，还是在setting参数上

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：如果请求的url是带参数的，此值就填写参数名称，当然如果是异步加载，这个是一定有，这个是一个数组来的，如果有多个参数，那么形式就是["1","2","3"]
enable:true, 表示是否使用异步加载，当然是true了。
type:"post",请求方式，是post还是get，一般都是post。
url:getUrl，这个url的值一定不可以写"",一定要记住，记住，记住。当然想我这里写一个方法，其实我这里是一个空方法。是可以的。
dataFilter:filter,这个参数非常重要。重要到哪里，我们一会儿单独说。
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);
到这里，一个简单的异步加载就完成了。

 

 

三：遇到的问题

每次异步加载之后，老是会出现一个undefined节点，没有缘由的出现，解决办法是设定

dataFilter:filter,这个参数非常重要。重要到哪里，我们一会儿单独说。
是的，没有错，就是设置了dataFilter，虽然filter方法中什么都没有写，但是这个问题确实是解决了。

 

给文章转载自以下地址，并非本人心得：https://blog.csdn.net/u010951692/article/details/51833077