zTree+数据库调用 demo

最新推荐文章于 2023-12-12 11:21:28 发布

staHuri

最新推荐文章于 2023-12-12 11:21:28 发布

阅读量506

点赞数

分类专栏： JAVA

本文链接：https://blog.csdn.net/staHuri/article/details/87108988

版权

JAVA 专栏收录该内容

56 篇文章 3 订阅

订阅专栏

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>

向数据库添加数据

staHuri

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
zTree+数据库调用 demo

zTree+数据库调用 demo需求利用zTree 和mysql数据库制作树形图实例TreeObj 树状图实体类package com.wang.wgis.pojo;import lombok.Data;import lombok.NoArgsConstructor;import javax.persistence.*;import java.util.ArrayLis...
复制链接

扫一扫

专栏目录