ztree 异步加载

你的名字 2022-04-13 06:56 429阅读 0赞 
  1.  最近要用ztree插件生成一个部门人员的树形结构，之前全部用的简单数据格式全部请求到前台的方式加载树，现在由于数据量过大，加载时间过长，要改为异步加载。

一、准备工作

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

二、前端核心代码

  1. 这里直接借用了下载下来ztree项目的demo，文件路径在zTree\_v3\\demo\\cn\\core\\async.html
  3. <link rel="stylesheet" href="../../../css/demo.css" type="text/css">
  4. <link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
  5. <script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
  6. <script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>
  8. <h1>异步加载节点数据的树</h1>
  9. <h6>[ 文件路径: core/async.html ]</h6>
  10. <div class="content_wrap">
  11.     <div class="zTreeDemoBackground left">
  12.         <ul id="treeDemo" class="ztree"></ul>
  13.     </div>
  14. </div>
  15. <SCRIPT type="text/javascript">
  16.     var setting = {
  17.         async: {
  18.             enable: true,
  19.             url:"http://127.0.0.1:8080/getTreeData",
  20.             type:"post",
  21.             dataType:"json",
  22.             contentType:"application/x-www-form-urlencoded",
  23.             autoParam:["id=pid"]
  24.         },
  25.         data:{
  26.             key:{
  27.                 isParent : "isparent"
  28.             },
  29.             simpleData :{
  30.                 enable : true,
  31.                 idKey : "id",
  32.                 pIdKey : "pid",
  33.                 rootPId : "root"
  34.             }
  35.         },
  36.     };
  38.     $(document).ready(function(){
  39.         $.fn.zTree.init($("#treeDemo"), setting);        
  40.     });
  41. </SCRIPT>
  43. 这里有一个关键点是data中key isParent的设置，需要后端返回该节点是否是父节点，如果是父节点才能点击之后异步请求下一级的数据。查看ztree的api，需要v.3.5.32+才能支持，所以要下载最新版的ztree。

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0xRMTk5MjEwMjI_size_16_color_FFFFFF_t_70

三、后台代码

  1.  这里我用的是springboot，数据随便造的。这里的关键是对应前端的isParent，每一个节点数据都需要传isparent参数，实际中可能需要提前处理好这个参数或者通过数据库查询判断isparent参数为true还是false。
  3. @RequestMapping(value = "getTreeData" ,method = {RequestMethod.GET, RequestMethod.POST})
  4. public List<HashMap<String, Object>> getTreeData(HttpServletRequest request,HttpServletResponse response) {
  5.     response.setHeader("Access-Control-Allow-Origin", "*");//应对跨域请求
  6.     String pid = request.getParameter("pid");
  7.     if(pid == null || pid == ""){//初始化节点的时候  默认查询最顶级的节点  即pid=0
  8.         pid="0";
  9.     }
  10.     List<HashMap<String, Object>> list = new ArrayList<>();
  11.     if(pid.equals("0")) {
  12.         HashMap<String, Object> map1 = new HashMap<>();
  13.         map1.put("id", 1);
  14.         map1.put("pid", "root");
  15.         map1.put("name", "一级部门");
  16.         map1.put("isparent", true);
  17.         list.add(map1);
  18.     } else if(pid.equals("1")){
  19.         HashMap<String, Object> map2 = new HashMap<>();
  20.         map2.put("id", 2);
  21.         map2.put("pid", 1);
  22.         map2.put("name", "二级部门1");
  23.         map2.put("isparent", true);
  24.         list.add(map2);
  26.         HashMap<String, Object> map3 = new HashMap<>();
  27.         map3.put("id", 3);
  28.         map3.put("pid", 1);
  29.         map3.put("name", "二级部门2");
  30.         map3.put("isparent", false);
  31.         list.add(map3);
  32.     } else if(pid.equals("2")) {
  33.         HashMap<String, Object> map4 = new HashMap<>();
  34.         map4.put("id", 4);
  35.         map4.put("pid", 2);
  36.         map4.put("name", "三级部门1");
  37.         map4.put("isparent", false);
  38.         list.add(map4);
  40.         HashMap<String, Object> map5 = new HashMap<>();
  41.         map5.put("id", 5);
  42.         map5.put("pid", 2);
  43.         map5.put("name", "三级部门2");
  44.         map5.put("isparent", false);
  45.         list.add(map5);
  46.     }
  47.     return list;
  48. }

四、页面效果

2018112809195936.png 20181128092052713.png 20181128092121962.png

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

发表评论

表情：
评论列表 （有 0 条评论，429人围观）

还没有评论，来说两句吧...

相关阅读

    相关 ztree 异步加载

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

    你的名字你的名字/ 0 赞/ 430 阅读