树插件ztree异步加载数据与一次性加载全部数据的写法

最新推荐文章于 2022-01-19 09:41:52 发布

原创最新推荐文章于 2022-01-19 09:41:52 发布 · 1w 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ztree

ztree 专栏收录该内容

2 篇文章

订阅专栏

本文介绍使用ZTree实现异步加载与一次性加载数据的方法。通过前后端配合，解决大数据量导致的性能问题。适用于需高效展示层级数据的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近在做一个项目,项目地址: https://github.com/wangyuanjun008/wyj-parent.git
用到了ztree树，给大家分享异步加载数据与一次性加载数据的写法

异步加载数据是为了防止大数据量而造成树卡死的情况,代码如下:
前台js:

<div class="col-lg-12" style="height:300px; overflow:scroll;">
    <ul id="treeDemo" class="ztree"></ul>
</div>
function setting() {
    var setting = {
        async : {
            enable : true,
            type : "get",
            url : '${ctx}/menu/renderTree',
            autoParam : [ "id", "type" ]
        },
        callback : {
            onClick : zTreeOnClick
        }
    };
    return setting;
}
$.fn.zTree.init($("#treeDemo"), setting(treeUrl));

后台java:

@ResponseBody
@RequestMapping(value = "/renderTree", method = RequestMethod.GET)
public List<Map<String, Object>> renderTree1(Long id, String type) {
    List<Map<String, Object>> returnList = new ArrayList<Map<String, Object>>();
    // 加载根节点
    if (StringUtils.isEmpty(id)) {
        Map<String, Object> root = new HashMap<String, Object>();

        root.put("id", 0);// 根节点的ID
        root.put("name", "权限管理系统"); // 根节点的名字
        root.put("isParent", true);//// 设置根节点为父节点

        // 加载一级节点
        List<Map<String, Object>> returnList1 = new ArrayList<Map<String, Object>>();

        List<Menu> menus = menuService.listOneNodeMenus();
        for (Menu menu : menus) {
            Map<String, Object> node = new HashMap<String, Object>();
            node.put("id", menu.getMenuId());
            node.put("name", menu.getName());
            node.put("isParent", menuService.isSubNodeById(menu.getMenuId()));
            returnList1.add(node);
        }

        root.put("children", returnList1);
        returnList.add(root);
        return returnList;
    }

    // 加载子节点
    List<Menu> menus = null;
    if (id != null && id > 0L) {
        menus = menuService.listSubMenuByParentId(id);
        for (Menu menu : menus) {
            Map<String, Object> node = new HashMap<String, Object>();
            node.put("id", menu.getMenuId());
            node.put("name", menu.getName());
            node.put("isParent", menuService.isSubNodeById(menu.getMenuId()));
            returnList.add(node);
        }
    }
    return returnList;
}

加载全部数据:
前台js

<div class="col-lg-12" style="height:300px; overflow:scroll;">
    <ul id="treeDemo" class="ztree"></ul>
</div>
function setting() {
        var setting = {
            data : {
                simpleData : {
                    enable : true,
                    idKey : "menuId",
                    pIdKey : "parentId",
                    rootPId : null
                },
            check: {
                enable: true,
                chkStyle: "checkbox",
                chkboxType: { "Y": "ps", "N": "ps" }
            }
        };
        return setting;
    }
}
var jsonTree = getDataStore('${ctx}/auth/renderTree');//获得所有节点
var ztree=$.fn.zTree.init($("#treeDemo"), setting(),jsonTree);

后台java:

@ResponseBody
@RequestMapping(value = "/renderTree", method = RequestMethod.GET)
public List<Menu> renderTree() {
    return menuService.listTree();
}

希望能对大家有所帮助!