首先说一下这篇文章和我写的上一篇异步树的区别：
上一篇的我实现的是其实是个伪异步加载,因为我实际是把异步的操作写在了节点上面，点击节点时，获取当前节点的ID，取回子节点的数据，然后手动拼接到当前节点下面。
真正的异步其实是应该点击树前面的"+"号，然后用zTree自带的异步功能请求后台(也就是我上一篇存在疑问的地方)，获取数据后自动拼接到当前请求的节点。
好了，直接上代码，我现在用的框架是SpringBoot+thymeleaf,写法还是差不多的。
页面代码：treeList.html 引入文件注意改成自己需要的写法
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<title>Insert title here</title>
<!-- thymeleaf引入模板写法 jsp用jsp引入写法即可 -->
<script type="text/javascript" th:src="@{/jq/jquery-1.7.2.js}" src="../static/jq/jquery-1.7.2.js"></script>
<script type="text/javascript" th:src="@{/ztree/jquery.ztree.all-3.5.js}" src="../static/ztree/jquery.ztree.all-3.5.js"></script>
<script type="text/javascript" th:src="@{/ztree/jquery.ztree.core-3.5.js}" src="../static/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" th:src="@{/ztree/ztreeBranchExt.js}" src="../static/ztree/ztreeBranchExt.js"></script>
<link type="text/css" rel="stylesheet" th:href="@{/ztree/zTreeStyle.css}" href="../static/ztree/zTreeStyle.css">
</head>
<body>
<h2>树列表</h2>
<body>
<div style="width:15%;">
<ul id="demotree" class="ztree"></ul>
</div>
</body>
<script th:inline="javascript">
/*<![CDATA[*/
var setting = {//初始化树设置
isSimpleData : true, //数据是否采用简单 Array 格式，默认false
treeNodeKey : "id", //在isSimpleData格式下，当前节点id属性
treeNodeParentKey : "pId", //在isSimpleData格式下，当前节点的父节点id属性
showLine : true, //是否显示节点间的连线
async:{//异步设置
enable: true,
type:"get",
url: "/SpringBoot/tree/asyncTree",
autoParam: ["id"],
dataType: "text",
//异步返回结果集处理(必须返回json数据)
dataFilter: function(treeId, parentNode, responseData){
return responseData;
/* var treeNodes = eval(responseData);
return treeNodes;
*/
}
},
callback :{
onClick : function(event, treeId, treeNode, clickFlag) {//树节点点击事件 根据业务自己定义
alert(1);
}
//,onAsyncSuccess: filter
},
//checkable : true //每个节点上是否显示 CheckBox
};
var zTree;
var treeNodes;
var list = [[${trees}]];//获取初始化页面时的数据 //JSP需要换成JSP自己的写法
treeNodes = eval(list);
//初始化节点
$(document).ready(function(){
$.fn.zTree.init($("#demotree"), setting, treeNodes);
});
/*]]>*/
</script>
</body>
</html>
对比上一篇异步树的文章可以发现，代码少了很多,真正的异步其实是可以减少很多操作的。
controller层代码：TreeController.java 我这里改成了先进入controller，再跳转回页面。
当然也可以继续沿用我上篇文章的写法,先进入页面,用ajax请求后台加载初始化树。
package com.luoj.springboot.controller.Tree;
import com.alibaba.fastjson.JSON;
import com.github.pagehelper.PageInfo;
import com.luoj.springboot.controller.Result;
import com.luoj.springboot.entity.User;
import com.luoj.springboot.entity.tree.Tree;
import com.luoj.springboot.service.tree.ITreeService;
import com.luoj.springboot.service.user.impl.UserService;
import com.luoj.springboot.utils.PageUtils;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;
import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import java.util.List;
@RestController
@RequestMapping("/tree")
public class TreeController {
@Resource
private ITreeService treeService;
/**
* 初始化页面接口
* @param request
* @return
*/
@RequestMapping(value="/getTree",method = RequestMethod.GET)
public ModelAndView getTree(HttpServletRequest request){
ModelAndView mv = new ModelAndView();
String pid = request.getParameter("id");
if(pid == null || pid == ""){//初始化节点的时候 默认查询最顶级的节点 即pid=0
pid="0";
}
List<Tree> list = treeService.getTree(pid);//取出树的数据
for(int i=0;i<list.size();i++){
/**
* 这里可以多加一层查询,用当前节点去数据库取下级节点的数据,如果有下级节点的数据,就setIsParent为1,对应页面
* 上的图标前面就会有个+号 没有的话设置为0 也就不能继续请求下一级了
*/
list.get(i).setIsParent(1);//我这里是默认都有下一级 可以根据自己的业务写
}
String treeJson = JSON.toJSONString(list);
mv.addObject("trees",treeJson);
mv.setViewName("/tree/treeList");
return mv;
}
/**
* 异步请求接口
* @param request
* @return
*/
@RequestMapping(value="/asyncTree",method = RequestMethod.GET)
public String asyncTree(HttpServletRequest request){
String pid = request.getParameter("id");
if(pid == null || pid == ""){//初始化节点的时候 默认查询最顶级的节点 即pid=0
pid="0";
}
List<Tree> list = treeService.getTree(pid);
for(int i=0;i<list.size();i++){
/**
* 这里可以多加一层查询,用当前节点去数据库取下级节点的数据,如果有下级节点的数据,就setIsParent为1,对应页面
* 上的图标前面就会有个+号 没有的话设置为0 也就不能继续请求下一级了
*/
list.get(i).setIsParent(1);//我这里是默认都有下一级 可以根据自己的业务写
}
String treeJson = JSON.toJSONString(list);//必须是json格式的数据
//[
// {"id":2,"isParent":0,"name":"软件工程学院","pId":1},{"id":3,"isParent":0,"name":"国际贸易学院","pId":1},
// {"id":4,"isParent":0,"name":"土木工程学院","pId":1},{"id":5,"isParent":0,"name":"机电学院","pId":1}
// ]
return treeJson;
}
}
zTree实体类：Tree.java
package com.luoj.springboot.entity.tree;
public class Tree {
private int id;//本级ID
private int pId;//父ID
private String name;
private int isParent;//1 是父级 0不是父级
private String icon;//自定义图标
//get...
//set...
}
页面效果：
ps:这里可能会显示不出来树的图标和样式。因为我这里引入的文件还包含了自带的图标icon。
解决办法：把外部JS和CSS的引入
<script type="text/javascript" th:src="@{/ztree/jquery.ztree.all-3.5.js}" src="../static/ztree/jquery.ztree.all-3.5.js"></script>
<script type="text/javascript" th:src="@{/ztree/jquery.ztree.core-3.5.js}" src="../static/ztree/jquery.ztree.core-3.5.js"></script>
<script type="text/javascript" th:src="@{/ztree/ztreeBranchExt.js}" src="../static/ztree/ztreeBranchExt.js"></script>
<link type="text/css" rel="stylesheet" th:href="@{/ztree/zTreeStyle.css}" href="../static/ztree/zTreeStyle.css">
替换成我上一篇异步树文章的引入
<script type="text/javascript" src="static/js/jquery-1.7.2.js"></script>
<link type="text/css" rel="stylesheet" href="plugins/zTree/3.5/zTreeStyle.css"/>
<script type="text/javascript" src="plugins/zTree/2.6/jquery.ztree-2.6.min.js"></script>
<script type="text/javascript" src="plugins/zTree/3.5/jquery.ztree.core-3.5.js"></script>
同样还是去http://www.treejs.cn/v3/api.php 下载对应的文件即可，注意对应版本号。
想和我用同样版本的可以去自己下载图标icon或者私信我,我把图标icon发给你,这里我不知道怎么上传图标。