ztree 异步加载添加子节点

var settings = {
        view: {
            selectedMulti: false,
            showIcon: false,
            addDiyDom: addDiyDomWithCheck
        },
        async: {
            enable: true,
            url: "", //ajax的请求方法url
            autoParam: ["SysCode", "Grade"], //传node的值
            otherParam: ["dbcode", "xxx", "sysid", "xxx"], //需要的参数
            dataFilter: filter
        },
        data: {
            simpleData: {
                enable: false,  //true 、 false 分别表示 使用 、 不使用 简单数据模式
            },
            key: {
                title: "Name",
            },
        },
        check: {
            enable: true,//显示复选框
            //chkboxType: { "Y": "s", "N": "ps" },//父子不关联
        },
        callback: {
            onCheck: zTreeOnCheck, //选中事件
            beforeAsync: beforeAsync, //用于捕获异步加载之前的事件回调函数,zTree 根据返回值确定是否允许进行异步加载  eg: 禁止 id 为 1 的父节点进行异步加载操作
            onExpand: function (event, treeId, treeNode) { //用于捕获节点被展开的事件回调函数
                zTreeOnExpand(treeNode);
            },
            onAsyncSuccess: zTreeOnAsyncSuccess, //用于捕获异步加载正常结束的事件回调函数
        }
    };   

    //展开节点
    function beforeAsync(treeId, treeNode) {
        return true;
    }

    function filter(treeId, treeNode, childNodes) {
        if (!childNodes) return null;
        for (var i = 0, l = childNodes.length; i < l; i++) {
            childNodes[i].isParent = true;
        }
        return childNodes;
    }

    //节点展开加载子节点数据
    function zTreeOnExpand(treeNode) {
        if (treeNode.Grade == 0 || treeNode.ChlidNode.length != 0) {
            //根节点,
        } else {
            $.ajax({
                type: "GET",
                dataType: "json",
                url: "", //ajax的请求方法url
                cache: false, //是否缓存
                async: true,//true 异步;false 同步
                data: { dbcode: "xxx", sysid: "xxx", SYSCODE: treeNode.SysCode, GRADE: treeNode.Grade + 1 },
                success: function (res) {
                    if (res.length != 0) {
                        var zTree = $.fn.zTree.getZTreeObj("tree1");
                        zTree.addNodes(treeNode, res);

						var nodeList = treeNode.ChlidNode; //这里是由于后台创建递归时,每个节点都会有一个childrennode,页面上会展示可展开+ ,以下操作是移除子节点,不展示+
                        if (nodeList.length >0) {
                            for (var i = 0; i < nodeList.length; i++) {
                                if (nodeList[i].memberCount == "0") { //这里是根据后台数据库取出的值判断有没有子节点,如果memberCount =0是没有子节点, =1 是有子节点。
                                    zTree.removeChildNodes(nodeList[i]);
                                }
                                //nodeList[i].isParent = nodeList[i].memberCount == "1" ? true : false;
                            }
                        }

                    }
                }
            });
        }
    };

    //第一次加载出第一级节点
    var isFirst = true;
    function zTreeOnAsyncSuccess() {
        if (isFirst) {
            //获得树形图对象
            var zTree = $.fn.zTree.getZTreeObj("tree1");
            //获取根节点个数,getNodes获取的是根节点的集合
            var nodeList = zTree.getNodes();
            //展开第一个根节点
            zTree.expandNode(nodeList[0], true);
            //当再次点击节点时条件不符合,直接跳出方法
            isFirst = false;
        }
    }

先开始如果子节点为空的话,也展示有± 的展示图标先开始如果子节点为空的话,也展示有+- 的展示图标
使用removeChildNodes方法移除为空的子节点。
在这里插入图片描述

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值