LayUI之增删改查

这篇具有很好参考价值的文章主要介绍了LayUI之增删改查。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、前言

1.1 前言

1.2 前端代码(数据表格组件)

1.3 封装JS

二、LayUI增删改查的后台代码

2.1 编写Dao方法

        2.1 增加

      2.2 删除

     2.3 修改

三、LayUI增删改查的前端代码

  3.1 增加


一、前言

1.1 前言

上一篇文章我们一起做了LayUI的动态添加选项卡,这一篇文章我们继续来进行对LayUI的学习,开始编写一下LayUI的增删改查吧!

1.2 前端代码(数据表格组件)

这里就先把从官网上演变过来的一些前端代码粘贴过来:userManage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/system/userManage.js"></script>
<title>用户管理</title>
</head>
<body>
	<!-- 搜索栏 -->
	<div class="layui-form-item">
	  <div class="layui-inline">
	    <label class="layui-form-label">用户名:</label>
	    <div class="layui-input-inline">
	      <input type="text" id="name" placeholder="请输入用户名" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  
	  <div class="layui-inline">
	    <div class="layui-input-inline">
	      <button id="btn_search" type="button" class="layui-btn layui-btn-normal">
	      	<i class="layui-icon layui-icon-search"></i>
	      	查询
	      </button>
	      <button id="btn_add" type="button" class="layui-btn">新增</button>
	    </div>
	  </div>
	  
	</div>
	<!-- 数据表格及分页 -->
	<table id="tb" lay-filter="tb" class="layui-table" style="margin-top:-15px;" lay-filter="tb_goods">
		
	</table>
	<!-- 对话框(新增和编辑共用一个页面) -->
	
	<script type="text/html" id="toolbar">
 		<button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
 		<button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
 		<button class="layui-btn layui-btn-sm" lay-event="reset">重置密码</button>
	</script>
</body>
</html>

1.3 封装JS

接着我们把我们需要的js全部封装好:userManage.js

let layer,$,table;
layui.use(['jquery', 'layer', 'table'], function(){
	layer = layui.layer
	,$ = layui.jquery
	,table = layui.table;
	//初始化数据表格
	initTable();
	//绑定查询按钮的点击事件
	$('#btn_search').click(function(){
		query();
	});
});
 
 
//在页面中的<table>中必须配置lay-filter="tb_goods"属性才能触发属性!!!
table.on('tool(tb)', function (obj) {
	row = obj.data;
	if (obj.event == "edit") {
		open("编辑");
	}else if(obj.event == "del"){
		layer.confirm('确认删除吗?', {icon: 3, title:'提示'}, function(index){
		  $.post($("#ctx").val()+'/user.action',{
			  'methodName':'del',
			  'id':row.id
		  },function(rs){
			  if(rs.success){
        		   //调用查询方法刷新数据
        		   query();
        	   }else{
        		   layer.msg(rs.msg,function(){});
        	   }
		  },'json');
		  layer.close(index);
		});
	}else{
 
	}
});
 
//1.初始化数据表格
function initTable(){
	table.render({           //执行渲染
        elem: '#tb',         //指定原始表格元素选择器(推荐id选择器)
//        url: 'user.action?methodName=list',     //请求地址
        height: 340,         //自定义高度
        loading: false,      //是否显示加载条(默认 true)
        cols: [[             //设置表头
            {field: 'id', title: '用户编号', width: 120},
            {field: 'name', title: '用户名', width: 120},
            {field: 'loginName', title: '登录账号', width: 140},
            {field: '', title: '操作', width: 220,toolbar:'#toolbar'},
        ]]
    });
	
}
 
//2.点击查询
function query(){
	table.reload('tb', {
        url: $("#ctx").val()+'/user.action',     //请求地址
        method: 'POST',                    //请求方式,GET或者POST
        loading: true,                     //是否显示加载条(默认 true)
        page: true,                        //是否分页
        where: {                           //设定异步数据接口的额外参数,任意设
        	'methodName':'listUserRole',
        	'name':$('#name').val()
        },  
        request: {                         //自定义分页请求参数名
            pageName: 'page', //页码的参数名称,默认:page
            limitName: 'rows' //每页数据量的参数名,默认:limit
        }
   });
}
 
//3.对话框
function open(title){
    layer.open({
       type: 2,                    //layer提供了5种层类型。可传入的值有:0(信息框,默认)1(页面层)2(iframe层)3(加载层)4(tips层)
       title:title,
       area: ['660px', '340px'],   //宽高
       skin: 'layui-layer-rim',    //样式类名
       content:  $("#ctx").val()+'/jsp/system/userEdit.jsp', //书本编辑页面
       btn:['保存','关闭'],
       yes: function(index, layero){
    	   //调用子页面中提供的getData方法,快速获取子页面的form表单数据
    	   //jQuery.find
           let data= $(layero).find("iframe")[0].contentWindow.getData();
           console.log(data);
           //判断title标题
           let methodName="add";
           if(title=="编辑")
        	   methodName="edit";
           $.post($("#ctx").val()+'/user.action?methodName='+methodName,
        		   data,function(rs){
        	   if(rs.success){
        		   //关闭对话框
        		   layer.closeAll();
        		   //调用查询方法刷新数据
        		   query();
        	   }else{
        		   layer.msg(rs.msg,function(){});
        	   }
           },'json');
       },
       btn2: function(index, layero){
    	   layer.closeAll();
       }
    });
}

我们再放上引入的公共页面:header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
 
<!-- 引入 layui.css -->
<link rel="stylesheet" href="${pageContext.request.contextPath }/static/js/layui/css/layui.css">
 
<!-- 引入 layui.js -->
<script src="${pageContext.request.contextPath }/static/js/layui/layui.js"></script>
 
<!-- 指定整个项目的根路径 -->
<base href="${pageContext.request.contextPath }/" />
 
<!-- 隐藏域传值 -->
<input id="ctx" value="${pageContext.request.contextPath }" type="hidden"/>
 

前端建立好了后,我们看看运行效果:

LayUI之增删改查,layui,java,前端

二、LayUI增删改查的后台代码

2.1 编写Dao方法

我们首先还是要写一个查询的方法:UserDao--->List

	/**
	 * 查询用户信息对应的角色,角色是通过case when得来的
	 * @param user
	 * @param pageBean
	 * @return
	 * @throws Exception
	 */
	public List<Map<String,Object>> list(User user,PageBean pageBean) throws Exception {
		String sql = "select *\r\n" + 
				",(case rid \r\n" + 
				"when 1 then '管理员' \r\n" + 
				"when 2 then '发起者' \r\n" + 
				"when 3 then '审批者' \r\n" + 
				"when 4 then '参与者' \r\n" + 
				"when 5 then '会议室管理员' \r\n" + 
				"else '其他角色' end \r\n" + 
				") roleName \r\n"  + 
				"from \r\n" + 
				"t_oa_user where 1=1 ";
		String name = user.getName();
		if(StringUtils.isNotBlank(name)) {
			sql += " and name like '%"+name+"%'";
		}
		return super.executeQuery(sql, pageBean);
	}

运行测试:

LayUI之增删改查,layui,java,前端

 

        2.1 增加

                我们继续编写增加的方法:Add      

    public int add(User user) throws Exception {
		String sql = "insert into t_oa_user(name,loginName,pwd) values(?,?,?)";
		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd"});
	}

      2.2 删除

    public int del(User user) throws Exception {
		String sql = "delete from t_oa_user where id = ?";
		return super.executeUpdate(sql, user, new String[] {"id"});
	}

     2.3 修改

    public int edit(User user) throws Exception {
		String sql = "update t_oa_user set name=?,loginName=?,pwd=? where id = ?";
		return super.executeUpdate(sql, user, new String[] {"name","loginName","pwd","id"});
	}

 当我们写好了增删改查的Dao方法后,就可以开始编写UserAction啦~

package com.leaf.web;
 
import java.util.HashMap;
import java.util.List;
import java.util.Map;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import com.leaf.dao.UserDao;
import com.leaf.entity.User;
import com.leaf.mvc.ActionSupport;
import com.leaf.mvc.ModelDriven;
import com.leaf.util.PageBean;
import com.leaf.util.R;
import com.leaf.util.ResponseUtil;
 
public class UserAction extends ActionSupport implements ModelDriven<User> {
 
	private User user = new User();
	
	private UserDao ud = new UserDao();
	
	//写一个方法处理前台的请求
	public String login(HttpServletRequest req, HttpServletResponse resp) {
		Map<String, Object> map = new HashMap<String,Object>();
		try {
			//调用Dao方法
			User u = ud.login(user);
			if(u != null) {
				//登录成功
				//ResponseUtil.writeJson(resp, new R().data("code",200).data("msg", "成功"));
				ResponseUtil.writeJson(resp, R.ok(200, "登录成功"));
			}else {
				//登录失败
				//ResponseUtil.writeJson(resp, new R().data("code",0).data("msg", "账号密码错误"));
				ResponseUtil.writeJson(resp, R.ok(0, "用户名密码错误"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.ok(0, "登录失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}
	
	//查询所有用户的方法
	public String list(HttpServletRequest req, HttpServletResponse resp) {
		try {
			PageBean pageBean = new PageBean();
			//初始化
			pageBean.setRequest(req);
			List<Map<String, Object>> list = ud.list(user, pageBean);
			ResponseUtil.writeJson(resp, R.ok(0, "查询成功" ,pageBean.getTotal() ,user));
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.ok(0, "查询失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}
	
	//增加的方法
	public String add(HttpServletRequest req, HttpServletResponse resp) {
		try {
			//rs是SQL语句执行的影响行数
			int rs = ud.add(user);
			//判断
			if(rs > 0) {
				ResponseUtil.writeJson(resp, R.ok(200, "新增成功"));
			}
			else {
				ResponseUtil.writeJson(resp, R.ok(0, "新增失败"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.ok(0, "新增失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}
	
	//删除的方法
	public String del(HttpServletRequest req, HttpServletResponse resp) {
		try {
			//rs是SQL语句执行的影响行数
			int rs = ud.del(user);
			//判断
			if(rs > 0) {
				ResponseUtil.writeJson(resp, R.ok(200, "删除成功"));
			}
			else {
				ResponseUtil.writeJson(resp, R.ok(0, "删除失败"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.ok(0, "删除失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}
	
	//修改的方法
	public String edit(HttpServletRequest req, HttpServletResponse resp) {
		try {
			//rs是SQL语句执行的影响行数
			int rs = ud.edit(user);
			//判断
			if(rs > 0) {
				ResponseUtil.writeJson(resp, R.ok(200, "修改成功"));
			}
			else {
				ResponseUtil.writeJson(resp, R.ok(0, "修改失败"));
			}
		} catch (Exception e) {
			e.printStackTrace();
			try {
				ResponseUtil.writeJson(resp, R.ok(0, "修改失败"));
			} catch (Exception e1) {
				e1.printStackTrace();
			}
		}
		return null;
	}
	
	@Override
	public User getModel() {
		return user;
	}
	
}

三、LayUI增删改查的前端代码

  3.1 增加

                我们需要建立一个增加的页面:userEdit

                这个页面和编辑共用~

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/common/header.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="static/js/system/userEdit.js"></script>
<title>用户新增</title>
</head>
<style>
.layui-form-select dl{
	max-height:150px;
}
</style>
<body>
<div style="padding:10px;">
    <form class="layui-form layui-form-pane" lay-filter="user">
        <input type="hidden" name="id"/>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名称</label>
            <div class="layui-input-block">
                <input type="text" id="name" name="name" autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户角色</label>
            <div class="layui-input-block">
                <select name="rid">
                    <option value="">---请选择---</option>
                    <option value="1">管理员</option>
                    <option value="2">发起者</option>
                    <option value="3">审批者</option>
                    <option value="4">参与者</option>
                    <option value="5">会议管理员</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登录账号</label>
            <div class="layui-input-block">
                <input type="text" name="loginName" lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">登录密码</label>
            <div class="layui-input-block">
                <input type="password" name="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
        </div>
    </form>
</div>
</body>
</html>

封装对应的JS:userEdit.js 

let layer,form,$;
layui.use(['layer','form','jquery'],function(){
	layer=layui.layer,form=layui.form,$=layui.jquery;
	initData();
});
 
function initData(){
	console.log(parent.row);
	if(null!=parent.row){
	     //因为layui.each内部的逻辑问题导致的所以要先深拷贝一份然后再去val
	     //parent.row:表格行对象
	     form.val('user',$.extend({}, parent.row||{}));
	     $('#name').attr('readonly','readonly');
	}
}
 
function getData(){
	//取user from中的值
    return form.val('user');
}

OK,今天的学习笔记分享就到这里啦,我们呢下次再见!!!文章来源地址https://www.toymoban.com/news/detail-562987.html

到了这里,关于LayUI之增删改查的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • layui实现(学生)数据的增删改查

    查询 添加: 点击添加按钮: 添加成功! 修改: 点击编辑按钮: 修改信息数据,点击提交: 修改数据成功! 删除: 点击删除按钮: 点击确定,删除成功! 分页: 由于数据有限,选择5条/页,进行分页: 批量删除: 首先勾选想要删除的行,点击批量删除: 删除成功: 补

    2023年04月09日
    浏览(37)
  • LayUI框架实现OA会议系统——增删改查

    目录 前言 1. 配置准备 1.1 Layui框架 1.2  mysql数据库表 1.3 用户管理JSP页面 1.4 新增、修改用户共用界面   2. 后台编写  2.1 编写UserDao类增删改查方法 2.2  R工具类 2.3 BaseDao数据库查询方法  2.4 UserAction控制器类   3. 前台JS编写 3.1 userManage页面JS 3.2 user新增、修改iframe层JS 4. 功能运

    2024年02月16日
    浏览(37)
  • ​​Layui之用户管理实例(对数据的增删改查)

    目录 ​编辑一、R工具介绍() ​编辑二、数据表的增删改查 ​编辑2.1我们先得从查询数据库的语句入手 2.2优化dao类 2.4UserAction类 2.5前台的页面实现增删改查操作 2.6 userManage页面JS          2.7user新增、修改iframe层js 前言        上一篇我分享了使用layui菜单栏的动态添

    2024年02月16日
    浏览(35)
  • 前端UI工具(主要适用于JAVa,layui+easyui+elementui等及UI对比)

    前端开发中有许多流行的UI工具和框架,它们提供了丰富的组件、样式和功能,有助于加速界面开发。以下是一些常用的前端UI工具和框架: Bootstrap: 描述: Bootstrap 是一个开源的前端框架,提供了一套用于设计网站和Web应用的HTML、CSS和JavaScript组件。 特点: 响应式设计、移动

    2024年02月05日
    浏览(33)
  • “layui助力博客管理升级!用增删改查功能打造优质博客体验“

    本文介绍如何使用 layui 实现一个简单的增删改查会议管理系统。 在开始之前,确保已经引入了以下必要的文件: 首先,我们需要准备一个用于 CRUD(增删改查)操作的后端接口 R工具类的使用 使用 layui 的样式和组件来构建博客管理页面。 创建一个 HTML 文件,并按如下结构编

    2024年02月16日
    浏览(39)
  • 开发实例:Spring Boot、MyBatis和Layui打造增删改查项目

    通过学习这个实例项目,我们将积累点滴技术知识和实践经验,进一步提升我们的开发能力。学习如何构建增删改查功能的完整应用,从数据库访问到前端界面的开发,涵盖了全栈开发的方方面面。此外,我们还将学会处理常见的业务逻辑和数据操作,提高编码质量和效率。

    2024年02月06日
    浏览(65)
  • 前端框架Layui的使用讲解(Layui搭建登录注册页面)

    目录 一、前言 1.什么是Layui 2.Layui的背景 3.为什么要使用Layui 4.Layui的模块化 二、Layui使用讲解 1.初识Layui 2.搭建登录页面 静态效果图​ 封装引入文件页面(公用页面) jsp页面搭建 userDao编写 Servlet页面编写 xml文件配置 3.搭建注册页面 静态效果图 jsp页面搭建 Servlet页面编写 最

    2024年02月15日
    浏览(41)
  • 【前端】layui前端框架学习笔记

    【前端目录贴】 参考视频 :LayUI 参考笔记 :https://blog.csdn.net/qq_61313896/category_12432291.html 官网:http://layui.apixx.net/index.html 国人16年开发的框架,拿来即用,门槛低 … Layui 是一套开源的 Web UI 组件库,采用自身轻量级模块化规范,遵循原生态的 HTML/CSS/JavaScript 开发模式,极易上手,

    2024年04月23日
    浏览(48)
  • 前端框架LayUI

    Bootstrap让前端开发更快速、简单。所有开发者都能快速上手、所有设备都可以适配、所有项目都适 用。 可以直接使用Bootstrap提供的 CSS 样式表,Bootstrap的源码是采用最流行的CSS预处理工具Less和Sass开发的。可以直接采用预编译的CSS文件快速开发,也可以从Bootstrap源码自定义自

    2024年02月02日
    浏览(55)
  • 【前端】Layui动态数据表格拖动排序

    目的:使用Layui的数据表格,拖动行进行排序。 使用插件:layui-soul-table 和 Layui 1.layui-soul-table文档:https://soultable.yelog.org/#/zh-CN/component/start/install 2.layui文档:Layui table模块 | 数据表格 | datatable - 在线演示 结合Layui并参看layui-soul-table官方教程,写的比较详细页比较简单。 实现

    2024年02月10日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包