树形菜单中分为了父级菜单和子级菜单，在数据库表中pid为-1的为一级菜单，pid为表中某个菜单的id说明他们是父子关系。为了使我们的树形菜单变为动态而不是在jsp页面中定死，在后端我们需要将父级菜单和子级菜单分类，在遍历父级菜单的同时遍历子级菜单，根据id和pid找到他们相对应的关系。在前端我们使用ajax进行拼接，拿到后端传过来的方法进行遍历，用HasChildren判断是否存在子节点，存在即继续拼接。

数据库表：

思维导图：

一、后端

1、我们先根据数据库表的结构建立实体类

package com.zking.entity;/*** 菜单实体类* @author 朱佳音**/
public class Permission {private long id;private String name;//菜单名private String description;//描述private String url;//点击菜单跳转页面private long pid;//父级菜单的idprivate int ismenu;//菜单、按钮private long displayno;//显示的顺序public long getId() {return id;}public void setId(long id) {this.id = id;}public String getName() {return name;}public void setName(String name) {this.name = name;}public String getDescription() {return description;}public void setDescription(String description) {this.description = description;}public String getUrl() {return url;}public void setUrl(String url) {this.url = url;}public long getPid() {return pid;}public void setPid(long pid) {this.pid = pid;}public int getIsmenu() {return ismenu;}public void setIsmenu(int ismenu) {this.ismenu = ismenu;}public long getDisplayno() {return displayno;}public void setDisplayno(long displayno) {this.displayno = displayno;}public Permission() {// TODO Auto-generated constructor stub}public Permission(long id, String name, String description, String url, long pid, int ismenu, long displayno) {super();this.id = id;this.name = name;this.description = description;this.url = url;this.pid = pid;this.ismenu = ismenu;this.displayno = displayno;}@Overridepublic String toString() {return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url + ", pid="+ pid + ", ismenu=" + ismenu + ", displayno=" + displayno + "]";}}

2、Dao层方法

在Dao层我们需要定义两个查询方法，一个是继承自通用BaseDao的查询方法，一个是将父级菜单和子级菜单分类，达到我们最终需要的分层级菜单的效果

查询方法一：

public List<Permission> list(Permission permission,  PageBean pageBean) throws Exception {String sql = "select * from t_oa_permission";return super.executeQuery(sql, Permission.class, pageBean);}

菜单分类方法：

public List<TreeVo<Permission>> menus(Permission permission,  PageBean pageBean) throws Exception {List<TreeVo<Permission>> trees = new ArrayList<TreeVo<Permission>>();List<Permission> list = this.list(permission, pageBean);for (Permission p : list) {TreeVo<Permission> vo = new TreeVo<>();vo.setId(p.getId()+"");vo.setText(p.getName());vo.setParentId(p.getPid()+"");trees.add(vo);}return BuildTree.buildList(trees, "-1");}

在这个方法里我们调用了一个底层封装类TreeVo用来调用该类里面的属性，这是一个通用的菜单类。

为了实现父级菜单和子级菜单的分层，遍历菜单集合时，实例化了通用菜单，然后我们将菜单类的节点id和节点名称以及父节点id赋值到通用菜单中，再将这个集合trees加到通用菜单里，返回的是构造树BuildTree里的.buildList方法调用的参数是trees和顶级菜单的节点id‘-1’，在底层自动判断是否存在子节点或者父节点，然后实现父级菜单和子级菜单的分层。

public static <T> List<TreeVo<T>> buildList(List<TreeVo<T>> nodes, String idParam) {if (nodes == null) {return null;}List<TreeVo<T>> topNodes = new ArrayList<TreeVo<T>>();for (TreeVo<T> children : nodes) {String pid = children.getParentId();if (pid == null || idParam.equals(pid)) {topNodes.add(children);continue;}for (TreeVo<T> parent : nodes) {String id = parent.getId();if (id != null && id.equals(pid)) {parent.getChildren().add(children);children.setHasParent(true);parent.setChildren(true);continue;}}}return topNodes;}

3、Web层

建立一个PermissionAction，继承Actionsupport并实现模型接口类ModuleDriver

package com.zking.web;import java.util.List;import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.xml.ws.Response;import com.zking.dao.PermissionDao;
import com.zking.entity.Permission;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
import com.zking.util.TreeVo;public class PermissionAction extends ActionSupport implements ModelDriver<Permission>{private Permission Permission = new Permission();private PermissionDao permissionDao = new PermissionDao();@Overridepublic Permission getModel() {// TODO Auto-generated method stubreturn Permission;}public String menus(HttpServletRequest req, HttpServletResponse resp) {try {List<TreeVo<Permission>> menus = permissionDao.menus(null, null);//向前端相应数据ResponseUtil.write(resp, menus);} catch (Exception e) {e.printStackTrace();}return null;}
}

4、配置Xml文件

<?xml version="1.0" encoding="UTF-8"?>
<config><action path="/blog" type="com.zking.web.BlogAction"><forward name="list" path="/blogList.jsp" redirect="false" /><forward name="toList" path="/blog.action?methodName=list"redirect="true" /><forward name="toEdit" path="/blogEdit.jsp" redirect="false" /></action><action path="/user" type="com.zking.web.UserAction">
</action><action path="/permission" type="com.zking.web.PermissionAction">
</action></config>

二、前端

前端主要是在main.jsp界面将之前写死的树形菜单的左侧导航格式变成动态的，

使用AJAX将标签拼接，拿到后端传过来的方法，获取它的节点和节点名称

<script>
//JS
layui.use['jquery'],function(){let $ = layui.jquery;$.ajax({url:'${pageContext.request.contextPath }/permission.action?methodName=menus',dataType:'json',success:function(data){console.log(data);let htmlstr = '';$.each(data,function(i,n){htmlstr+='<li class="layui-nav-item layui-nav-itemed">';htmlstr+='     <a class="" href="javascript:;">'+data[i].text+'</a>';//判断当前一级节点是否存在子节点if(data[i].hasChildren){htmlstr += '<dl class="layui-nav-child">'let children = data[i].children;$.each(children,function(index,node){htmlstr += ' <dd><a href="javascript:;">'+children[index].text+'</a></dd>';});htmlstr += '</dl>';}htmlstr+='<li>';});$("#menu").html(htmlstr);}});
});</script>

总结：很多方法都在底层封装好了，我们只需要拿过来根据我们的需求稍作修改就好，动态树形菜单最关键的点在于我们得捋清楚哪些是父级菜单和子级菜单。

LayUI 之动态树形菜单相关推荐

（JSON）无限级动态树形菜单升华版
为什么说这个是升华版的呢,因为以前做的无限级动态树形菜单是单个的,孤立的,只要读取出来的,单纯的......说了那么多,还不如一张图来的实在.放图一张不行,那就两张,接着放图图片中的文字都是自己瞎 ...
java数据库动态树形菜单_bootstrap treeview树形菜单动态扩展连数据库
二话不说,先来看效果图: 呃呃,虽然不是很美观......不过功能实现就好啦~ 数据库模型是这样的: 我做了什么工作呢? 简单解释一下,就是通过查数据库,把上面的数据查出来,每一行数据封装成为一个节点 ...
Layui 树形菜单使用
一:如果你的项目中用到了树形菜单,Layui 也许是一个不错的选择:Layui 官方网站链接. 二:使用简介: 1.前端界面,项目中导入Layui 框架 2.前端界面,使用树形菜单控件,由于是Java ...
layui树形菜单右键_layui-treetable
最新版本是基于layui v2.2.3, 附件中有layui v1.0.7 2018.4.28 Updated 添加了全选checkbox 另外demo.html删掉部分代码,以免监听事件冲突 201 ...
来了老弟，Layui树形菜单tree
咳咳,大家都叫我万恶的小编. 关于树形菜单这方面layui也是有着一个独立的模块(Tree)的.之前貌似是把这个模块给下下去了的(至于为啥的话小编也就不知道了),在2.5版本的时候才被作者贤心给重新加 ...
MVC +easyui +json 前后端交互动态生成树形菜单
效果图: 1.view端代码实现,引入jquery.easyui 的js文件,创建树形菜单标签<ul>,如下所示: @{ViewBag.Title = "Home Page&qu ...
layui树形菜单右键_layui树形菜单写的树形列表（treetable）
基于layui v2.2.5的 layui-tree写了一个treetable(树形列表) 效果 1.1 收起效果图 1.2 展开效果图 1.开发预备首先需要到layui官网https://www. ...
动态html树形菜单模板,JS+CSS简易树状菜单Tree
/p> "http://www.w3.org/TR/html4/loose.dtd"> 树形菜单实例-www.mb5u.com function showhide_ob ...
Spring Security 实现动态权限菜单方案（附源码）
点击关注公众号,实用技术文章及时了解系统权限管理 1.前言在实际开发中,开发任何一套系统,基本都少不了权限管理这一块.这些足以说明权限管理的重要性.其实SpringSecurity去年就学了,一直 ...
Unity 引擎UGUI之自定义树形菜单（TreeView）
先上几张效果图: 如果你需要的也是这种效果,那你就来对地方了! 目前,我们这个树形菜单展现出来的功能如下: 1.可以动态配置数据源: 2.点击每个元素的上下文菜单按钮(也就是图中的三 ...

LayUI 之动态树形菜单

数据库表：

思维导图：

一、后端

1、我们先根据数据库表的结构建立实体类

2、Dao层方法

在Dao层我们需要定义两个查询方法，一个是继承自通用BaseDao的查询方法，一个是将父级菜单和子级菜单分类，达到我们最终需要的分层级菜单的效果

查询方法一：

菜单分类方法：

在这个方法里我们调用了一个底层封装类TreeVo用来调用该类里面的属性，这是一个通用的菜单类。

3、Web层

建立一个PermissionAction，继承Actionsupport并实现模型接口类ModuleDriver

4、配置Xml文件

二、前端

前端主要是在main.jsp界面将之前写死的树形菜单的左侧导航格式变成动态的，

使用AJAX将标签拼接，拿到后端传过来的方法，获取它的节点和节点名称

总结：很多方法都在底层封装好了，我们只需要拿过来根据我们的需求稍作修改就好，动态树形菜单最关键的点在于我们得捋清楚哪些是父级菜单和子级菜单。

LayUI 之动态树形菜单相关推荐

最新文章

热门文章