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

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

原文 http://blog.csdn.net/wangyuanjun008/article/details/79121503

2018-01-25 02:00:15阅读(378)

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

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

<div class="col-lg-12">
    <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">
    <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();
}

希望能对大家有所帮助!

最新发布

CentOS专题

关于本站

5ibc.net旗下博客站精品博文小部分原创、大部分从互联网收集整理。尊重作者版权、传播精品博文,让更多编程爱好者知晓!

小提示

按 Ctrl+D 键,
把本文加入收藏夹