这几天一直在使用layUI进行开发，下面我的一个界面，源代码分享给大家，希望大家少走弯路。
先上图片，下面的所有功能都实现了。
转载请添加原文链接：https://blog.csdn.net/m0_52560366/article/details/110203917 谢谢
前端源代码：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <title>学生信息（木心小白菜）</title> <link rel="stylesheet" href="../../layui/css/layui.css" media="all"/> </head> <body> <!--搜索框和table表结构--> <blockquote class="layui-elem-quote news_search"> <div class="layui-row"> <form class="layui-form" id="complain_search"> 姓名:<div class="layui-input-inline"> <input type="text" name="name11" id="name11" placeholder="姓名" class="layui-input"> </div> 性别:<div class="layui-input-inline"> <select name="sex11" id="sex11"> <option value="10">所有</option> <option value="0">男</option> <option value="1">女</option> </select> </div>自我评价: <div class="layui-input-inline"> <input type="text" name="pingjia11" id="pingjia11" placeholder="自我评价" class="layui-input"> </div> <button id="search" class="layui-btn" lay-submit lay-filter="provinceSearch"> <i class="layui-icon"></i> </button> </form> </div> <!--table列表，查看、编辑、删除--> <table class="layui-hide" id="demo" lay-filter="test"></table> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> </blockquote> <!--添加和修改显示的弹框（添加和修改我使用的是一个弹框）--> <form class="layui-form layui-form-pane1" id="form1" name="form1" style="display: none;"> <div class="layui-form-item" style="display: none"> <label class="layui-form-label">ID</label> <div class="layui-input-inline"> <input type="text" name="id" id="id" placeholder="请输入ID" class="layui-input" autocomplete="off"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">学号</label> <div class="layui-input-inline"> <input type="text" name="userno" id="userno" lay-verify="required" placeholder="请输入学号" class="layui-input" autocomplete="off"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">姓名</label> <div class="layui-input-inline"> <input type="text" name="username" id="username" lay-verify="required" placeholder="请输入姓名" class="layui-input" autocomplete="off"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">性别</label> <div class="layui-input-inline"> <select name="sex" id="sex"> <option value="0">男</option> <option value="1">女</option> </select> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">QQ</label> <div class="layui-input-inline"> <input type="text" name="qq" id="qq" lay-verify="required" placeholder="请输入QQ" class="layui-input" autocomplete="off"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">微信</label> <div class="layui-input-inline"> <input type="text" name="wechat" id="wechat" lay-verify="required" placeholder="请输入微信" class="layui-input" autocomplete="off"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">邮箱</label> <div class="layui-input-inline"> <input type="text" name="mail" id="mail" lay-verify="required" placeholder="请输入邮箱" class="layui-input" autocomplete="off"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">手机号</label> <div class="layui-input-inline"> <input type="text" name="telephone" id="telephone" lay-verify="required" placeholder="请输入手机号" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">自我评价</label> <div class="layui-input-inline"> <input type="text" name="pingjia" id="pingjia" lay-verify="required" placeholder="请输入自我评价" class="layui-input" autocomplete="off"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="changeInfoNow">提交</button> </div> </div> </form> <!--查看操作显示的的弹框--> <div id="form2" name="form2" style="display: none;"> ID：<input type="text" id="id1" disabled> <br/><br/> 学号：<input type="text" id="userno1" disabled> <br/><br/> 姓名：<input type="text" id="username1" disabled> <br/><br/> 性别： <select id="sex1" disabled> <option value="0">男</option> <option value="1">女</option> </select> <br/><br/> QQ： <input type="text" id="qq1" disabled> <br/><br/> 微信： <input type="text" id="wechat1" disabled> <br/><br/> 邮箱： <input type="text" id="mail1" disabled> <br/><br/> 手机号：<input type="text" id="telephone1" disabled> <br/><br/> 自我评价： <input type="text" id="pingjia1" disabled> </div> <script type="text/javascript" src="/js/jquery-1.8.3.min.js"></script> <script type="text/javascript" src="../../layui/layui.js"></script> <script> layui.use(['laypage', 'table'], function () { var laypage = layui.laypage //分页 , table = layui.table //表格 , form = layui.form//表单 //执行一个 table 实例 var $table = table.render({ id: "provinceReload" , elem: '#demo' , height: 530 , url: '/student/allStudent' //数据接口 , title: '用户表' , page: true //开启分页 , toolbar: 'default' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档 , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增 , cols: [[ //表头 {type: 'checkbox', fixed: 'left'} , {field: 'id', title: 'ID', sort: true} , {field: 'userno', title: '学号', sort: true, edit: 'text'} , {field: 'username', title: '姓名', sort: true, edit: 'text'} , { field: 'sex', title: '性别', sort: true, edit: 'text', templet: function (d) { if (d.sex == 0) { return '<span style="color: green;">男</span>' } else { return '<span style="color: red;">女</span>' } } } , {field: 'qq', title: 'QQ', sort: true, edit: 'text'} , {field: 'wechat', title: '微信', sort: true, edit: 'text'} , {field: 'mail', title: '邮箱', sort: true, edit: 'text'} , {field: 'telephone', title: '手机号', sort: true, edit: 'text'} , {field: 'pingjia', title: '自我评价', sort: true, edit: 'text'} , {title: '操作', 165, align: 'center', toolbar: '#barDemo'} ]], request: { pageName: 'page', limitName: 'limit' }, limit: 10, limits: [5, 10, 15, 20] }); //监听单元格编辑，修改字段信息，就是点单元格就可以进行编辑 table.on('edit(test)', function (obj) { var value = obj.value //得到修改后的值 , data = obj.data //得到所在行所有键值we , field = obj.field; //得到字段 // layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value); var json = {"id": data.id}; json[field] = value; var param = JSON.stringify(json); $.ajax({ type: "POST", url: '/student/updateStudentInfo', data: param, contentType: "application/json; charset=utf-8",//此处不能省略 success: function (data) { if (data.code == 1) { layer.msg('修改成功！', {icon: 1, time: 2000, shade: 0.2}); } else { layer.msg('修改失败！', {icon: 2, time: 3000, shade: 0.2}); } } }) }); //根据用户名、性别和自我评价条件进行查找 form.on('submit(provinceSearch)', function (data) { var formData = data.field; var name11 = formData.name11, sex11 = formData.sex11, pingjia11 = formData.pingjia11; table.reload('provinceReload', { page: { curr: 1 }, where: { name11: name11, sex11: sex11, pingjia11: pingjia11 }, method: 'post', contentType: "application/json;charset=utf-8", url: '/student/findStuLimitSer' }); return false; }); //监听头工具栏事件(左上的操作) table.on('toolbar(test)', function (obj) { var checkStatus = table.checkStatus(obj.config.id) , data = checkStatus.data; //获取选中的数据 switch (obj.event) { case 'add': layer.msg('添加'); AddUv(); setTimeout(function () { $table.reload(); }, 2100); break; case 'update': if (data.length === 0) { layer.msg('请选择一行'); } else if (data.length > 1) { layer.msg('只能同时编辑一个'); } else { EidtUv(checkStatus.data[0], obj);//data当前行数据，obj对象 } break; case 'delete': if (data.length === 0) { layer.msg('请选择一行'); } else { layer.confirm("确定删除" + checkStatus.data.length + "这条信息嘛？", function () { var ids = []; for (var i = 0; i < checkStatus.data.length; i++) { ids.push(checkStatus.data[i].id); } $.ajax({ type: "POST", url: '/student/deleteStudentMany', data: {ids: ids}, traditional: true, success: function (data) { if (data.code == 1) { layer.msg('删除成功！', {icon: 1, time: 2000, shade: 0.2}); setTimeout(function () { $table.reload(); }, 2100); } else { layer.msg('删除失败！', {icon: 2, time: 3000, shade: 0.2}); } } }) }) } break; }; }); //监听行工具事件（右侧的操作） table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值" var data = obj.data //获得当前行数据 , layEvent = obj.event; //获得 lay-event 对应的值 if (layEvent === 'detail') { layer.msg('查看操作'); SeeUv(data, obj);//data当前行数据，obj对象 layer.alert('编辑行：<br>' + JSON.stringify(data)) } else if (layEvent === 'del') { layer.confirm('真的删除行么', function (index) { obj.del(); //删除对应行（tr）的DOM结构 layer.close(index);//关闭弹出层 //向服务端发送删除指令 $.ajax({ type: "POST", url: '/student/deleteStudentOne', data: {id: data.id}, traditional: true, success: function (data) { if (data.code == 1) { layer.msg('删除成功！', {icon: 1, time: 2000, shade: 0.2}); setTimeout(function () { $table.reload(); }, 2100); } else { layer.msg('删除失败！', {icon: 2, time: 3000, shade: 0.2}); } } }) }); } else if (layEvent === 'edit') { layer.msg('编辑操作'); EidtUv(data, obj);//data当前行数据，obj对象 } }); //添加学生信息函数 function AddUv() { layer.open({ title: '添加学生信息', type: 1, area: ['500px', '500px'], content: $("#form1") }); } //编辑学生信息函数 function EidtUv(data, obj) { $("#id").val(data.id); $("#userno").val(data.userno); $("#username").val(data.username); $("#name").val(data.name); $("#sex").val(data.sex); $("#qq").val("" + data.qq); $("#wechat").val(data.wechat); $("#mail").val(data.mail); $("#telephone").val(data.telephone); $("#pingjia").val(data.pingjia); // $("#status").find("option[value = '"+data.status+"']").attr("selected","selected"); layer.open({ title: '修改学生信息', type: 1, area: ['500px', '500px'], content: $("#form1") }); } //查看学生信息函数 function SeeUv(data, obj) { $("#id1").val(data.id); $("#userno1").val(data.userno); $("#username1").val(data.username); $("#name1").val(data.name); $("#sex1").val(data.sex); $("#qq1").val("" + data.qq); $("#wechat1").val(data.wechat); $("#mail1").val(data.mail); $("#telephone1").val(data.telephone); $("#pingjia1").val(data.pingjia); layer.open({ title: '显示学生信息', type: 1, area: ['300px', '400px'], content: $("#form2") }); } //弹出层中，关于监听修改和添加的提交按钮 form.on('submit(changeInfoNow)', function (data) { var param = JSON.stringify(data.field); $.ajax({ type: "POST", url: "/student/uploadandadd", data: param, dataType: "json", contentType: "application/json; charset=utf-8",//此处不能省略 success: function (result) { if (result.code == 0) { layer.msg('修改成功！', {icon: 1, time: 2000, shade: 0.2}); /*location.reload();//重新加载页面表格*/ setTimeout(function () { $table.reload();//重新加载table页面 }, 2100); } else { layer.msg('修改失败，请重新尝试！', {icon: 2, time: 3000, shade: 0.2}); } }, error: function () { window.location.href = "/resources/page/404.html"; } }); return false; }); //分页的操作 laypage.render({ elem: 'pageDemo' //分页容器的id , count: 100 //总页数 , skin: '#1E9FFF' //自定义选中色值 //,skip: true //开启跳页 , jump: function (obj, first) { if (!first) { layer.msg('第' + obj.curr + '页', {offset: 'b'}); } } }); }); </script> </body> </html> <!--筛选，导出，打印如何浏览器不能操作换个浏览器试试，我用谷歌浏览器可以实现。-->