LayUI实现数据的增删改查功能

原创

已于 2023-04-12 10:25:57 修改 · 2.6k 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#java #前端 #jquery

于 2021-03-30 16:31:25 首次发布

本文介绍了一个使用Layui数据表格进行动态数据操作的页面示例，包括固定表头、拖拽列宽、排序、多级表头、单元格模板、搜索、分页和编辑等功能。页面代码展示了如何通过Java Servlet处理增删查改操作，并通过JSON返回结果。

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

页面效果

在这里插入图片描述

主要使用Layui的数据表格 - layui.table

用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。

页面代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>院校管理 </title>
<!-- 引入layui的样式 -->
<link href="${pageContext.request.contextPath}/css/layui.css"
	rel="stylesheet" />
<script src="${pageContext.request.contextPath}/js/jquery-3.6.0.js"></script>
<!-- 引入layui的js-->
<script src="${pageContext.request.contextPath}/js/layui.js"></script>
</head>
<body>
	<div class="layui-row">
		<div class="layui-col-md12">
			<table id="demo" lay-filter="test"></table>
		</div>
	</div>
	<!-- 编辑弹框  -->
	<div class="layui-row" id="update" style="display:none;">
	    <div class="layui-col-md10" >
	        <form class="layui-form layui-from-pane" action="" lay-filter="formTest" style="margin-top:20px" >
	            <input type="hidden" name="did" id="did"/>
	            <div class="layui-form-item">
	                <label class="layui-form-label">院系名称：</label>
	                <div class="layui-input-block">
	                    <input type="text" name="dname" id="dname" required  lay-verify="required" autocomplete="off" placeholder="请输入学院名称" class="layui-input">
	                </div>
	            </div>
	            <div class="layui-form-item" style="margin-top:40px">
	                <div class="layui-input-block">
	                    <button class="layui-btn  layui-btn-submit " lay-submit="" lay-filter