经过尝试,发现ztree动态获取后台数据的方式有两种。一种是通过ajax调用后台数据获取数据后,赋予ztree;另一种是通过ztree插件自身的功能获取数据。但是两种获取方式是有区别的。使用ztree动态调取数据,点击展开栏时会再次默认请求路径。而ajax只能调取一次(需要通过点击展开栏事件才能实现这个效果),所以目前ztree会较为便捷。好了,直接上代码吧。
一、ajax调取数据
- 后台代码
(这里就不连接数据库了,因为连接数据库还要给出表结构。如果要连接数据库,原理也是一样的。只要把查询出的数据进行循环,动态赋予map,存入集合中就可以将数据库的数据完美的展示在前端。)
@ResponseBody
@RequestMapping("getData")
public List<Map<String, Object>> getData() {
Map<String, Object> map1 = new HashMap<String, Object>();
Map<String, Object> map2 = new HashMap<String, Object>();
Map<String, Object> map3 = new HashMap<String, Object>();
//区域 code
map1.put("code", "36000");
map2.put("code", "35000");
map3.put("code", "34000");
//判断是否是父节点,影响页面树结构的样式
map1.put("isParent", "false");
map2.put("isParent", "false");
map3.put("isParent", "true");
//区域名称,treeName是在treeSetting自定义的,默认为name
map1.put("treeName", "福建省");
map2.put("treeName", "江西省");
map3.put("treeName", "湖北省");
//节点类型
map1.put("nodeType", "region");
map2.put("nodeType", "region");
map3.put("nodeType", "region");
List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
list.add(map1);
list.add(map2);
list.add(map3);
return list;
}
- 前台代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="<%=basePath%>res/js/jquery-1.3.2.min.js"></script>
<link rel="stylesheet"href="<%=basePath%>res/zTree/css/metroStyle/metroStyle.css" />
<script src="<%=basePath%>res/js/jquery.ztree.all.min.js"></script>
</head>
<body>
<div>
<ul id="regionTree" class="ztree"></ul>
</div>
<script>
var treeSetting = {
data : {
key : {
name : "treeName" //zTree 节点的名称辨识字段,默认为name
}
},
async: {
enable: true,//异步处理,默认是false。这样保证不会一次性加载所有数据。不点击节点,就不会去查下一级数据,主要针对大量数据。
url:"<%=basePath%>peam/ztree/getData",//异步获取json格式数据的路径
type:"post" //提交方式
},
check : {
enable : true //设置是否显示多选框,默认为false
},
callback : {
onClick : treeClick //点击树节点,触发的事件。treeClick为自定义的事件
}
};
function treeClick(event, treeId, treeNode) {
alert(treeNode.treeName);
}
$(document).ready(function(){
$.ajax({
url:"<%=basePath%>peam/ztree/getData",
type:"post",
dataType:"json",
success:function(data){
console.log(data);
$.fn.zTree.init($("#regionTree"), treeSetting, data);
}
});
});
</script>
</body>
</html>
`
二、通过ztree插件获取数据
- 后台代码
@ResponseBody
@RequestMapping("getData3")
public List<Map<String, Object>> getData3(HttpServletRequest request) {
List<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
String code = request.getParameter("code");
System.out.println("code===" + code);
if (code == null || code == "") {
Map<String, Object> map1 = new HashMap<String, Object>();
Map<String, Object> map2 = new HashMap<String, Object>();
Map<String, Object> map3 = new HashMap<String, Object>();
// 区域 code
map1.put("code", "36000");
map2.put("code", "35000");
map3.put("code", "34000");
// 判断是否是父节点,影响页面树结构的样式
map1.put("isParent", "true");
map2.put("isParent", "true");
map3.put("isParent", "true");
// 区域名称,treeName是在treeSetting自定义的,默认为name
map1.put("treeName", "福建省");
map2.put("treeName", "江西省");
map3.put("treeName", "湖北省");
// 节点类型
map1.put("nodeType", "region");
map2.put("nodeType", "region");
map3.put("nodeType", "region");
list.add(map1);
list.add(map2);
list.add(map3);
} else if (code.equals("36000")) {
Map<String, Object> map1 = new HashMap<String, Object>();
Map<String, Object> map2 = new HashMap<String, Object>();
Map<String, Object> map3 = new HashMap<String, Object>();
// 区域 code
map1.put("code", "36100");
map2.put("code", "36200");
map3.put("code", "36300");
// 判断是否是父节点,影响页面树结构的样式
map1.put("isParent", "false");
map2.put("isParent", "false");
map3.put("isParent", "false");
// 区域名称,treeName是在treeSetting自定义的,默认为name
map1.put("treeName", "福州市");
map2.put("treeName", "厦门市");
map3.put("treeName", "莆田市");
// 节点类型
map1.put("nodeType", "region");
map2.put("nodeType", "region");
map3.put("nodeType", "region");
list.add(map1);
list.add(map2);
list.add(map3);
} else if (code.equals("35000")) {
Map<String, Object> map1 = new HashMap<String, Object>();
// 区域 code
map1.put("code", "35100");
// 判断是否是父节点,影响页面树结构的样式
map1.put("isParent", "false");
// 区域名称,treeName是在treeSetting自定义的,默认为name
map1.put("treeName", "南昌市");
// 节点类型
map1.put("nodeType", "region");
list.add(map1);
} else if (code.equals("34000")) {
Map<String, Object> map1 = new HashMap<String, Object>();
// 区域 code
map1.put("code", "34100");
// 判断是否是父节点,影响页面树结构的样式
map1.put("isParent", "false");
// 区域名称,treeName是在treeSetting自定义的,默认为name
map1.put("treeName", "武汉市");
// 节点类型
map1.put("nodeType", "region");
list.add(map1);
}
return list;
}
- 前台代码
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="<%=basePath%>res/js/jquery-1.3.2.min.js"></script>
<link rel="stylesheet"
href="<%=basePath%>res/zTree/css/metroStyle/metroStyle.css" />
<script src="<%=basePath%>res/js/jquery.ztree.all.min.js"></script>
</head>
<body>
<div>
<ul id="regionTree" class="ztree"></ul>
</div>
<script>
var treeSetting = {
data : {
key : {
name : "treeName" //zTree 节点的名称辨识字段,默认为name
}
},
async: {
enable: true,//异步处理,默认是false。这样保证不会一次性加载所有数据。不点击节点,就不会去查下一级数据,主要针对大量数据。
url:"<%=basePath%>peam/ztree/getData3",//异步获取json格式数据的路径
autoParam:["code"],
type:"post" //提交方式
},
check : {
enable : true //设置是否显示多选框,默认为false
},
callback : {
onClick : treeClick //点击树节点,触发的事件。treeClick为自定义的事件
}
};
$.fn.zTree.init($("#regionTree"), treeSetting);
/* zTreeObj = $.fn.zTree.init($("#regionTree"), treeSetting, datas); //初始化树 */
/* zTreeObj.expandAll(true);//展开所有节点 */
//返回节点名和节点tid和节点自定义的value,一般参数使用的都是treeNode(被点击的节点 JSON 数据对象)
function treeClick(event, treeId, treeNode) {
alert( treeNode.treeName);
}
</script>
</body>
</html>
有待深入…看后续
来源:CSDN
作者:懒惰の猫
链接:https://blog.csdn.net/weixin_40496191/article/details/104627501