layui数据表格实现的源代码

2023-02-22 03:29| 来源: 网络整理| 查看: 265

这几天一直在使用layUI进行开发，下面我的一个界面，源代码分享给大家，希望大家少走弯路。

先上图片，下面的所有功能都实现了。转载请添加原文链接：https://blog.csdn.net/m0_52560366/article/details/110203917 谢谢

前端源代码：

学生信息（木心小白菜）姓名: 性别: 所有男女自我评价:  查看编辑删除 ID 学号姓名性别男女 QQ 微信邮箱手机号自我评价提交 ID：学号：姓名：性别：男女 QQ：微信：邮箱：手机号：自我评价： 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 '男' } else { return '女' } } } , {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: '操作', width: 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 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('编辑行：' + 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'}); } } }); });

【本文地址】

公司简介

联系我们