LayUI之增删改查

_Leaf1217

已于 2022-07-21 04:33:43 修改

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏： LayUI 文章标签： layui 前端 java

于 2022-07-21 00:34:54 首次发布

本文链接：https://blog.csdn.net/qq_63492318/article/details/125903572

本文介绍了如何使用LayUI框架进行前端和后端的增删改查功能实现。首先，文章讲解了LayUI前端的数据表格组件和封装的JS，然后详细阐述了后台的Dao方法编写，包括增加、删除和修改的操作，并进行了测试验证。最后，文章展示了前端的增加页面和对应的JS实现，并进行了增加操作的测试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、前言

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: '操作'