我们需要将如下数据展示在动态树当中
表名:t_oa_permission

从layui中得到的动态树模型代码
main.jsp页面代码展示:
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <%@ include file="common/head.jsp" %>
- html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Insert title heretitle>
- head>
- <body>
- <div class="layui-layout layui-layout-admin">
- <div class="layui-header">
- <div class="layui-logo layui-hide-xs layui-bg-black">layout demodiv>
-
- <ul class="layui-nav layui-layout-left">
-
- <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
- <i class="layui-icon layui-icon-spread-left">i>
- li>
-
- <li class="layui-nav-item layui-hide-xs"><a href="">nav 1a>li>
- <li class="layui-nav-item layui-hide-xs"><a href="">nav 2a>li>
- <li class="layui-nav-item layui-hide-xs"><a href="">nav 3a>li>
- <li class="layui-nav-item">
- <a href="javascript:;">nav groupsa>
- <dl class="layui-nav-child">
- <dd><a href="">menu 11a>dd>
- <dd><a href="">menu 22a>dd>
- <dd><a href="">menu 33a>dd>
- dl>
- li>
- ul>
-
- <ul class="layui-nav layui-layout-right">
- <li class="layui-nav-item layui-hide layui-show-md-inline-block">
- <a href="javascript:;">
- <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
- tester
- a>
- <dl class="layui-nav-child">
- <dd><a href="">Your Profilea>dd>
- <dd><a href="">Settingsa>dd>
- <dd><a href="login.jsp">Sign outa>dd>
- dl>
- li>
- <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
- <a href="javascript:;">
- <i class="layui-icon layui-icon-more-vertical">i>
- a>
- li>
- ul>
- div>
-
- <div class="layui-side layui-bg-black">
- <div class="layui-side-scroll">
-
- <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
- <li class="layui-nav-item layui-nav-itemed">
- <a class="" href="javascript:;">menu group 1a>
- <dl class="layui-nav-child">
- <dd><a href="javascript:;">menu 1a>dd>
- <dd><a href="javascript:;">menu 2a>dd>
- <dd><a href="javascript:;">menu 3a>dd>
- <dd><a href="">the linksa>dd>
- dl>
- li>
- <li class="layui-nav-item">
- <a href="javascript:;">menu group 2a>
- <dl class="layui-nav-child">
- <dd><a href="javascript:;">list 1a>dd>
- <dd><a href="javascript:;">list 2a>dd>
- <dd><a href="">超链接a>dd>
- dl>
- li>
- <li class="layui-nav-item"><a href="javascript:;">click menu itema>li>
- <li class="layui-nav-item"><a href="">the linksa>li>
- ul>
- div>
- div>
-
- <div class="layui-body">
-
- <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径div>
- div>
-
- <div class="layui-footer">
-
- 底部固定区域
- div>
- div>
- body>
- html>
动态树页面效果展示:

将t_oa_permission表中的列名编写在实体类当中,在数据库中使用指令desc * from 表名 查看表结构 以此判断列名的数据类型
注意: 数据类型需要保持一致,否则无效
创建实体类Permission:
- package com.zking.entity;
-
- //数据库中t_oa_Permission表对应的实体类
- public class Permission {
- private long id;//id
- private String name;//菜单名
- private String description;//菜单描述
- private String url;//点击菜单跳转页面
- private long pid;//父级菜单的id
- private 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;
- }
- @Override
- public String toString() {
- return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url + ", pid="
- + pid + ", ismenu=" + ismenu + ", displayno=" + displayno + "]";
- }
-
-
- }
-
PermissionDao方法
- package com.zking.dao;
-
- import java.util.ArrayList;
- import java.util.Iterator;
- import java.util.List;
-
- import com.zking.entity.Permission;
- import com.zking.util.BaseDao;
- import com.zking.util.BuildTree;
- import com.zking.util.PageBean;
- import com.zking.util.TreeVo;
-
- public class permissionDao extends BaseDao
{ -
- //查询t_oa_permission表中的数据
- public List
list(Permission permission, PageBean pageBean) throws Exception { - String sql = "select * from t_ao_permission";
- return super.executeQuery(sql, Permission.class, pageBean);
- }
-
- public List
> menus(Permission permission, PageBean pageBean) throws Exception { - List
> trees = new ArrayList>(); - //从数据库拿到的菜单数据,此时数据是平级的,不具备父子关系
- List
list = this.list(permission, pageBean); - for (Permission p : list) {
- TreeVo
vo = new TreeVo<>(); - vo.setId(p.getId()+"");
- vo.setText(p.getName());
- vo.setParentId(p.getPid()+"");//节点的父id
- trees.add(vo);
- }
- return BuildTree.buildList(trees, "-1");
- }
-
-
-
- }
-
permissionDaoTest 测试
- package com.zking.dao;
-
- import static org.junit.jupiter.api.Assertions.*;
-
- import java.util.List;
-
- import org.junit.jupiter.api.Test;
-
- import com.fasterxml.jackson.databind.ObjectMapper;
- import com.zking.entity.Permission;
- import com.zking.util.TreeVo;
-
- class PermissionDaoTest {
-
- private PermissionDao menudao =new PermissionDao();
-
- @Test
- void testList() {
- try {
- List
list = menudao.list(null, null); - for (Permission permission : list) {
- System.out.println(permission);
- }
- ObjectMapper om = new ObjectMapper();
- System.out.println(om.writeValueAsString(list));
- } catch (Exception e) {
- // TODO Auto-generated catch block
- e.printStackTrace();
- }
- }
-
- @Test
- void testMenus() {
- try {
- List
> list = menudao.menus(null, null); - for (TreeVo
permission: list) { - System.out.println(permission);
- }
- ObjectMapper om = new ObjectMapper();
- System.out.println(om.writeValueAsString(list));
- } catch (Exception e) {
- // TODO Auto-generated catch block
- e.printStackTrace();
- }
- }
- }
测试testlist方法:

测试testMenus方法:
三,将表中的数据构建父子关系BuildTree类:
- package com.zking.util;
-
- import java.util.ArrayList;
- import java.util.HashMap;
- import java.util.List;
- import java.util.Map;
-
- public class BuildTree {
-
- /**
- * 默认-1为顶级节点
- * @param nodes
- * @param
- * @return
- */
- public static
TreeVo build(List> nodes) { -
- if (nodes == null) {
- return null;
- }
- List
> topNodes = new ArrayList>(); -
- for (TreeVo
children : nodes) { - String pid = children.getParentId();
- if (pid == null || "-1".equals(pid)) {
- topNodes.add(children);
-
- continue;
- }
-
- for (TreeVo
parent : nodes) { - String id = parent.getId();
- if (id != null && id.equals(pid)) {
- parent.getChildren().add(children);
- children.setHasParent(true);
- parent.setChildren(true);
- continue;
- }
- }
-
- }
-
- TreeVo
root = new TreeVo(); - if (topNodes.size() == 1) {
- root = topNodes.get(0);
- } else {
- root.setId("000");
- root.setParentId("-1");
- root.setHasParent(false);
- root.setChildren(true);
- root.setChecked(true);
- root.setChildren(topNodes);
- root.setText("顶级节点");
- Map
state = new HashMap<>(16); - state.put("opened", true);
- root.setState(state);
- }
-
- return root;
- }
-
- /**
- * 指定idparam为顶级节点
- * @param nodes
- * @param idParam
- * @param
- * @return
- */
- public static
List> buildList(List> nodes, String idParam) { - if (nodes == null) {
- return null;
- }
- List
> topNodes = new ArrayList>(); -
- for (TreeVo
children : nodes) { -
- String pid = children.getParentId();
- if (pid == null || idParam.equals(pid)) {
- topNodes.add(children);
-
- continue;
- }
-
- for (TreeVo
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;
- }
-
- }
Treevo实体类:
- package com.zking.util;
-
- import java.util.ArrayList;
- import java.util.List;
- import java.util.Map;
-
-
- public class TreeVo
{ - /**
- * 节点ID
- */
- private String id;
- /**
- * 显示节点id
- */
- private String text;
- /**
- * 节点状态,open closed
- */
- private Map
state; - /**
- *节点是否被选中 true false
- */
- private boolean checked = false;
- /**
- * 节点属性
- */
- private Map
attributes; -
- /**
- * 节点的子节点
- */
- private List
> children = new ArrayList>(); -
- /**
- * 父id
- */
- private String parentId;
- /**
- * 是否有父节点
- */
- private boolean hasParent = false;
- /**
- * 是否有子节点
- */
- private boolean hasChildren = false;
-
- public String getId() {
- return id;
- }
-
- public void setId(String id) {
- this.id = id;
- }
-
- public String getText() {
- return text;
- }
-
- public void setText(String text) {
- this.text = text;
- }
-
- public Map
getState() { - return state;
- }
-
- public void setState(Map
state) { - this.state = state;
- }
-
- public boolean isChecked() {
- return checked;
- }
-
- public void setChecked(boolean checked) {
- this.checked = checked;
- }
-
- public Map
getAttributes() { - return attributes;
- }
-
- public void setAttributes(Map
attributes) { - this.attributes = attributes;
- }
-
- public List
> getChildren() { - return children;
- }
-
- public void setChildren(List
> children) { - this.children = children;
- }
-
- public boolean isHasParent() {
- return hasParent;
- }
-
- public void setHasParent(boolean isParent) {
- this.hasParent = isParent;
- }
-
- public boolean isHasChildren() {
- return hasChildren;
- }
-
- public void setChildren(boolean isChildren) {
- this.hasChildren = isChildren;
- }
-
- public String getParentId() {
- return parentId;
- }
-
- public void setParentId(String parentId) {
- this.parentId = parentId;
- }
-
- public TreeVo(String id, String text, Map
state, boolean checked, Map attributes, - List
> children, boolean isParent, boolean isChildren, String parentID) { - super();
- this.id = id;
- this.text = text;
- this.state = state;
- this.checked = checked;
- this.attributes = attributes;
- this.children = children;
- this.hasParent = isParent;
- this.hasChildren = isChildren;
- this.parentId = parentID;
- }
-
- public TreeVo() {
- super();
- }
-
- }
permissionDao
- package com.zking.dao;
-
- import java.util.ArrayList;
- import java.util.Iterator;
- import java.util.List;
-
- import com.zking.entity.Permission;
- import com.zking.util.BaseDao;
- import com.zking.util.BuildTree;
- import com.zking.util.PageBean;
- import com.zking.util.TreeVo;
-
- public class permissionDao extends BaseDao
{ - public List
> menus(Permission permission, PageBean pageBean) throws Exception { - List
> trees = new ArrayList>(); - //从数据库拿到的菜单数据,此时数据是平级的,不具备父子关系
- List
list = this.list(permission, pageBean); - for (Permission p : list) {
- TreeVo
vo = new TreeVo<>(); - vo.setId(p.getId()+"");
- vo.setText(p.getName());
- vo.setParentId(p.getPid()+"");//节点的父id
- trees.add(vo);
- }
- return BuildTree.buildList(trees, "-1");
- }
- }
-
建立一个PermissionAction:
- package com.zking.web;
-
- import java.util.List;
-
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
-
- 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
{ -
- private Permission permission = new Permission();
- permissionDao permissiondao = new permissionDao();
- @Override
- public Permission getModel() {
- return permission;
- }
-
-
- public String menus(HttpServletRequest req, HttpServletResponse resp) {
- try {
- List
> menus = permissiondao.menus(null, null); - //向前端响应数据
- ResponseUtil.writeJson(resp, menus);
- } catch (Exception e) {
- e.printStackTrace();
- }
- return null;
- }
-
- }
-
修改main界面(主界面):
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <%@ include file="common/head.jsp" %>
- html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>Insert title heretitle>
- head>
- <body>
- <div class="layui-layout layui-layout-admin">
- <div class="layui-header">
- <div class="layui-logo layui-hide-xs layui-bg-black">layout demodiv>
-
- <ul class="layui-nav layui-layout-left">
-
- <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
- <i class="layui-icon layui-icon-spread-left">i>
- li>
-
- <li class="layui-nav-item layui-hide-xs"><a href="">nav 1a>li>
- <li class="layui-nav-item layui-hide-xs"><a href="">nav 2a>li>
- <li class="layui-nav-item layui-hide-xs"><a href="">nav 3a>li>
- <li class="layui-nav-item">
- <a href="javascript:;">nav groupsa>
- <dl class="layui-nav-child">
- <dd><a href="">menu 11a>dd>
- <dd><a href="">menu 22a>dd>
- <dd><a href="">menu 33a>dd>
- dl>
- li>
- ul>
-
- <ul class="layui-nav layui-layout-right">
- <li class="layui-nav-item layui-hide layui-show-md-inline-block">
- <a href="javascript:;">
- <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
- tester
- a>
- <dl class="layui-nav-child">
- <dd><a href="">Your Profilea>dd>
- <dd><a href="">Settingsa>dd>
- <dd><a href="login.jsp">Sign outa>dd>
- dl>
- li>
- <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
- <a href="javascript:;">
- <i class="layui-icon layui-icon-more-vertical">i>
- a>
- li>
- ul>
- div>
-
- <div class="layui-side layui-bg-black">
- <div class="layui-side-scroll">
-
- <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
- <li class="layui-nav-item layui-nav-itemed">
- <a class="" href="javascript:;">menu group 1a>
- <dl class="layui-nav-child">
- <dd><a href="javascript:;">menu 1a>dd>
- <dd><a href="javascript:;">menu 2a>dd>
- <dd><a href="javascript:;">menu 3a>dd>
- <dd><a href="">the linksa>dd>
- dl>
- li>
- <li class="layui-nav-item">
- <a href="javascript:;">menu group 2a>
- <dl class="layui-nav-child">
- <dd><a href="javascript:;">list 1a>dd>
- <dd><a href="javascript:;">list 2a>dd>
- <dd><a href="">超链接a>dd>
- dl>
- li>
- <li class="layui-nav-item"><a href="javascript:;">click menu itema>li>
- <li class="layui-nav-item"><a href="">the linksa>li>
- ul>
- div>
- div>
-
- <div class="layui-body">
-
- <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径div>
- div>
-
- <div class="layui-footer">
-
- 底部固定区域
- div>
- div>
- <script type="text/javascript">
- layui.use(['jquery'],function(){
- let $ = layui.jquery;
- $.ajax({
- url:"${pageContext.request.contextPath}/permission.action?methodName=menus",
- dataType:'json',
- success:function(data){
- let html = '';
- $.each(data,function(i,n){
- html +='
- '
; - //判断当前一级节点是否存在节点
- if(data[i].hasChildren){
- html +='
'
; - let childern = data[i].children;
- $.each(childern,function(index,node){
- })
- html +=' ';
- }
- html +='';
- });
- $("#menu").html(html);
- }
- })
- })
- script>
- body>
- html>
最终结果:

下一期我们将对本期内容进行巩固,切换一张数据表来进行同样的展示 若本期内容有误或者不足还望指出!