zTree+数据库调用 demo
需求
利用zTree 和mysql数据库制作树形图
实例
- TreeObj 树状图实体类
package com.wang.wgis.pojo;
import lombok.Data;
import lombok.NoArgsConstructor;
import javax.persistence.*;
import java.util.ArrayList;
import java.util.List;
/**
* 描述:
* 树状图
*
* @author huifer
* @date 2019-02-12
*/
@Data
@NoArgsConstructor
@Entity
public class TreeObj {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private Integer id;
private String name;
private Integer pid;
private String url;
@Transient
private boolean open = true;
@Transient
private boolean checked = false;
@Transient
private List<TreeObj> children = new ArrayList<>();
@Transient
private String icon;
}
- Repository
package com.wang.wgis.repository;
import com.wang.wgis.pojo.TreeObj;
import org.springframework.data.jpa.repository.JpaRepository;
import org.springframework.stereotype.Repository;
/**
* 描述:
* 树状图
* @author huifer
* @date 2019-02-12
*/
@Repository
public interface TreeObjRepository extends JpaRepository<TreeObj, Integer> {
}
package com.wang.wgis.service;
import com.wang.wgis.pojo.TreeObj;
import com.wang.wgis.repository.TreeObjRepository;
import org.springframework.stereotype.Service;
import javax.annotation.Resource;
import java.util.List;
/**
* 描述:
* tree service
*
* @author huifer
* @date 2019-02-12
*/
@Service
public class TreeObjService {
@Resource
private TreeObjRepository treeObjRepository;
public List<TreeObj> findAll() {
List<TreeObj> all = treeObjRepository.findAll();
return all;
}
public TreeObj save(TreeObj treeObj) {
TreeObj save = treeObjRepository.save(treeObj);
return save;
}
}
- controller
// 加载数据
@ResponseBody
@RequestMapping("loadData")
public Object loadData() {
List<TreeObj> treeObjList = new ArrayList<>();
List<TreeObj> all = treeObjService.findAll();
Map<Integer, TreeObj> treeObjHashMap = new HashMap<>();
for (TreeObj treeObj : all) {
treeObjHashMap.put(treeObj.getId(), treeObj);
}
for (TreeObj treeObj : all) {
TreeObj child = treeObj;
if (child.getPid() == 0) {
treeObjList.add(treeObj);
} else {
TreeObj parent = treeObjHashMap.get(child.getPid());
parent.getChildren().add(child);
}
}
return treeObjList;
}
/**
* 跳转页面
*/
@RequestMapping("/tree")
public String tree(){
return "tree";
}
- 前端显示
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>tree</title>
<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/css/font-awesome.min.css}">
<link rel="stylesheet" th:href="@{/css/main.css}">
<link rel="stylesheet" th:href="@{/css/doc.min.css}">
<link rel="stylesheet" th:href="@{/ztree/zTreeStyle.css}">
<style>
.tree li {
list-style-type: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="panel-body">
<ul id="treeDemo" class="ztree"></ul>
</div>
</body>
<script th:src="@{jquery/jquery-2.1.1.min.js}"></script>
<script th:src="@{bootstrap/js/bootstrap.min.js}"></script>
<script th:src="@{script/docs.min.js}"></script>
<script th:src="@{ztree/jquery.ztree.all-3.5.min.js}"></script>
<script th:src="@{layer/layer.js}"></script>
<script type="text/javascript">
$(function () {
$(".list-group-item").click(function () {
if ($(this).find("ul")) {
$(this).toggleClass("tree-closed");
if ($(this).hasClass("tree-closed")) {
$("ul", this).hide("fast");
} else {
$("ul", this).show("fast");
}
}
});
var setting = {
check: {
enable: true
},
view: {
selectedMulti: false,
addDiyDom: function (treeId, treeNode) {
var icoObj = $("#" + treeNode.tId + "_ico"); // tId = permissionTree_1, $("#permissionTree_1_ico")
if (treeNode.icon) {
icoObj.removeClass("button ico_docu ico_open").addClass("fa fa-fw " + treeNode.icon).css("background", "");
}
},
addHoverDom: function (treeId, treeNode) {
var aObj = $("#" + treeNode.tId + "_a"); // tId = permissionTree_1, ==> $("#permissionTree_1_a")
aObj.attr("href", "javascript:;");
if (treeNode.editNameFlag || $("#btnGroup" + treeNode.tId).length > 0) return;
},
removeHoverDom: function (treeId, treeNode) {
$("#btnGroup" + treeNode.tId).remove();
}
},
async: {
enable: true,
url: "/loadData",
autoParam: ["id", "name=n", "level=lv"]
},
callback: {
onClick: function (event, treeId, json) {
console.log("选中id" + json.id);
var node = zTree.getNodeByParam("id", json.id);
if (node != null) {
zTree.checkNode(node, true);
// TODO: 访问url
}
},
onCheck: function (event, treeId, json) {
console.log("勾选id" + json.id);
console.log();
}
}
};
var zTree = $.fn.zTree.init($("#treeDemo"), setting);
});
</script>
</html>
- 向数据库添加数据