• Layui之动态树


    目录

    一,分析左侧树形菜单

    二,获取表中的数据

    三,将表中的数据构建父子关系

    四,前端代码


    一,分析左侧树形菜单

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

    表名:t_oa_permission

     从layui中得到的动态树模型代码

    main.jsp页面代码展示:

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2. pageEncoding="UTF-8"%>
    3. <%@ include file="common/head.jsp" %>
    4. html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    5. <html>
    6. <head>
    7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    8. <title>Insert title heretitle>
    9. head>
    10. <body>
    11. <div class="layui-layout layui-layout-admin">
    12. <div class="layui-header">
    13. <div class="layui-logo layui-hide-xs layui-bg-black">layout demodiv>
    14. <ul class="layui-nav layui-layout-left">
    15. <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
    16. <i class="layui-icon layui-icon-spread-left">i>
    17. li>
    18. <li class="layui-nav-item layui-hide-xs"><a href="">nav 1a>li>
    19. <li class="layui-nav-item layui-hide-xs"><a href="">nav 2a>li>
    20. <li class="layui-nav-item layui-hide-xs"><a href="">nav 3a>li>
    21. <li class="layui-nav-item">
    22. <a href="javascript:;">nav groupsa>
    23. <dl class="layui-nav-child">
    24. <dd><a href="">menu 11a>dd>
    25. <dd><a href="">menu 22a>dd>
    26. <dd><a href="">menu 33a>dd>
    27. dl>
    28. li>
    29. ul>
    30. <ul class="layui-nav layui-layout-right">
    31. <li class="layui-nav-item layui-hide layui-show-md-inline-block">
    32. <a href="javascript:;">
    33. <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
    34. tester
    35. a>
    36. <dl class="layui-nav-child">
    37. <dd><a href="">Your Profilea>dd>
    38. <dd><a href="">Settingsa>dd>
    39. <dd><a href="login.jsp">Sign outa>dd>
    40. dl>
    41. li>
    42. <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
    43. <a href="javascript:;">
    44. <i class="layui-icon layui-icon-more-vertical">i>
    45. a>
    46. li>
    47. ul>
    48. div>
    49. <div class="layui-side layui-bg-black">
    50. <div class="layui-side-scroll">
    51. <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
    52. <li class="layui-nav-item layui-nav-itemed">
    53. <a class="" href="javascript:;">menu group 1a>
    54. <dl class="layui-nav-child">
    55. <dd><a href="javascript:;">menu 1a>dd>
    56. <dd><a href="javascript:;">menu 2a>dd>
    57. <dd><a href="javascript:;">menu 3a>dd>
    58. <dd><a href="">the linksa>dd>
    59. dl>
    60. li>
    61. <li class="layui-nav-item">
    62. <a href="javascript:;">menu group 2a>
    63. <dl class="layui-nav-child">
    64. <dd><a href="javascript:;">list 1a>dd>
    65. <dd><a href="javascript:;">list 2a>dd>
    66. <dd><a href="">超链接a>dd>
    67. dl>
    68. li>
    69. <li class="layui-nav-item"><a href="javascript:;">click menu itema>li>
    70. <li class="layui-nav-item"><a href="">the linksa>li>
    71. ul>
    72. div>
    73. div>
    74. <div class="layui-body">
    75. <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径div>
    76. div>
    77. <div class="layui-footer">
    78. 底部固定区域
    79. div>
    80. div>
    81. body>
    82. html>

    动态树页面效果展示:

     二,获取表中的数据

    将t_oa_permission表中的列名编写在实体类当中,在数据库中使用指令desc * from 表名 查看表结构 以此判断列名的数据类型 

    注意: 数据类型需要保持一致,否则无效

    创建实体类Permission:

    1. package com.zking.entity;
    2. //数据库中t_oa_Permission表对应的实体类
    3. public class Permission {
    4. private long id;//id
    5. private String name;//菜单名
    6. private String description;//菜单描述
    7. private String url;//点击菜单跳转页面
    8. private long pid;//父级菜单的id
    9. private int ismenu;//显示顺序
    10. private long displayno;//显示的顺序
    11. public long getId() {
    12. return id;
    13. }
    14. public void setId(long id) {
    15. this.id = id;
    16. }
    17. public String getName() {
    18. return name;
    19. }
    20. public void setName(String name) {
    21. this.name = name;
    22. }
    23. public String getDescription() {
    24. return description;
    25. }
    26. public void setDescription(String description) {
    27. this.description = description;
    28. }
    29. public String getUrl() {
    30. return url;
    31. }
    32. public void setUrl(String url) {
    33. this.url = url;
    34. }
    35. public long getPid() {
    36. return pid;
    37. }
    38. public void setPid(long pid) {
    39. this.pid = pid;
    40. }
    41. public int getIsmenu() {
    42. return ismenu;
    43. }
    44. public void setIsmenu(int ismenu) {
    45. this.ismenu = ismenu;
    46. }
    47. public long getDisplayno() {
    48. return displayno;
    49. }
    50. public void setDisplayno(long displayno) {
    51. this.displayno = displayno;
    52. }
    53. public Permission() {
    54. // TODO Auto-generated constructor stub
    55. }
    56. public Permission(long id, String name, String description, String url, long pid, int ismenu, long displayno) {
    57. super();
    58. this.id = id;
    59. this.name = name;
    60. this.description = description;
    61. this.url = url;
    62. this.pid = pid;
    63. this.ismenu = ismenu;
    64. this.displayno = displayno;
    65. }
    66. @Override
    67. public String toString() {
    68. return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url + ", pid="
    69. + pid + ", ismenu=" + ismenu + ", displayno=" + displayno + "]";
    70. }
    71. }

    PermissionDao方法

    1. package com.zking.dao;
    2. import java.util.ArrayList;
    3. import java.util.Iterator;
    4. import java.util.List;
    5. import com.zking.entity.Permission;
    6. import com.zking.util.BaseDao;
    7. import com.zking.util.BuildTree;
    8. import com.zking.util.PageBean;
    9. import com.zking.util.TreeVo;
    10. public class permissionDao extends BaseDao{
    11. //查询t_oa_permission表中的数据
    12. public List list(Permission permission, PageBean pageBean) throws Exception {
    13. String sql = "select * from t_ao_permission";
    14. return super.executeQuery(sql, Permission.class, pageBean);
    15. }
    16. public List> menus(Permission permission, PageBean pageBean) throws Exception {
    17. List> trees = new ArrayList>();
    18. //从数据库拿到的菜单数据,此时数据是平级的,不具备父子关系
    19. List list = this.list(permission, pageBean);
    20. for (Permission p : list) {
    21. TreeVo vo = new TreeVo<>();
    22. vo.setId(p.getId()+"");
    23. vo.setText(p.getName());
    24. vo.setParentId(p.getPid()+"");//节点的父id
    25. trees.add(vo);
    26. }
    27. return BuildTree.buildList(trees, "-1");
    28. }
    29. }

    permissionDaoTest 测试

    1. package com.zking.dao;
    2. import static org.junit.jupiter.api.Assertions.*;
    3. import java.util.List;
    4. import org.junit.jupiter.api.Test;
    5. import com.fasterxml.jackson.databind.ObjectMapper;
    6. import com.zking.entity.Permission;
    7. import com.zking.util.TreeVo;
    8. class PermissionDaoTest {
    9. private PermissionDao menudao =new PermissionDao();
    10. @Test
    11. void testList() {
    12. try {
    13. List list = menudao.list(null, null);
    14. for (Permission permission : list) {
    15. System.out.println(permission);
    16. }
    17. ObjectMapper om = new ObjectMapper();
    18. System.out.println(om.writeValueAsString(list));
    19. } catch (Exception e) {
    20. // TODO Auto-generated catch block
    21. e.printStackTrace();
    22. }
    23. }
    24. @Test
    25. void testMenus() {
    26. try {
    27. List> list = menudao.menus(null, null);
    28. for (TreeVo permission: list) {
    29. System.out.println(permission);
    30. }
    31. ObjectMapper om = new ObjectMapper();
    32. System.out.println(om.writeValueAsString(list));
    33. } catch (Exception e) {
    34. // TODO Auto-generated catch block
    35. e.printStackTrace();
    36. }
    37. }
    38. }

    测试testlist方法:

     测试testMenus方法:

    三,将表中的数据构建父子关系

    BuildTree类:

    1. package com.zking.util;
    2. import java.util.ArrayList;
    3. import java.util.HashMap;
    4. import java.util.List;
    5. import java.util.Map;
    6. public class BuildTree {
    7. /**
    8. * 默认-1为顶级节点
    9. * @param nodes
    10. * @param
    11. * @return
    12. */
    13. public static TreeVo build(List> nodes) {
    14. if (nodes == null) {
    15. return null;
    16. }
    17. List> topNodes = new ArrayList>();
    18. for (TreeVo children : nodes) {
    19. String pid = children.getParentId();
    20. if (pid == null || "-1".equals(pid)) {
    21. topNodes.add(children);
    22. continue;
    23. }
    24. for (TreeVo parent : nodes) {
    25. String id = parent.getId();
    26. if (id != null && id.equals(pid)) {
    27. parent.getChildren().add(children);
    28. children.setHasParent(true);
    29. parent.setChildren(true);
    30. continue;
    31. }
    32. }
    33. }
    34. TreeVo root = new TreeVo();
    35. if (topNodes.size() == 1) {
    36. root = topNodes.get(0);
    37. } else {
    38. root.setId("000");
    39. root.setParentId("-1");
    40. root.setHasParent(false);
    41. root.setChildren(true);
    42. root.setChecked(true);
    43. root.setChildren(topNodes);
    44. root.setText("顶级节点");
    45. Map state = new HashMap<>(16);
    46. state.put("opened", true);
    47. root.setState(state);
    48. }
    49. return root;
    50. }
    51. /**
    52. * 指定idparam为顶级节点
    53. * @param nodes
    54. * @param idParam
    55. * @param
    56. * @return
    57. */
    58. public static List> buildList(List> nodes, String idParam) {
    59. if (nodes == null) {
    60. return null;
    61. }
    62. List> topNodes = new ArrayList>();
    63. for (TreeVo children : nodes) {
    64. String pid = children.getParentId();
    65. if (pid == null || idParam.equals(pid)) {
    66. topNodes.add(children);
    67. continue;
    68. }
    69. for (TreeVo parent : nodes) {
    70. String id = parent.getId();
    71. if (id != null && id.equals(pid)) {
    72. parent.getChildren().add(children);
    73. children.setHasParent(true);
    74. parent.setChildren(true);
    75. continue;
    76. }
    77. }
    78. }
    79. return topNodes;
    80. }
    81. }

    Treevo实体类:

    1. package com.zking.util;
    2. import java.util.ArrayList;
    3. import java.util.List;
    4. import java.util.Map;
    5. public class TreeVo {
    6. /**
    7. * 节点ID
    8. */
    9. private String id;
    10. /**
    11. * 显示节点id
    12. */
    13. private String text;
    14. /**
    15. * 节点状态,open closed
    16. */
    17. private Map state;
    18. /**
    19. *节点是否被选中 true false
    20. */
    21. private boolean checked = false;
    22. /**
    23. * 节点属性
    24. */
    25. private Map attributes;
    26. /**
    27. * 节点的子节点
    28. */
    29. private List> children = new ArrayList>();
    30. /**
    31. * 父id
    32. */
    33. private String parentId;
    34. /**
    35. * 是否有父节点
    36. */
    37. private boolean hasParent = false;
    38. /**
    39. * 是否有子节点
    40. */
    41. private boolean hasChildren = false;
    42. public String getId() {
    43. return id;
    44. }
    45. public void setId(String id) {
    46. this.id = id;
    47. }
    48. public String getText() {
    49. return text;
    50. }
    51. public void setText(String text) {
    52. this.text = text;
    53. }
    54. public Map getState() {
    55. return state;
    56. }
    57. public void setState(Map state) {
    58. this.state = state;
    59. }
    60. public boolean isChecked() {
    61. return checked;
    62. }
    63. public void setChecked(boolean checked) {
    64. this.checked = checked;
    65. }
    66. public Map getAttributes() {
    67. return attributes;
    68. }
    69. public void setAttributes(Map attributes) {
    70. this.attributes = attributes;
    71. }
    72. public List> getChildren() {
    73. return children;
    74. }
    75. public void setChildren(List> children) {
    76. this.children = children;
    77. }
    78. public boolean isHasParent() {
    79. return hasParent;
    80. }
    81. public void setHasParent(boolean isParent) {
    82. this.hasParent = isParent;
    83. }
    84. public boolean isHasChildren() {
    85. return hasChildren;
    86. }
    87. public void setChildren(boolean isChildren) {
    88. this.hasChildren = isChildren;
    89. }
    90. public String getParentId() {
    91. return parentId;
    92. }
    93. public void setParentId(String parentId) {
    94. this.parentId = parentId;
    95. }
    96. public TreeVo(String id, String text, Map state, boolean checked, Map attributes,
    97. List> children, boolean isParent, boolean isChildren, String parentID) {
    98. super();
    99. this.id = id;
    100. this.text = text;
    101. this.state = state;
    102. this.checked = checked;
    103. this.attributes = attributes;
    104. this.children = children;
    105. this.hasParent = isParent;
    106. this.hasChildren = isChildren;
    107. this.parentId = parentID;
    108. }
    109. public TreeVo() {
    110. super();
    111. }
    112. }

    permissionDao

    1. package com.zking.dao;
    2. import java.util.ArrayList;
    3. import java.util.Iterator;
    4. import java.util.List;
    5. import com.zking.entity.Permission;
    6. import com.zking.util.BaseDao;
    7. import com.zking.util.BuildTree;
    8. import com.zking.util.PageBean;
    9. import com.zking.util.TreeVo;
    10. public class permissionDao extends BaseDao{
    11. public List> menus(Permission permission, PageBean pageBean) throws Exception {
    12. List> trees = new ArrayList>();
    13. //从数据库拿到的菜单数据,此时数据是平级的,不具备父子关系
    14. List list = this.list(permission, pageBean);
    15. for (Permission p : list) {
    16. TreeVo vo = new TreeVo<>();
    17. vo.setId(p.getId()+"");
    18. vo.setText(p.getName());
    19. vo.setParentId(p.getPid()+"");//节点的父id
    20. trees.add(vo);
    21. }
    22. return BuildTree.buildList(trees, "-1");
    23. }
    24. }

    四、前端代码

    建立一个PermissionAction:

    1. package com.zking.web;
    2. import java.util.List;
    3. import javax.servlet.http.HttpServletRequest;
    4. import javax.servlet.http.HttpServletResponse;
    5. import com.zking.dao.permissionDao;
    6. import com.zking.entity.Permission;
    7. import com.zking.framework.ActionSupport;
    8. import com.zking.framework.ModelDriver;
    9. import com.zking.util.ResponseUtil;
    10. import com.zking.util.TreeVo;
    11. public class PermissionAction extends ActionSupport implements ModelDriver{
    12. private Permission permission = new Permission();
    13. permissionDao permissiondao = new permissionDao();
    14. @Override
    15. public Permission getModel() {
    16. return permission;
    17. }
    18. public String menus(HttpServletRequest req, HttpServletResponse resp) {
    19. try {
    20. List> menus = permissiondao.menus(null, null);
    21. //向前端响应数据
    22. ResponseUtil.writeJson(resp, menus);
    23. } catch (Exception e) {
    24. e.printStackTrace();
    25. }
    26. return null;
    27. }
    28. }

    修改main界面(主界面):

    1. <%@ page language="java" contentType="text/html; charset=UTF-8"
    2. pageEncoding="UTF-8"%>
    3. <%@ include file="common/head.jsp" %>
    4. html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    5. <html>
    6. <head>
    7. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    8. <title>Insert title heretitle>
    9. head>
    10. <body>
    11. <div class="layui-layout layui-layout-admin">
    12. <div class="layui-header">
    13. <div class="layui-logo layui-hide-xs layui-bg-black">layout demodiv>
    14. <ul class="layui-nav layui-layout-left">
    15. <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
    16. <i class="layui-icon layui-icon-spread-left">i>
    17. li>
    18. <li class="layui-nav-item layui-hide-xs"><a href="">nav 1a>li>
    19. <li class="layui-nav-item layui-hide-xs"><a href="">nav 2a>li>
    20. <li class="layui-nav-item layui-hide-xs"><a href="">nav 3a>li>
    21. <li class="layui-nav-item">
    22. <a href="javascript:;">nav groupsa>
    23. <dl class="layui-nav-child">
    24. <dd><a href="">menu 11a>dd>
    25. <dd><a href="">menu 22a>dd>
    26. <dd><a href="">menu 33a>dd>
    27. dl>
    28. li>
    29. ul>
    30. <ul class="layui-nav layui-layout-right">
    31. <li class="layui-nav-item layui-hide layui-show-md-inline-block">
    32. <a href="javascript:;">
    33. <img src="//tva1.sinaimg.cn/crop.0.0.118.118.180/5db11ff4gw1e77d3nqrv8j203b03cweg.jpg" class="layui-nav-img">
    34. tester
    35. a>
    36. <dl class="layui-nav-child">
    37. <dd><a href="">Your Profilea>dd>
    38. <dd><a href="">Settingsa>dd>
    39. <dd><a href="login.jsp">Sign outa>dd>
    40. dl>
    41. li>
    42. <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
    43. <a href="javascript:;">
    44. <i class="layui-icon layui-icon-more-vertical">i>
    45. a>
    46. li>
    47. ul>
    48. div>
    49. <div class="layui-side layui-bg-black">
    50. <div class="layui-side-scroll">
    51. <ul id="menu" class="layui-nav layui-nav-tree" lay-filter="menu">
    52. <li class="layui-nav-item layui-nav-itemed">
    53. <a class="" href="javascript:;">menu group 1a>
    54. <dl class="layui-nav-child">
    55. <dd><a href="javascript:;">menu 1a>dd>
    56. <dd><a href="javascript:;">menu 2a>dd>
    57. <dd><a href="javascript:;">menu 3a>dd>
    58. <dd><a href="">the linksa>dd>
    59. dl>
    60. li>
    61. <li class="layui-nav-item">
    62. <a href="javascript:;">menu group 2a>
    63. <dl class="layui-nav-child">
    64. <dd><a href="javascript:;">list 1a>dd>
    65. <dd><a href="javascript:;">list 2a>dd>
    66. <dd><a href="">超链接a>dd>
    67. dl>
    68. li>
    69. <li class="layui-nav-item"><a href="javascript:;">click menu itema>li>
    70. <li class="layui-nav-item"><a href="">the linksa>li>
    71. ul>
    72. div>
    73. div>
    74. <div class="layui-body">
    75. <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径div>
    76. div>
    77. <div class="layui-footer">
    78. 底部固定区域
    79. div>
    80. div>
    81. <script type="text/javascript">
    82. layui.use(['jquery'],function(){
    83. let $ = layui.jquery;
    84. $.ajax({
    85. url:"${pageContext.request.contextPath}/permission.action?methodName=menus",
    86. dataType:'json',
    87. success:function(data){
    88. let html = '';
    89. $.each(data,function(i,n){
    90. html +='
    91. ';
  • html +=' '+data[i].text+'';
  • //判断当前一级节点是否存在节点
  • if(data[i].hasChildren){
  • html +='
    ';
  • let childern = data[i].children;
  • $.each(childern,function(index,node){
  • })
  • html +=' ';
  • }
  • html +='
  • ';
  • });
  • $("#menu").html(html);
  • }
  • })
  • })
  • script>
  • body>
  • html>
  • 最终结果:

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

  • 相关阅读:
    MySQL数据库
    WPF Datagrid Header数据绑定,表头复选框实现全选、全否、部分选中,根据条目动态变化
    【Flink】第一节 源码编译
    基于Dijkstra和A*算法的机器人路径规划(Matlab代码实现)
    Vue2插槽的简单使用示例
    第二篇------Virtual I/O Device (VIRTIO) Version 1.1
    Spring 14: Spring + MyBatis初步整合开发
    什么是入侵检测系统?有哪些分类?
    旋转框目标检测mmrotate v0.3.1 训练DOTA数据集(二)
    OKR 锦囊妙计
  • 原文地址:https://blog.csdn.net/weixin_64313980/article/details/125813842