zTree 异步加载实现 点击加载

 效果图如下  每级最多显示5000条数据，点击加载 会再次加载5000条数据

可以监听滚动条 动态加载 我这没实现这种方式。

 

    <!-- ztreejs -->
<script src=".ztree/js/jquery.ztree.core.min.js" type="text/javascript"></script>
<script src="ztree/js/jquery.ztree.excheck.min.js" type="text/javascript"></script>
   
 <ul id="treeDemo" class="ztree"></ul>

<script type="text/javascript">
    var urlPath = getUrlPath();


    // 每页显示个数
    const limit = 5000;
    var parentNodes = [];
    var nodePageArr=new Set();


    var param = {
        displayUp: false,
        level: 1,
        displayOrg: true,
        displayStop: true,
        displayLevel: "currLevel",
        displayType: "user",page:1,limit:limit
    };
   
    var setting = {
        async: {
            enable: true,
            url: urlPath + "/method?noCache=" + new Date().getTime(),
            dataType: "json",
            type: "GET",
            autoParam: ["id"],
            otherParam: param,
            dataFilter: ret_filter
        },
        data: {
            simpleData: {
                enable: true,
                idKey: "id",
                pIdKey: "code",
                nocheck: false
            }
        },
        check: {
            enable: true,
            chkStyle: checkType,  //单选或多选框
        },
        callback: {
            onClick:zTreeOnClick,//添加点击事件
            onNodeCreated: zTreeOnNodeCreated,
            onAsyncSuccess: function (event, treeId, node, msg) {
                if (node == undefined) {
                    // 展开根节点信息
                    $.fn.zTree.getZTreeObj("treeDemo").expandNode(getRoot());
                }
            }
        }
    };

   

    function ret_filter(treeId, parentNode, childNodes) {
        if (!childNodes || childNodes.length == 0) {
            var nodes = [];
            var node = new Object();
            node.id = parentNode.id + "_nochild";
            node.code = parentNode.id;
            node.name = "无下级";
            node.nocheck = true;
            nodes.push(node);
            return nodes;
        }
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        // 以下内容是后端返回的数据
        if (!strIsEmpty(childNodes[childNodes.length - 1].pageCount)) {
            var pageNow = childNodes[childNodes.length - 1].pageNow; // 当前页数
            var pageCount = childNodes[childNodes.length - 1].pageCount; // 总页数
            var pageRow = childNodes[childNodes.length - 1].pageRow; // 总条数
            var code = childNodes[childNodes.length - 1].code;
            var num = parseInt(pageRow) - parseInt(pageNow) * parseInt(limit);
            childNodes.pop();
            nodePageArr.add({code:code,page:pageNow});
            if (pageNow < pageCount) {
                childNodes.push({
                    code: code,
                    name: '点击加载更多...【'+num+'】条数据待显示',
                    isParent: false,
                    open: false,
                    nocheck: true,
                    type: "user",
                    flag: "clickBtn"
                });
            }
        }
        // 回显选中的人员
        for (var i = 0, l = childNodes.length; i < l; i++) {
            if (childNodes[i].type == "user") {
                childNodes[i].isParent = false;
                if (choose.hasOwnProperty(childNodes[i].id)) {
                    treeObj.checkNode(childNodes[i], true, false, false);
                }
            } else {
                childNodes[i].isParent = true;
            }
        }
        return childNodes;
    }

    var submissions = false;
    function zTreeOnClick(event, treeId, treeNode,msg) {
       if (treeNode.flag === 'clickBtn') {
           if (!submissions) {
               var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
               submissions = true;
               var page = getCurrentPage(treeNode.code);
               var param = {
                   displayUp: false,
                   level: 1,
                   displayOrg: true,
                   displayStop: true,
                   displayLevel: "currLevel",
                   displayType: "user",
                   page: page,
                   limit: limit,
                   nextData: true,
                   id:treeNode.code
               };
              
               $.ajax({
                   url: urlPath + "/method?noCache=" + new Date().getTime(),
                   dataType: "json",
                   type: "GET",
                   data: param,
                   success: function (data) {
                       submissions = false;
                        // 回显选中的人员
                       for (var i = 0, l = data.length; i < l; i++) {
                           if (choose.hasOwnProperty(data[i].id)) {
                               zTreeObj.checkNode(data[i], true, false, false);
                           }
                       }
                        // 以下内容是后端返回的数据
                       if (!strIsEmpty(data[data.length - 1].pageCount)) {
                           var pageNow = data[data.length - 1].pageNow; // 当前页数
                           var pageCount = data[data.length - 1].pageCount; // 总页数
                           var pageRow = data[data.length - 1].pageRow; // 总条数
                           var code = data[data.length-1].code;
                           nodePageArr.add({code:code,page:pageNow});
                           var num = parseInt(pageRow) - parseInt(pageNow) * parseInt(limit);
                           data.pop();
                           if (pageNow < pageCount) {
                               data.push({
                                   code: code,
                                   name: '点击加载更多...【'+num+'】条数据待显示',
                                   isParent: false,
                                   open:false,
                                   icon:false,
                                   nocheck:true,
                                   type:"user",
                                   flag:"clickBtn"
                               });
                           }
                           zTreeObj.removeNode(treeNode);
                           var parentNode = getParentNode(code);
                           zTreeObj.addNodes(parentNode, data); // 添加新节点
                       }
                   },
                   error: function (xmlhttp, textStatus, errorThrown) {
                       submissions = false;
                       var o = JSON.parse(xmlhttp.responseText);
                       layer.msg(o.message, {icon: 5});
                   }
               });
           } else {
               layer.msg("正在加载数据...请勿重复点击！");
           }
       }
    };

    // 获取所有的父节点
    function getParentNode(code) {
        var nodeRet;
        parentNodes.forEach(function(node) {
            if (node.id === code) {
                nodeRet = node;
            }
        });
        return nodeRet;
    }
    // 获取每级的页数
    function getCurrentPage(code) {
        var nodeRet;
        nodePageArr.forEach(function(node) {
            if (node.code === code) {
                nodeRet = node;
                nodePageArr.delete(node);
            }
        });
        return strIsEmpty(nodeRet)?2:++nodeRet.page;
    }

    function init_dept_tree() {
        var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
        var root = getRoot();
        if (!strIsEmpty(treeObj) && root !== null) {
            var nodes = [];
            var children = getChildrenNode(root, nodes);
            for (var i = 0; i < children.length; i++) {
                var node = children[i];
                if (node.checked === true) {
                    choose[node.id] = node.name;
                } else if (choose.hasOwnProperty(node.id)) {
                    delete choose[node.id];
                }
            }
        }
        $.fn.zTree.init($("#treeDemo"), setting);
    }

    //加载ztree
    $(document).ready(function () {
        init_dept_tree();
    });

   

    function zTreeOnNodeCreated(event, treeId, treeNode) {
        if (treeNode.type == "department") {
            var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
            treeObj.setChkDisabled(treeNode, true);
            parentNodes.push(treeNode);
        }
    }

  

</script>