Ztree生成目录

最新推荐文章于 2021-10-13 15:12:55 发布
最新推荐文章于 2021-10-13 15:12:55 发布
阅读量854 收藏 2
点赞数
分类专栏： spring boot web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37164847/article/details/82838639
版权
spring boot 同时被 2 个专栏收录
146 篇文章 6 订阅
订阅专栏
web
145 篇文章 4 订阅
订阅专栏

1.生成目录如图所示：

2.前端引用Ztree:

官方demo:

把zTreeStyle这个目录复制到自己项目的css目录中，复制jquery.ztree.all.min.js文件到自己项目的js目录中：

 

html文件中引用：

<link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" />

<script type="text/javascript" src="../../js/jquery.ztree.all.min.js" ></script>

内容部分：

<ul id="treeDemo" class="ztree"></ul>

js部分：
            var setting = {
                check: {
                    enable: true,
                    chkboxType: { "Y": "ps", "N": "ps" }
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };
        function mennunetWorking () {
            $.ajax({
                type:"post",    
                url:menuneturl, 
                data:{ 
                     token:"15eecbddea044c67b93f40b56fe3882e"
                }, 
                success: function(res) {
                  //console.log("菜单树数据.："+res);

                  $.fn.zTree.init($("#treeDemo"), setting, res);
                },
                error:function() { 
                    alert("失败");
               } 
            });        
        }

3.后台(java)：

目录表数据：

 

后台返回的数据：

[{
        "id": 1,
        "pId": 0,
        "name": "系统管理",
        "open": true,
        "checked": null,
        "isOpen": true
    },
    {
        "id": 106,
        "pId": 1,
        "name": "用户管理",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 107,
        "pId": 106,
        "name": "添加用户",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 108,
        "pId": 106,
        "name": "修改用户",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 109,
        "pId": 106,
        "name": "删除用户",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 110,
        "pId": 106,
        "name": "重置密码",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 111,
        "pId": 106,
        "name": "冻结用户",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 112,
        "pId": 106,
        "name": "解除冻结用户",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 113,
        "pId": 106,
        "name": "分配角色",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 114,
        "pId": 1,
        "name": "角色管理",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 115,
        "pId": 114,
        "name": "添加角色",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 116,
        "pId": 114,
        "name": "修改角色",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 117,
        "pId": 114,
        "name": "删除角色",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 118,
        "pId": 114,
        "name": "配置权限",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 119,
        "pId": 1,
        "name": "菜单管理",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 120,
        "pId": 119,
        "name": "添加菜单",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 121,
        "pId": 119,
        "name": "修改菜单",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 122,
        "pId": 119,
        "name": "删除菜单",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 128,
        "pId": 1,
        "name": "业务日志",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 130,
        "pId": 1,
        "name": "监控管理",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 131,
        "pId": 1,
        "name": "部门管理",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 132,
        "pId": 1,
        "name": "字典管理",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 133,
        "pId": 1,
        "name": "登录日志",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 134,
        "pId": 128,
        "name": "清空日志",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 135,
        "pId": 131,
        "name": "添加部门",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 136,
        "pId": 131,
        "name": "修改部门",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 137,
        "pId": 131,
        "name": "删除部门",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 138,
        "pId": 132,
        "name": "添加字典",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 139,
        "pId": 132,
        "name": "修改字典",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 140,
        "pId": 132,
        "name": "删除字典",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 141,
        "pId": 1,
        "name": "通知管理",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 142,
        "pId": 141,
        "name": "添加通知",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 143,
        "pId": 141,
        "name": "修改通知",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 144,
        "pId": 141,
        "name": "删除通知",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 145,
        "pId": 0,
        "name": "通知",
        "open": true,
        "checked": null,
        "isOpen": true
    },
    {
        "id": 148,
        "pId": 0,
        "name": "代码生成",
        "open": true,
        "checked": null,
        "isOpen": true
    },
    {
        "id": 149,
        "pId": 0,
        "name": "接口文档",
        "open": true,
        "checked": null,
        "isOpen": true
    },
    {
        "id": 150,
        "pId": 119,
        "name": "菜单编辑跳转",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 151,
        "pId": 119,
        "name": "菜单列表",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 152,
        "pId": 131,
        "name": "修改部门跳转",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 153,
        "pId": 131,
        "name": "部门列表",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 154,
        "pId": 131,
        "name": "部门详情",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 155,
        "pId": 132,
        "name": "修改菜单跳转",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 156,
        "pId": 132,
        "name": "字典列表",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 157,
        "pId": 132,
        "name": "字典详情",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 158,
        "pId": 128,
        "name": "日志列表",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 159,
        "pId": 128,
        "name": "日志详情",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 160,
        "pId": 133,
        "name": "清空登录日志",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 161,
        "pId": 133,
        "name": "登录日志列表",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 162,
        "pId": 114,
        "name": "修改角色跳转",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 163,
        "pId": 114,
        "name": "角色分配跳转",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 164,
        "pId": 114,
        "name": "角色列表",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 165,
        "pId": 106,
        "name": "分配角色跳转",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 166,
        "pId": 106,
        "name": "编辑用户跳转",
        "open": false,
        "checked": null,
        "isOpen": false
    },
    {
        "id": 167,
        "pId": 106,
        "name": "用户列表",
        "open": false,
        "checked": null,
        "isOpen": false
    }
]

3.1实体类：

public class Menu {

    private Long id;

    /**
     * 菜单编号
     */
    private String code;
    /**
     * 菜单父编号
     */
    private String pcode;
    /**
     * 当前菜单的所有父菜单编号
     */
    private String pcodes;
    /**
     * 菜单名称
     */
    private String name;
    /**
     * 菜单图标
     */
    private String icon;
    /**
     * url地址
     */
    private String url;
    /**
     * 菜单排序号
     */
    private Integer num;
    /**
     * 菜单层级
     */
    private Integer levels;
    /**
     * 是否是菜单（1：是  0：不是）
     */
    private Integer ismenu;
    /**
     * 备注
     */
    private String tips;
    /**
     * 菜单状态 :  1:启用   0:不启用
     */
    private Integer status;
    /**
     * 是否打开:    1:打开   0:不打开
     */
    private Integer isopen;

    public Long getId() {
        return id;
    }

    public void setId(Long id) {
        this.id = id;
    }

    public String getCode() {
        return code;
    }

    public void setCode(String code) {
        this.code = code;
    }

    public String getPcode() {
        return pcode;
    }

    public void setPcode(String pcode) {
        this.pcode = pcode;
    }

    public String getPcodes() {
        return pcodes;
    }

    public void setPcodes(String pcodes) {
        this.pcodes = pcodes;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public String getIcon() {
        return icon;
    }

    public void setIcon(String icon) {
        this.icon = icon;
    }

    public String getUrl() {
        return url;
    }

    public void setUrl(String url) {
        this.url = url;
    }

    public Integer getNum() {
        return num;
    }

    public void setNum(Integer num) {
        this.num = num;
    }

    public Integer getLevels() {
        return levels;
    }

    public void setLevels(Integer levels) {
        this.levels = levels;
    }

    public Integer getIsmenu() {
        return ismenu;
    }

    public void setIsmenu(Integer ismenu) {
        this.ismenu = ismenu;
    }

    public String getTips() {
        return tips;
    }

    public void setTips(String tips) {
        this.tips = tips;
    }

    public Integer getStatus() {
        return status;
    }

    public void setStatus(Integer status) {
        this.status = status;
    }

    public Integer getIsopen() {
        return isopen;
    }

    public void setIsopen(Integer isopen) {
        this.isopen = isopen;
    }

}

3.2dao层：

import com.sqxinxibu.neikanhoutai.node.ZTreeNode;

import java.util.List;

public interface MenuMapper {
    /**
     * 获取菜单列表树
     */
    List<ZTreeNode> menuTreeList();
}

3.3dao层对应的mapper：

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.sqxinxibu.neikanhoutai.dao.MenuMapper">

   <!-- 通用查询映射结果 -->
   <resultMap id="BaseResultMap" type="com.sqxinxibu.neikanhoutai.entity.Menu">
      <id column="id" property="id" />
      <result column="code" property="code" />
      <result column="pcode" property="pcode" />
      <result column="pcodes" property="pcodes" />
      <result column="name" property="name" />
      <result column="icon" property="icon" />
      <result column="url" property="url" />
      <result column="num" property="num" />
      <result column="levels" property="levels" />
      <result column="ismenu" property="ismenu" />
      <result column="tips" property="tips" />
      <result column="status" property="status" />
      <result column="isopen" property="isopen" />
   </resultMap>

    <sql id="Base_Column_List">
        id, code, pcode, name, icon, url, num, levels,pcodes,
        tips, status,isopen,ismenu
    </sql>

    <!--查询菜单树-->
    <select id="menuTreeList" resultType="com.sqxinxibu.neikanhoutai.node.ZTreeNode">
        SELECT
        m1.id AS id,
        (
        CASE
        WHEN (m2.id = 0 OR m2.id IS NULL) THEN
        0
        ELSE
        m2.id
        END
        ) AS pId,
        m1. NAME
        AS NAME,
        (
        CASE
        WHEN (m2.id = 0 OR m2.id IS NULL) THEN
        'true'
        ELSE
        'false'
        END
        ) as isOpen
        FROM
        sys_menu m1
        LEFT join sys_menu m2 ON m1.pcode = m2. CODE
        ORDER BY
        m1.id ASC
    </select>
</mapper>

3.4service层：
 

package com.sqxinxibu.neikanhoutai.service.Impl;

import com.alibaba.fastjson.JSON;
import com.sqxinxibu.neikanhoutai.dao.MenuDao;
import com.sqxinxibu.neikanhoutai.dao.MenuMapper;
import com.sqxinxibu.neikanhoutai.entity.Menu;
import com.sqxinxibu.neikanhoutai.entity.MenuData;
import com.sqxinxibu.neikanhoutai.node.ZTreeNode;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Component;
import org.springframework.stereotype.Service;

import javax.annotation.Resource;
import java.util.List;

@Service
@Component
public class MenuService {
    @Resource
    private MenuMapper menuMapper;//获取菜单列表树

    //查询菜单树
    public List<ZTreeNode> menuTreeList(){
        List<ZTreeNode> zTreeNodeList=menuMapper.menuTreeList();
        System.out.println("获取菜单列表树："+JSON.toJSONString(zTreeNodeList));
        return  zTreeNodeList;
    }
}

3.5controller层：
 

import com.sqxinxibu.neikanhoutai.entity.MenuData;
import com.sqxinxibu.neikanhoutai.node.ZTreeNode;
import com.sqxinxibu.neikanhoutai.service.Impl.MenuService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

//菜单控制器
@RestController
@RequestMapping("/menu")
public class MenuController {

    @Autowired
    private MenuService menuService;

    //获取菜单列表树
    @RequestMapping("/menuTreelist")
    public List<ZTreeNode> menuTreeList(){
          return menuService.menuTreeList();
    }


}
大海无量波涛凶
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
zTree实现目录树
hopeman307的博客
10-20 1242
zTree应用小记
【Python】遍历文件夹，生成zTree的Json目录树
cxym2022的博客
07-21 948
python遍历文件夹，生成zTree的目录树
ztree生成树的目录结构，且自定义图片+模态框
私は悪い人ですか的博客
12-07 466
只有前端的页面和JS没有后台，数据库表的结构看图，页面使用了layer和ztree自行拷贝官方的js和css文件 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <script type="text/javascript"> ...
Ztree树状图文件目录
阑珊处的秋月博客
10-13 809
项目场景 使用第三方插件制作层级分明的文件目录,并实现跳转,修改文件名,删除文件,添加新文件的功能。 一、Ztree介绍 1.Ztree是什么？ zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。zTree 是开源免费的软件（MIT 许可证）。 2.为什么用Ztree？ 采用了 延迟加载 技术，上万节点轻松加载，即使在 IE6 下也能基本做到秒杀。 兼容 IE、FireFox、Ch...
oracle 生成目录树,jQuery zTree插件快速实现目录树
weixin_42300144的博客
04-09 147
ztree是JQuery的一个开源树形目录的插件，用来快速构建网站的树形目录结构，并且提供了功能丰富，利于扩展的API。JQuery ztree官网只要引入jquery和ztree的库js，然后给ztree提供需要的json数据，并且设置好ztress的属性，就可以即刻展示出树形目录。总结下来，要使用ztree的话，必须要完成以下几步：1. 引入库文件jquery.jsztree.jsztree....
zTree生成动态树
daydayup0658的博客
09-14 158
环境搭建：需要jquery 1.4+，jquery.ztree.core-3.1.min.js，ztree自带的css文件和图片，并且css文件和图片文件夹要处于同一目录(很重要)，否则动态树无法正常显示。数据库的设计：CREATE TABLE `function` (                `id` int(4) NOT NULL AUTO_INCREMENT,         ...
使用zTree生成属性菜单
DDKii的博客
12-18 674
一:zTree下载 1.官网:http://www.treejs.cn/v3/main.php#_zTreeInfo 2.下载: 该链接指向码云地址:https://gitee.com/zTree/zTree_v3,使用小乌龟clone一下即可二:zTree目录结构 打开js目录, 1.jQuery-1.4.4.min.j
ztree java树图 树型结构 jsp servlet jso_FastJson+Ztree：根据数据库层级表生成目录树...
weixin_42513512的博客
02-28 188
目标：从数据库层级表：到目录树结构的实现全过程：中间产生的JSON数据：实现途径：配置jdbc数据源，从数据库中读取以上的层级表，将所有的记录存到ArrayList中，利用fastJson将其解析成JSON数据格式(序列化)，而后利用ztree生成目录树结构。工具版本：fastJson1.1.9, ztree3.5,jdk1.7, struts1.2, jquery1.4, oracle9i实...
zTree.js读取XML文件动态生成目录树
ssss_cccc的博客
08-04 431
Ztree无法直接加载xml类型的文件，可以先将xml数据读取成json格式的字符串或者直接将数据规整为一个list。 ztree设置 var settingss = { data: { simpleData: { enable: true, //true 、 false 分别表示 使用 、 不使用 简单数据模式 idKey: "nodeID", //节点数据中保存唯一标识的属性名称 pIdKey
开关电源中，穿越频率的大致选择范围
08-05
在开关电源设计之中，穿越频率是一个相当重要的指标。在文中从就开关电源设计中的环路反馈控制方法、环路增益作 用进行了阐述。并在此基础上就穿越频率选取的限制条件进行分析，为开关电源设计中的穿越频率选取提供借鉴。 穿越频率 ；开关电源设计 ；选取方法 ；限制条件 开关电源设计过程中，环路反馈控制回路的的性能决定了电 源的精度和整体性能，因此设计一个优良的环路控制回路对开发 一个开关电源系统至关重要。其中穿越频率的选取又是反馈回路 设计中的关键因数。
销售员各月销售提成计算.xlsx.xlsx
08-05
销售管理表，财务报表，占比分析，消费能力分析，日程安排，提成表，考核表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
营销数据看板-多样式分析销售数.xlsx.xlsx
08-05
销售管理表，财务报表，占比分析，消费能力分析，日程安排，提成表，考核表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
新产品市场调查结果与分析.xlsx.xlsx
08-05
销售管理表，财务报表，占比分析，消费能力分析，日程安排，提成表，考核表 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
政企数字化转型数据治理平台解决方案（32页）.pptx
08-05
政企数字化转型数据治理平台解决方案（32页）
源代码-YimonTemplate (ASP模板引擎) v1.5.20120823 UTF8.zip
08-05
源代码-YimonTemplate (ASP模板引擎) v1.5.20120823 UTF8.zip
Springboot+Vue新闻发布推荐系统 java毕业设计 源码+sql脚本+论文 完整版
08-05
这个是完整源码 SpringBoot+Vue实现 Springboot+Vue新闻发布推荐系统 java毕业设计 源码+sql脚本+论文 完整版 数据库是mysql 随着信息互联网购物的飞速发展，国内放开了自媒体的政策，一般企业都开始开发属于自己内容分发平台的网站。本文介绍了新闻推荐系统的开发全过程。通过分析企业对于新闻推荐系统的需求，创建了一个计算机管理新闻推荐系统的方案。文章介绍了新闻推荐系统的系统分析部分，包括可行性分析等，系统设计部分主要介绍了系统功能设计和数据库设计。 本新闻推荐系统有管理员和用户两个角色。管理员功能有个人中心，用户管理，排行榜管理，新闻管理，我的收藏管理，系统管理等。用户功能可以在首页查看新闻排行榜，新闻信息，并可以注册登录，收藏新闻，对新闻评论。用户注册登录，评论新闻，收藏新闻，查看新闻，搜索新闻。因而具有一定的实用性。 本站是一个B/S模式系统，采用Spring Boot框架作为开发技术，MYSQL数据库设计开发，充分保证系统的稳定性。系统具有界面清晰、操作简单，功能齐全的特点，使得新闻推荐系统管理工作系统化、规范化。采用Spring Boot框架作为开
思科华为命令对照大全 网工必备
08-05
思科华为命令对照大全 网工必备
WebSphere系统安全加固规范.pdf
最新发布
08-05
WebSphere系统安全加固规范.pdf
ztree生成树默认是展开状态
05-25
ztree生成树默认情况下是折叠状态，需要设置`expandAll: true`参数来让树节点默认展开。例如： ``` var zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes); zTreeObj.expandAll(true); ``` 在初始化树...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值