使用 zTree 异步加载
使用场景
可能需要展示类别很多，如果采用直接加载的方式，需要展示的数据量过大，交互十分不友好。所以采用 zTree 异步加载数据。
首先访问 zTree 官网，从上面下载资源 http://www.treejs.cn/v3/api.php
demo 环境
SpringBoot 1.5.9.RELEASE ， 使用 jsp
<packaging>war</packaging>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>1.5.9.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<dependencies>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<!-- web 支持 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<exclusions>
<exclusion>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-tomcat</artifactId>
</exclusion>
</exclusions>
</dependency>
<dependency>
<groupId>org.apache.tomcat</groupId>
<artifactId>tomcat-servlet-api</artifactId>
<version>8.5.28</version>
<scope>provided</scope>
</dependency>
<!--对jsp的支持 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
</dependency>
<dependency>
<groupId>org.apache.tomcat.embed</groupId>
<artifactId>tomcat-embed-jasper</artifactId>
</dependency>
<!--添加对jstl的支持 -->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>jstl</artifactId>
</dependency>
</dependencies>
导入 zTree 所需的 css 和 js ，导入到 resources/static 下
<link rel="stylesheet" href="<%=basePath%>/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=basePath%>/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/jquery.ztree.all.min.js"></script>
jsp 代码
<%--
Created by IntelliJ IDEA.
User: lvhaosir
Date: 2018/12/12
Time: 8:52
To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>index</title>
<script type="text/javascript">
var basePath = \'<%=basePath%>\';
</script>
<link rel="stylesheet" href="<%=basePath%>/css/zTreeStyle/zTreeStyle.css" type="text/css">
</head>
<body>
<h4>Ztree异步加载使用例子</h4>
<div id="zTree" class="ztree"></div>
</body>
<script type="text/javascript" src="<%=basePath%>/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=basePath%>/js/jquery.ztree.all.min.js"></script>
<script type="text/javascript">
var setting = {
async: {
enable: true,
url: basePath + "ztree/asyncGetNodes",
autoParam:["id"],
dataFilter: filter
},
data:{
simpleData:{
enable: true,
idKey:\'id\',
pIdKey:\'pid\',
rootPId: 0
}
},
view:{
showIcon: false
}
};
$(document).ready(function(){
initZTree();
});
function filter(treeId, parentNode, childNodes) {
return childNodes;
}
//初始化树
function initZTree(){
$.ajax({
url:basePath + "ztree/getNodes",
type:"post",
dataType: "json",
success: function(data){
console.log(data);
var zTreeObj = $.fn.zTree.init($("#zTree"),setting, data);
//让第一个父节点展开
var rootNode_0 = zTreeObj.getNodeByParam(\'pid\',0,null);
zTreeObj.expandNode(rootNode_0, true, false, false, false);
},
error: function(){
}
});
}
</script>
</html>
Java 代码
model
package cn.lvhaosir.ztree.model;
import lombok.AllArgsConstructor;
import lombok.Data;
/**
* @Author: lvhaosir
* @Date: 2018/12/12 9:09
* @Version 1.0
*/
@Data
@AllArgsConstructor
public class Node {
private String id;
/**
* 父节点 id
*/
private String pid;
private String name;
/**
* 是否展开
*/
private String open;
/**
* 是否为父节点（下面是否还有分类）
*/
private String isParent;
}
controller
PageController
package cn.lvhaosir.ztree.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* @Author: lvhaosir
* @Date: 2018/12/12 8:50
* @Version 1.0
*/
@Controller
@RequestMapping("/page")
public class PageController {
/**
* 跳转界面
* @return
*/
@RequestMapping(value="/{filename}")
public String toPage(@PathVariable(value="filename") String filename){
System.out.println("filename:"+filename);
return filename;
}
/**
* 跳转界面
* @return
*/
@RequestMapping(value="/{folder}/{filename}")
public String toPage(@PathVariable(value="folder") String folder,@PathVariable(value="filename") String filename){
System.out.println("folder:"+folder +" filename:"+filename);
return folder+"/"+filename;
}
}
ZtreeController
package cn.lvhaosir.ztree.controller;
import cn.lvhaosir.ztree.model.Node;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import java.util.ArrayList;
import java.util.List;
/**
* @Author: lvhaosir
* @Date: 2018/12/12 9:10
* @Version 1.0
*/
@Controller
@RequestMapping("/ztree")
public class ZtreeController {
@RequestMapping("/getNodes")
@ResponseBody
public List<Node> getNodes() {
List<Node> nodeList = new ArrayList<Node>();
nodeList.add(new Node("1","0","一级菜单1","false","true"));
nodeList.add(new Node("10","1","二级菜单1","false","true"));
nodeList.add(new Node("11","1","二级菜单2","false","true"));
nodeList.add(new Node("12","1","二级菜单3","false","true"));
nodeList.add(new Node("2","0","一级菜单2","false","true"));
nodeList.add(new Node("20","2","二级菜单21","false","true"));
nodeList.add(new Node("21","2","二级菜单22","false","true"));
nodeList.add(new Node("22","2","二级菜单23","false","true"));
return nodeList;
}
@RequestMapping("/asyncGetNodes")
@ResponseBody
public List<Node> asyncGetNodes(String id) throws InterruptedException {
List<Node> nodeList = new ArrayList<Node>();
if("10".equals(id)){
nodeList.add(new Node("100",id,"三级菜单1","false","true"));
nodeList.add(new Node("101",id,"三级菜单2","false","false"));
} else if ("11".equals(id)) {
nodeList.add(new Node("102",id,"三级菜单21","false","false"));
nodeList.add(new Node("103",id,"三级菜单22","false","true"));
} else if ("12".equals(id)) {
nodeList.add(new Node("104",id,"三级菜单31","false","false"));
nodeList.add(new Node("105",id,"三级菜单32","false","false"));
}
Thread.sleep(2000);
return nodeList;
}
}
菜单树就能正确展示出来了。
实际使用场景
在我们实际的场景应该是，有一个根据菜单父 id 查询菜单的接口，页面首先进去加载顶级菜单，一般也就是 pid=0 的菜单，然后点击节点，传递该节点的 id 异步向后台查询子菜单来进行异步加载。