ztree 异步加载

你的名字 2022-04-13 06:56 254阅读 0赞

最近要用ztree插件生成一个部门人员的树形结构，之前全部用的简单数据格式全部请求到前台的方式加载树，现在由于数据量过大，加载时间过长，要改为异步加载。

一、准备工作

引入对应的js和css，这里是ztree的官方下载地址：[https://gitee.com/zTree/zTree\_v3][https_gitee.com_zTree_zTree_v3]

最新版本是3.5.37

二、前端核心代码

这里直接借用了下载下来ztree项目的demo，文件路径在zTree\_v3\\demo\\cn\\core\\async.html

这里有一个关键点是data中key isParent的设置，需要后端返回该节点是否是父节点，如果是父节点才能点击之后异步请求下一级的数据。查看ztree的api，需要v.3.5.32+才能支持，所以要下载最新版的ztree。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xRMTk5MjEwMjI_size_16_color_FFFFFF_t_70][]

三、后台代码

这里我用的是springboot，数据随便造的。这里的关键是对应前端的isParent，每一个节点数据都需要传isparent参数，实际中可能需要提前处理好这个参数或者通过数据库查询判断isparent参数为true还是false。

@RequestMapping(value = "getTreeData" ,method = {RequestMethod.GET, RequestMethod.POST})
    public List<HashMap<String, Object>> getTreeData(HttpServletRequest request,HttpServletResponse response) {
        response.setHeader("Access-Control-Allow-Origin", "*");//应对跨域请求
        String pid = request.getParameter("pid");
        if(pid == null || pid == ""){//初始化节点的时候  默认查询最顶级的节点  即pid=0
            pid="0";
        }
        List<HashMap<String, Object>> list = new ArrayList<>();
        if(pid.equals("0")) {
            HashMap<String, Object> map1 = new HashMap<>();
            map1.put("id", 1);
            map1.put("pid", "root");
            map1.put("name", "一级部门");
            map1.put("isparent", true);
            list.add(map1);
        } else if(pid.equals("1")){
            HashMap<String, Object> map2 = new HashMap<>();
            map2.put("id", 2);
            map2.put("pid", 1);
            map2.put("name", "二级部门1");
            map2.put("isparent", true);
            list.add(map2);
    			
            HashMap<String, Object> map3 = new HashMap<>();
            map3.put("id", 3);
            map3.put("pid", 1);
            map3.put("name", "二级部门2");
            map3.put("isparent", false);
            list.add(map3);
        } else if(pid.equals("2")) {
            HashMap<String, Object> map4 = new HashMap<>();
            map4.put("id", 4);
            map4.put("pid", 2);
            map4.put("name", "三级部门1");
            map4.put("isparent", false);
            list.add(map4);
    			
            HashMap<String, Object> map5 = new HashMap<>();
            map5.put("id", 5);
            map5.put("pid", 2);
            map5.put("name", "三级部门2");
            map5.put("isparent", false);
            list.add(map5);
        }
        return list;
    }

四、页面效果

![2018112809195936.png][]     ![20181128092052713.png][]     ![20181128092121962.png][]

这里在后台打断点，是可以看到点击父节点之后，controller接受到了一次新的请求，传的参数是被点击父节点的id值，作为pid。

[https_gitee.com_zTree_zTree_v3]: https://gitee.com/zTree/zTree_v3
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xRMTk5MjEwMjI_size_16_color_FFFFFF_t_70]: /images/20220413/7ed3860a4599413196581f4147f88def.png
[2018112809195936.png]: https://img-blog.csdnimg.cn/2018112809195936.png
[20181128092052713.png]: https://img-blog.csdnimg.cn/20181128092052713.png
[20181128092121962.png]: /images/20220413/71a3c6c1c70849fdb993cbb9829e3a0f.png