ztree 异步加载

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

一、准备工作

     引入对应的js和css，这里是ztree的官方下载地址：https://gitee.com/zTree/zTree_v3

     最新版本是3.5.37

二、前端核心代码

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

<link rel="stylesheet" href="../../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../../js/jquery.ztree.core.js"></script>

<h1>异步加载节点数据的树</h1>
<h6>[ 文件路径: core/async.html ]</h6>
<div class="content_wrap">
	<div class="zTreeDemoBackground left">
		<ul id="treeDemo" class="ztree"></ul>
	</div>
</div>
<SCRIPT type="text/javascript">
    var setting = {
        async: {
            enable: true,
            url:"http://127.0.0.1:8080/getTreeData",
            type:"post",
            dataType:"json",
            contentType:"application/x-www-form-urlencoded",
            autoParam:["id=pid"]
        },
        data:{
            key:{
                isParent : "isparent"
            },
            simpleData :{
                enable : true,
                idKey : "id",
                pIdKey : "pid",
                rootPId : "root"
            }
        },
    };
		
    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting);		
    });
</SCRIPT>

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

三、后台代码

     这里我用的是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;
}

四、页面效果

          

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