ztree点击展开/收缩 按钮分级加载,解决数据量过大加载缓慢

有些项目的组织机构足足有六七万多条数据,加载十分缓慢,所考虑做成分级加载。
由于本项目的ztree的树节点的点击事件已经被占用(加载组织人员),所以考虑使用ztree的 展开/收缩 (onExpand)按钮点击事件,即树前面的三角形按钮。(关键属性:isParent)
加载第一级节点tree方法,效果如下图(第一次只查询父节点为null或者0的节点。此处应注意在将数据库查询到的数据转换为ztree所需格式时,将isParent属性设为true。否则默认为子节点的话,左边的收缩按钮不出现,onExpand:(收缩/展开)事件也无法触发)
第一次加载如图所示:
如图为第一次加载
点击,加载第二级,后台判断传回数据中,有子级的为文件夹,且有展开按钮,没有子级的直接为蓝色的文件。再次重申:isParent属性来区分,很重要,这样就可以做到点击展开按钮再回调方法来实现一级级加载,也不影响onClick: 树节点点击事件
在这里插入图片描述
前台代码:

function departmentTree() {
    var setting = {
        view: {
            showLine: false,
            showIcon: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        open: true,
        callback: {
            onClick: choseTreeOnClick,//树节点点击事件
            onExpand:addChildNodes//树节点展开(关闭)按钮点击事件
        }
    };
    $.ajax({
        type: 'post',
        dataType: 'json',
        url: 略,
        data: {"pId": beAuditUnitSID},
        success: function (response) {
            if (response.suc) {
                $.fn.zTree.init($("#selectStaffTree"), setting, response.data);
            } else {
                common.HintMsg('warning', response.msg);
            }
            treeObj = $.fn.zTree.getZTreeObj("selectStaffTree");
            treeObj.expandAll(true);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            common.HintMsg('warning','加载单位树失败,请联系系统维护人员');
        }
    });
    // 添加滚动条
    $('.treeLayer').mCustomScrollbar();
}

根据父级组织机构id加载子级组织机构前台代码:

/*根据父级组织机构id加载子级组织机构*/
function addChildNodes(event, treeId, treeNode) {//根据ztree的API可以知道, onExpand触发事件会自动带三个参数
    var treeObj = $.fn.zTree.getZTreeObj(treeId);
    var node = treeObj.getNodeByTId(treeNode.tId);
    //没有子节点才去查询
    if(node.children == null || node.children == "undefined"){
        $.ajax({
            type: 'post',
            dataType: 'json',
            url:  ".../getOrgChildTreeData",
            data:{
                pId:treeNode.id
            },
            success: function (response) {
                if (response.suc) {
                    if(response.data !=null && response.data !=""){
                        //添加新节点
                        newNode = treeObj.addNodes(node, response.data);
                    }
                }
                // treeObj = $.fn.zTree.getZTreeObj("internalPersonnelTree");
                //treeObj.expandAll(true);
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                common.HintMsg('warning', '加载子组织机构树失败,请联系系统维护人员');
            }
        });
    }
}

后台代码:

查询一级节点的方法和根据父级id查询自己的方法就不上传了,无非就是查询参数的不同而,以下转换ztree所需格式方法可以作为参考:
public Map<String, Object> listToTree(List<CSGStaffOrgDTO> dtoList) {
        Map<String, Object> map;
        List<Map<String, Object>> list = new ArrayList<>();
        for (CSGStaffOrgDTO dto : dtoList) {
//            if(dto!=null){
//                OrganizationDTO organizationDTO = dto.getOrganizationDTO();
            if (dto != null) {
                map = new HashMap<>();
                map.put("id", dto.getId());
                map.put("name", dto.getAgencyName());
                map.put("pId", dto.getParentSID());
                map.put("orgId", dto.getOrganizationId());
                if (isNotLeaf(dto.getId())) {//判断是否为叶子节点
                    map.put("isParent", true);//不可缺少,否则不会加载展开按钮
                }
                list.add(map);
            }
//            }
        }
        return NormalizedUtils.normalizedOrganizationTree(list);
    }
     /**
     * 判断是否为末级叶子节点
     * @param pId 要判断的父级id
     * @return 若无子节点,返回false。反正则true
     */
    public Boolean isNotLeaf(String pId) {
        Searchable searchable = new SearchRequest();
        searchable.addSearchFilter("parentSID", SearchOperator.eq, pId);
        List<CSGStaffOrgDTO> dtoList = this.find(searchable).getContent();
        //此处框架不同,查询方式不同,写一个查询子集方法即可
        if (dtoList == null || dtoList.size() == 0) {
            return false;
        } else {
            return true;
        }
    }
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值