Ztree实现后台数据树形展示
2020-04-01 本文已影响0人
我问你瓜保熟吗
效果图
数据库
1、ZtreeController
@Controller
@RequestMapping
public class ZtreeController {
@Resource
private CityZtreeDao cityZtreeDao;
@RequestMapping("/citytree")
public String citytree() {
return "ztree";
}
@RequestMapping("/cityZtree/getCityZtree")
@ResponseBody
public Object getCityZtree(String parentId) {
if (org.apache.commons.lang.StringUtils.isNotBlank(parentId)) {
parentId = parentId;
} else {
parentId = "0";
}
// 得到父节点
List<CityZtree> parentCityList = cityZtreeDao.findCityZtreeByParentId(parentId);
// 展开子节点
List<Map<String, Object>> rootList = new ArrayList<>();
for (CityZtree cityZtree : parentCityList) {
Map<String, Object> cityMap = new HashMap<>();
cityMap.put("id", cityZtree.getId());
cityMap.put("name", cityZtree.getCityName());
if (org.apache.commons.lang.StringUtils.isNotBlank(parentId)) {
cityMap.put("pId", parentId);
} else {
cityMap.put("pId", "0");
}
if (cityZtreeDao.hasChild(cityZtree.getId()) > 0) {
cityMap.put("isParent", true);
}
rootList.add(cityMap);
}
return rootList;
}
}
2、Mapper
@Mapper
public interface CityZtreeDao {
// 根据父id查找树
@Select("select * from city_ztree where parent_id=#{parentId}")
List<CityZtree> findCityZtreeByParentId(String parentId);
// 当前节点是否还有子节点
@Select("select count(1) from city_ztree where parent_id=#{id}")
public Integer hasChild(String id);
}
3、Model
@Data
public class CityZtree {
private String id;
private String cityName;
private String parentId;
}
4、ztree.html
<!DOCTYPE html >
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<title>SpringMVC整合Ztree实现树异步加载</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" th:href="@{/ztree/zTreeStyle.css}" type="text/css">
<script th:src="@{/ztree/jquery-1.4.4.min.js}"></script>
<script th:src="@{/ztree/jquery.ztree.core.js}"></script>
<script type="text/javascript">
var setting = {
data: {
simpleData: { // 采用List模式，而不是JSON格式
enable: true
}
}, callback: {
onExpand: zTreeOnExpand, // 用于捕获节点被展开的事件回调函数
onClick: function (e, treeId, treeNode, clickFlag) {
$.fn.zTree.getZTreeObj("myZtree").checkNode(treeNode, !treeNode.checked, true);
}
}
};
//加载展开方法
function zTreeOnExpand(event, treeId, treeNode) {
var treeNodeId = treeNode.id;
$.post(
'/cityZtree/getCityZtree',
{parentId: treeNodeId},
function (data) {
var tree = $.fn.zTree.getZTreeObj("myZtree");
if (!treeNode.zAsync) {
tree.addNodes(treeNode, data);
treeNode.zAsync = true;
} else {
tree.reAsyncChildNodes(treeNode, "refresh");
}
}
);
}
//首次进入加载level为1的
$(function () {
$.post(
'/cityZtree/getCityZtree',
function (data) {
$.fn.zTree.init($("#myZtree"), setting, data);
console.log(data)
}
);
});
</script>
</head>
<body style="overflow-y: auto">
<ul id="myZtree" class="ztree"></ul>
</body>
</html>
