前端框架Layui实现动态树效果(书籍管理系统左侧下拉列表)(二)

简介: 前端框架Layui实现动态树效果(书籍管理系统左侧下拉列表)(二)

③编写实体

Permission(数据表实体)

package com.xw.entity;
/**书籍管理系统实体
 * @author 索隆
 *
 */
public class Permission {
private long id;
private String name;
private String description;
private String url;
private long pid;
private int ismenu;
private long 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;
}
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;
}
@Override
public String toString() {
  return "Permission [id=" + id + ", name=" + name + ", description=" + description + ", url=" + url + ", pid=" + pid
      + ", ismenu=" + ismenu + ", displayno=" + displayno + "]";
}
}

注意:mysql里面的类型bigint在java中是long类型

3.dao层编写

package com.xw.dao;
import java.util.ArrayList;
import java.util.List;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.xw.entity.Permission;
import com.zking.util.BaseDao;
import com.zking.util.BuildTree;
import com.zking.util.TreeVo;
/**书记管理
 * @author 索隆
 *
 */
public class PermissionDao extends BaseDao<Permission>{
  /**获取书籍管理的所有信息(平级数据)
   * @return
   * @throws Exception 
   */
  public List<Permission> list() throws Exception{
    String sql="select * from t_easyui_permission";
    return  super.executeQuery(sql, Permission.class, null);
  }
  /**将平级数据变成我们需要的父子级数据
   * @return
   * @throws Exception 
   */
  public List<TreeVo<Permission>> menu() throws Exception{
    //存放父子级的容器
    List<TreeVo<Permission>> menu=new ArrayList<TreeVo<Permission>>();
    //拿到平级数据
    List<Permission> list = this.list();
    //遍历平级数据
    for (Permission permission : list) {
      //工具类帮助我们完成父子级关系
      TreeVo<Permission> vo=new TreeVo<Permission>();
      vo.setId(permission.getId()+"");
      vo.setParentId(permission.getPid()+"");
      vo.setText(permission.getName());
      menu.add(vo);
    }
    //通过工具类筛选父级菜单的儿子,pid为0是父级菜单
    return BuildTree.buildList(menu, "0");
  }
  public static void main(String[] args) throws Exception {
    //测试数据
    PermissionDao d=new PermissionDao();
   List<TreeVo<Permission>> menu = d.menu();
   ObjectMapper om =new ObjectMapper();
   System.out.println(om.writeValueAsString(menu));
  }
}

我们可以进行对比两组数据的不同之处:

  • 平级数据
  • 父子级数据

4.servlet层编写

package com.xw.web;
import java.util.List;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.xw.dao.PermissionDao;
import com.xw.entity.Permission;
import com.zking.framework.ActionSupport;
import com.zking.framework.ModelDriver;
import com.zking.util.ResponseUtil;
import com.zking.util.TreeVo;
/**书籍管理的servlet处理
 * @author 索隆
 *
 */
public class PermissionAction extends ActionSupport implements ModelDriver<Permission>{
  private Permission Permission=new Permission();
  private PermissionDao pdao=new PermissionDao();
  /**初始化书籍管理系统的动态树
   * @param req
   * @param resp
   * @throws Exception
   */
  public void listmenu(HttpServletRequest req, HttpServletResponse resp) throws Exception {
    //查询父子级数据
    List<TreeVo<Permission>> menu = pdao.menu();
    //将集合转换成json格式进行回显
    ResponseUtil.writeJson(resp, menu);
  }
  @Override
  public Permission getModel() {
    return Permission;
  }
}

编写完servlet别忘记编写配置文件

<?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.xw.web.Useraction">
  </action>
  <!-- 书籍管理——树 -->
  <action path="/Permission" type="com.xw.web.PermissionAction">
  </action>
</config>

5.jsp页面搭建

这时候我们就可以去在线Layui网站找一个满意的jsp页面了

Layui 开发使用文档 - 入门指南

<%@ page language="java" contentType="text/html; charset=UTF-8"
  pageEncoding="UTF-8"%>
<!DOCTYPE>
<html>
<head>
<%@ include file="common/static.jsp"%>
<script type="text/javascript" src="js/index.js"></script>
</head>
<body>
  <div class="layui-layout layui-layout-admin">
    <div class="layui-header">
      <div class="layui-logo layui-hide-xs layui-bg-black">书籍管理系统</div>
      <!-- 头部区域(可配合layui 已有的水平导航) -->
      <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>
        <!-- Top导航栏 -->
        <li class="layui-nav-item layui-hide-xs"><a href="">nav 1</a></li>
        <li class="layui-nav-item layui-hide-xs"><a href="">nav 2</a></li>
        <li class="layui-nav-item layui-hide-xs"><a href="">nav 3</a></li>
        <li class="layui-nav-item"><a href="javascript:;">nav
            groups</a>
          <dl class="layui-nav-child">
            <dd>
              <a href="">menu 11</a>
            </dd>
            <dd>
              <a href="">menu 22</a>
            </dd>
            <dd>
              <a href="">menu 33</a>
            </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 Profile</a>
            </dd>
            <dd>
              <a href="">Settings</a>
            </dd>
            <dd>
              <a href="login.jsp">Sign out</a>
            </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">
        <!-- 左侧导航区域(可配合layui已有的垂直导航) -->
        <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 1</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">menu 1</a></dd>
            <dd><a href="javascript:;">menu 2</a></dd>
            <dd><a href="javascript:;">menu 3</a></dd>
            <dd><a href="">the links</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item">
          <a href="javascript:;">menu group 2</a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">list 1</a></dd>
            <dd><a href="javascript:;">list 2</a></dd>
            <dd><a href="">超链接</a></dd>
          </dl>
        </li>
        <li class="layui-nav-item"><a href="javascript:;">click menu item</a></li>
        <li class="layui-nav-item"><a href="">the links</a></li> -->
        </ul>
      </div>
    </div>
    <div class="layui-body">
      <!-- 内容主体区域 -->
      <div style="padding: 15px;">内容主体区域。记得修改 layui.css 和 js 的路径</div>
    </div>
    <div class="layui-footer">
      <!-- 底部固定区域 -->
      底部固定区域
    </div>
  </div>
  <script>
//JS 
layui.use(['element', 'layer', 'util'], function(){
  var element = layui.element
  ,layer = layui.layer
  ,util = layui.util
  ,$ = layui.$;
    $.ajax({
      url: "${pageContext.request.contextPath}/Permission.action?methodName=listmenu",
      type: 'post',
      dataType: 'json',
      success: function(data) {
        //定义一个变量将回显的数据进行拼接,最终追加到指定标签上
        var str='';
        $.each(data,function(i,n){
          str+='<li class="layui-nav-item layui-nav-itemed">';
          str+=' <a class="" href="javascript:;">'+n.text+'</a>';
          //判断有无children节点有就遍历
          if(n.hasChildren){
            //有children节点拿到children节点
            var children=n.children;
              str+='<dl class="layui-nav-child">';
            $.each(children,function(idx,node){
              str+='<dd><a href="javascript:;">'+node.text+'</a></dd>';
              })
                str+='</dl>';
          }
          str+='</li>';
        })
        //将拼接内容追加到指定ul标签
        $("#menu").html(str);
        element.render('menu');
      }
    })
});
</script>
</body>
</html>

小贴士:

element.render()的用处:

假设你正在使用某个具体的前端框架或库,其中的`element`是对应的组件或对象,调用`render()`方法。一般而言,`render()`方法用于将组件或元素渲染到网页中的具体位置。具体作用如下:

  • 1. 渲染组件:`render()`方法用于将特定的组件渲染到页面上。它会将组件的内容和样式解析生成对应的 HTML 结构,并使其在浏览器中可见。
  • 2. 更新页面:如果已经存在该组件或元素并在页面上显示,再次调用`render()`可以触发页面的更新。这在需要根据数据的变化进行页面更新时很有用。
  • 3. 绑定事件:在渲染组件时,`render()`方法通常会将组件的事件绑定到相应的 DOM 元素上。这样可以确保用户与组件进行交互时,组件能够响应相应的操作。
  • 需要注意的是,`render()`方法的具体实现和用法取决于所使用的前端框架或库,可能会有额外的参数和选项。要确切了解`render()`方法的作用,请参考相应框架或库的文档和使用指南。

6.案例演示

到这里我的分享就结束了,欢迎到评论区探讨交流!!

如果觉得有用的话还请点个赞吧爱心 ♥  ♥



相关文章
|
3月前
|
编解码 前端开发 JavaScript
.NET_web前端框架_layui_栅格布局
【8月更文挑战第27天】
47 4
|
3月前
|
JavaScript 前端开发 开发者
Vue.js 框架大揭秘:响应式系统、组件化与路由管理,震撼你的前端世界!
【8月更文挑战第27天】Vue.js是一款备受欢迎的前端JavaScript框架,以简洁、灵活和高效著称。本文将从三个方面深入探讨Vue.js:响应式系统、组件化及路由管理。响应式系统为Vue.js的核心特性,能自动追踪数据变动并更新视图。例如,通过简单示例代码展示其响应式特性:`{{ message }}`,当`message`值改变,页面随之自动更新。此外,Vue.js支持组件化设计,允许将复杂界面拆分为独立且可复用的组件,提高代码可维护性和扩展性。如创建一个包含标题与内容的简单组件,并在其他页面中重复利用。
78 3
|
3月前
|
机器学习/深度学习 数据采集 数据可视化
基于爬虫和机器学习的招聘数据分析与可视化系统,python django框架,前端bootstrap,机器学习有八种带有可视化大屏和后台
本文介绍了一个基于Python Django框架和Bootstrap前端技术,集成了机器学习算法和数据可视化的招聘数据分析与可视化系统,该系统通过爬虫技术获取职位信息,并使用多种机器学习模型进行薪资预测、职位匹配和趋势分析,提供了一个直观的可视化大屏和后台管理系统,以优化招聘策略并提升决策质量。
188 4
|
29天前
|
前端开发 程序员 API
前端|基于 Layui 实现动态搜索选择框
网页端实现动态搜索选择框,要求下拉选项列表能根据用户输入内容动态刷新,最终提交的值必须是由选项列表中点选的。
43 3
|
1月前
|
监控 JavaScript 前端开发
前端的混合之路Meteor篇(六):发布订阅示例代码及如何将Meteor的响应数据映射到vue3的reactive系统
本文介绍了 Meteor 3.0 中的发布-订阅模型,详细讲解了如何在服务器端通过 `Meteor.publish` 发布数据,包括简单发布和自定义发布。客户端则通过 `Meteor.subscribe` 订阅数据,并使用 MiniMongo 实现实时数据同步。此外,还展示了如何在 Vue 3 中将 MiniMongo 的 `cursor` 转化为响应式数组,实现数据的自动更新。
|
1月前
|
前端开发 安全 API
前端全栈之路Deno篇(三):一次性搞懂和学会用Deno 2.0 的权限系统详解和多种权限配置权限声明方式
本文深入解析了 Deno 2.0 的权限系统,涵盖主包和第三方包的权限控制机制,探讨了通过命令行参数、权限 API 和配置文件等多种权限授予方式,并提供了代码示例和运行指导,帮助开发者有效管理权限,提升应用安全性。
|
1月前
|
JavaScript 前端开发
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
前端js,vue系统使用iframe嵌入第三方系统的父子系统的通信
|
1月前
|
前端开发 JavaScript 小程序
前端uni开发后端用PHP的圈子系统该 如何做源码?
圈子系统系统基于TP6+Uni-app框架开发;客户移动端采用uni-app开发,管理后台TH6开发。系统支持微信公众号端、微信小程序端、H5端、PC端多端账号同步,可快速打包生成APP
|
2月前
|
移动开发 缓存 前端开发
构建高效的前端路由系统:从原理到实践
在现代Web开发中,前端路由系统已成为构建单页面应用(SPA)不可或缺的核心技术之一。不同于传统服务器渲染的多页面应用,SPA通过前端路由技术实现了页面的局部刷新与无缝导航,极大地提升了用户体验。本文将深入剖析前端路由的工作原理,包括Hash模式与History模式的实现差异,并通过实战演示如何在Vue.js框架中构建一个高效、可维护的前端路由系统。我们还将探讨如何优化路由加载性能,确保应用在不同网络环境下的流畅运行。本文不仅适合前端开发者深入了解前端路由的奥秘,也为后端转前端或初学者提供了从零到一的实战指南。
|
2月前
|
机器学习/深度学习 数据采集 JavaScript
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
ADR药品不良反应监测系统是一款智能化工具,用于监测和分析药品不良反应。该系统通过收集和分析病历、处方及实验室数据,快速识别潜在不良反应,提升用药安全性。系统采用Java开发,基于SpringBoot框架,前端使用Vue,具备数据采集、清洗、分析等功能模块,并能生成监测报告辅助医务人员决策。通过集成多种数据源并运用机器学习算法,系统可自动预警药品不良反应,有效减少药害事故,保障公众健康。
ADR智能监测系统源码,系统采用Java开发,基于SpringBoot框架,前端使用Vue,可自动预警药品不良反应
下一篇
无影云桌面