ztree 数据量较大时实现节点分级懒加载

配置：

var setting = {
            check: {
                enable: false
            },
            async: {
                enable: true,
                type: "get",
                headers: Util.getHeader(),
                url: URL ,
                autoParam: ["ID"],//多个参数用英文逗号隔开；
                otherParam: {"otherParam": "zTreeAsync"},
                dataFilter: filter
            },
            data: {
                //自定义数据结构
                key: {
                    name: "NAME",
                    isParent: "IS_PARENT",
                },
                simpleData: {
                    enable: true,
                    idKey: "ID",
                    pIdKey: "PARENT_ID",
                    //根节点ID
                    rootPId: '我是根节点ID'
                }
            },
            callback: {
                //树点击事件
                onClick: zTreeOnClick,
                //树延迟加载事件
                onAsyncSuccess: zTreeOnAsyncSuccess
            }
        };
        // 数据处理回调函数
        function filter(treeId, parentNode, childNodes) {
            //数据处理start ==
            if (!childNodes) return null;
            for (var i=0, l=childNodes.length; i<l; i++) {
                childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
            }
            //数据处理end ==

            //todo ==这里如果返回的数据是完全可用（即不需要处理），可以省略逻辑处理，直接返回；
            return childNodes;
        }

 方法实现：

    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
        if (!tree) {
            alert("error!");
            return
        }
        var selectedNode = tree.getSelectedNodes();
        var nodes = tree.getNodes();
        tree.expandNode(nodes[0], true);
    }

    //树节点的点击事件
    function zTreeOnClick(treeId, treeNode, clickFlag) {
        alert("点击！")
    };

 下面的根据自己所用框架见机行事：

        $.ajax({
            url: url,
            type: 'GET',
            data: 我是参数,
            //请求头中添加日志uuid
            headers: getHeader(),
            dataType: "json",
            async: !sync,
            timeout: 我是超时时间,
            beforeSend: function (xhr) {
                xhr.overrideMimeType("text/plain; charset=utf-8");
            },
            success: function (data, textStatus, xhr) {

                //主逻辑
                if (!data) {
                    return;
                }
				var result = data.RSP.DATA;
				//启动树节点
				tree = $.fn.zTree.init($("#treeDemo"), setting, result);
				var nodes = tree.getNodes();
				tree.expandNode(nodes[0], true, false);
               
            },
            error: function (xhr, textStatus, errorThrown) {
				alert("error!");
            }
        });

async 属性解析：

• enable: true — 设置 zTree 是否开启异步加载模式
• url:"./resource/json/getNodes.json" — Ajax 获取数据的 URL 地址
• autoParam:["id", "name=name"] — 异步加载时(初始化时不需要)需要自动提交父节点属性的参数

            1、将需要作为参数提交的属性名称，制作成 Array 即可，例如：["id", "name"]

            2、可以设置提交时的参数名称，例如 server 只接受 zId : ["id=zId"]

• otherParam:{"otherParam":"zTreeAsyncTest"} — Ajax 请求提交的静态参数(初始化请求、异步加载请求时都会有此参数)

                可以为空[ ]，如果有 key，则必须存在 value。 例如：[key, value]

• type: 'get' — 获取数据的方法
• dataFilter: filter — 用于对 Ajax 返回数据进行预处理的函数

callback属性解析：

• beforeClick: 方法名 - 用于捕获单击节点之前的事件回调函数，并且根据返回值确定是否允许单击操作

• beforeAsync: 方法名 - 用于捕获异步加载之前的事件回调函数，zTree 根据返回值确定是否允许进行异步加载

• onAsyncSuccess: 方法名 — 用于捕获异步加载正常结束的事件回调函数

• onClick: 方法名 — 用于捕获节点被点击的事件回调函数

 

 

踩坑：如果没有设置autoParam，或者autoParam设置的不对，会出现zTree层级不对（比如每次点击子节点会多加载数据）

参考：https://www.cnblogs.com/zero-zm/p/9911573.html