当前位置：首页 > article >正文

前端框架Layui学习五：弹出层和数据表格

article 2025/8/22 3:51:15

Layui

layui（谐音：类UI) 是一款采用自身模块规范编写的前端 UI 框架，遵循原生 HTML/CSS/JS 的书写与组织形式，拿来即用。

一、弹出层

在 layui 中使用 layer

layui.use('layer', function(){var layer = layui.layer;layer.msg('hello');
});

在这里插入图片描述
普通信息框：
layer.alert(content, options, yes)

<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../static/css/layui.css"><link rel="stylesheet" href="../static/css/layer.css"><link rel="stylesheet" href="../static/css/laydate.css">
</head>
<body style="padding: 20px"><button type="button" class="layui-btn" id="btn1">alert</button><button type="button" class="layui-btn" id="btn2">confirm</button><button type="button" class="layui-btn" id="btn3">prompt</button><button type="button" class="layui-btn" id="btn4">tab</button><button type="button" class="layui-btn" id="btn5">photos</button><button type="button" class="layui-btn" id="btn6">tips</button><button type="button" class="layui-btn" id="btn7">msg</button><script src="../static/css/layui.js"></script><script type="text/javascript">layui.use(["jquery",'form','element','layer'],function() {let $ = layui.jquery;var form = layui.form;var element = layui.element;var layer = layui.layer;$("#btn1").click(function () {//layer.alert('提示');// layer.alert('加了个图标',{icon:6});layer.alert('有了回调', function(index){//do somethingalert("ok")layer.close(index);});});});</script>
</body>

询问框：
layer.confirm(content, options, yes, cancel)
在这里插入图片描述

$("#btn2").click(function () {layer.confirm('确定退出么？',{icon:3,title:'提示'},function(index){alert('ok');layer.close(index);})})

输入层：
layer.prompt(options, yes)
在这里插入图片描述

            $("#btn3").click(function () {layer.prompt(function(value,index,elem){alert(value);layer.close(index);})})

在这里插入图片描述

       $("#btn3").click(function () {layer.prompt({formType: 2,value: '初始值',title: '请输入值',area: ['800px', '350px'] //自定义文本域宽高}, function(value, index, elem){alert(value); //得到valuelayer.close(index);});})

相册层：layer.photos(options)
相册层，也可以称之为图片查看器。它的出场动画从layer内置的动画类型中随机展现。photos支持传入json和直接读取页面图片两种方式。

1）json格式传入
如果是json传入，返回的json需严格按照如下格式：
在这里插入图片描述

images.json文件

{"title": "相册标题","id": 123,"start": 0,"data": [{"alt": "图片名1","pid": 666,"src": "../static/images/1.jpg","thumb": "../static/images/1.jpg"},{"alt": "图片名2","pid": 666,"src": "../static/images/2.jpg","thumb": "../static/images/2.jpg"},{"alt": "图片名3","pid": 666,"src": "../static/images/3.jpg","thumb": "../static/images/3.jpg"}]
}

$("#btn5").click(function(){$.get("../static/images/images.json",function (json) {layer.photos({photos:json,anim:5});});});

tips层：layer.tips(content, follow, options)
在这里插入图片描述

 $("#btn6").click(function(){layer.tips('只想提示地精准些', '#btn6');});

提示框： layer.msg(content, options, end)

      $("#btn7").click(function(){layer.msg('只想弱弱提示');});

layer提供了5种层类型。可传入的值有：0（信息框，默认）1（页面层）2（iframe层）3（加载层）4（tips层）

layer.type=0

在这里插入图片描述

<body style="padding: 20px"><button type="button" class="layui-btn" id="btn7">layer.open.type=0</button><button type="button" class="layui-btn" id="btn8">layer.open.type=1</button><button type="button" class="layui-btn" id="btn9">layer.open.type=2</button><script src="../static/css/layui.js"></script><script type="text/javascript">layui.use(["jquery",'form','element','layer'],function() {let $ = layui.jquery;var form = layui.form;var element = layui.element;var layer = layui.layer;$("#btn7").click(function(){layer.open({type:0, //设置类型 默认为0 1页面层 2ifream层title:"提示", //标题content:'你好么',//内容 type=0为内容skin:'layui-layer-molv',//皮肤area:['500px','300px'], //宽高icon:1, //只对type=0有效btn:['按钮一','按钮二','按钮三'],yes: function(index,layero){alert("按钮一");layer.close(index);},btn2:function (index,layero) {alert("按钮二")},btn3:function (index,layero) {alert("按钮三")},cancel:function () {alert("cancel")},btnAlign:'c', //按钮对齐方式shade:[0.8,'#393D49'], //遮罩shadeClose:true //当点击遮罩是否关闭弹层});});});</script>
</body>

layer.type=1

页面层，可以把页面上的某一段HTML代码放到弹出层里面，此时的content属性可以使用html代码，也可以使用页面元素选择器
在这里插入图片描述

                  $("#btn8").click(function(){layer.open({type:1, //设置类型 默认为0 1页面层 2ifream层title:"提示", //标题content:$('#mydiv'),//内容 type=0为内容skin:'layui-layer-molv',//皮肤area:['500px','300px'], //宽高});});

layer.type=2

type=2是一个iframe层，此时的content就是一个页面的url
在这里插入图片描述

                  $("#btn9").click(function(){layer.open({type:2, //设置类型 默认为0 1页面层 2ifream层title:"提示", //标题content:"test2.html",//内容 type=0为内容skin:'layui-layer-molv',//皮肤area:['500px','300px'], //宽高});});

二、数据表格

在这里插入图片描述
1.数据准备
users.json数据格式

{"code": 0,"msg": "","count": 101,"data": [{"id": "10001","username": "杜甫","email": "xianxin@layui.com","sex": "男","city": "浙江杭州","sign": "点击此处，显示更多。当内容超出时，点击单元格会自动显示更多内容。","experience": "116","ip": "192.168.0.8","logins": "108","joinTime": "2016-10-14"}, {"id": "10002","username": "李白","email": "xianxin@layui.com","sex": "男","city": "浙江杭州","sign": "君不见，黄河之水天上来，奔流到海不复回。 君不见，高堂明镜悲白发，朝如青丝暮成雪。 人生得意须尽欢，莫使金樽空对月。 天生我材必有用，千金散尽还复来。 烹羊宰牛且为乐，会须一饮三百杯。 岑夫子，丹丘生，将进酒，杯莫停。 与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听) 钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒) 古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯) 陈王昔时宴平乐，斗酒十千恣欢谑。 主人何为言少钱，径须沽取对君酌。 五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。","experience": "12","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14","LAY_CHECKED": true}, {"id": "10003","username": "王勃","email": "xianxin@layui.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "65","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"}, {"id": "10004","username": "李清照","email": "xianxin@layui.com","sex": "女","city": "浙江杭州","sign": "人生恰似一场修行","experience": "666","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"}, {"id": "10005","username": "冰心","email": "xianxin@layui.com","sex": "女","city": "浙江杭州","sign": "人生恰似一场修行","experience": "86","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"}, {"id": "10006","username": "贤心","email": "xianxin@layui.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "12","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"}, {"id": "10007","username": "贤心","email": "xianxin@layui.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "16","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"}, {"id": "10008","username": "贤心","email": "xianxin@layui.com","sex": "男","city": "浙江杭州","sign": "人生恰似一场修行","experience": "106","ip": "192.168.0.8","logins": "106","joinTime": "2016-10-14"}]
}

2.数据表格代码
可以使用html实现
可以使用js实现

<body><div style="display: none" id="userToolBar"><div class="layui-btn-group"><button type="button" class="layui-btn layui-btn-sm">增加</button><button type="button" class="layui-btn layui-btn-sm">编辑</button><button type="button" class="layui-btn layui-btn-sm">删除</button></div></div><div id="userBar" style="display: none;"><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></div><table class="'layui-hide" id="userTable" lay-filter="userTable"></table><script src="../static/css/layui.js"></script><script type="text/javascript">layui.use(["jquery",'form','element','layer','table'],function() {let $ = layui.jquery;var form = layui.form;var element = layui.element;var layer = layui.layer;var table = layui.table;//渲染数据表格table.render({elem: '#userTable', //渲染的目标对象url:'../static/images/users.json', //数据接口title:'用户数据登录表',//数据导出的标题page:true,//是否启动分页toolbar:"#userToolBar",//表格的工具条defaultToolbar:['filter','exports','print'],//width:220,//hight:300,//cellMinWidth:100,//设置列的最小默认宽度down:function(res,curr,count){alert(res);//后台url返回的json串alert(curr);//当前页alert(count);//数据总条数},totalRow:true,//开启合并行limit:20,//设置每页显示的条数，默认为10limits:[20,40,60,80],loading:true,text:{none:"未查询到数据"  //默认无数据},cols: [[ //列表数据{type:'checkbox',fixed:'left'},{field:'id', title:'ID', width:80,sort:true}, //field设定字段名，title设定标题名称,sort排页面已有数据{field:'username', title:'用户名', width:120,edit:true,align:'center'},//edit可编辑{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){return '<em>'+ res.email +'</em>'}},{field:'sex', title:'性别', width:80, edit: 'text', sort: true,templet: function (d) {return d.sex=='男'?'汉子':'妹子';}},{field:'city', title:'城市', width:100},{field:'sign', title:'签名',totalRowText:'合计'},{field:'experience', title:'积分', width:80,totalRow:true}, //totalRow合并计算{field:'ip', title:'IP', width:120},{field:'logins', title:'登入次数', width:100},{field:'joinTime', title:'加入时间', width:120},{fixed: 'right', title:'操作',toolbar:"#userBar",width:150}]]});});</script>

3、相关事件监听

监听头工具栏事件
在这里插入图片描述

<body><table class="'layui-hide" id="userTable" lay-filter="userTable"></table><div type="text/html" style="display: none" id="userToolBar"><a class="layui-btn layui-btn-xs" lay-event="add">添加</a><a class="layui-btn layui-btn-xs" lay-event="batch_del">批量删除</a></div>//头工具栏事件table.on('toolbar(userTable)', function(obj) {switch (obj.event) {case 'add':layer.msg('添加');break;case 'batch_del':layer.msg('批量删除');break;}})});</script>
</body>

监听复选框选择
在这里插入图片描述

			//监听复选框选择table.on('checkbox(userTable)',function(obj){console.log(obj.checked);//当前是否选中状态console.log(obj.data);//选中行的相关数据console.log(obj.type);//如果触发的是全选，则为:all，触发的是单选，则为：one})

监听单元格编辑

在这里插入图片描述

//监听单元格编辑table.on('edit(userTable)', function(obj){ //注：edit是固定事件名，test是table原始容器的属性 lay-filter="对应的值"console.log(obj.value); //得到修改后的值console.log(obj.field); //当前编辑的字段名console.log(obj.data); //所在行的所有相关数据//发送post请求更新数据//$.post("url?"+obj.field+"&id="+obj.data.id,function(json){//});

监听行单击事件
在这里插入图片描述

     //监听行单击事件table.on('row(userTable)', function(obj){console.log(obj.tr) //得到当前行元素对象console.log(obj.data) //得到当前行数据obj.del(); //删除当前行//obj.update(fields) //修改当前行数据});

监听行双击事件

   //监听行双击事件table.on('rowDouble(userTable)', function(obj){console.log(obj.tr) //得到当前行元素对象console.log(obj.data) //得到当前行数据obj.del(); //删除当前行//obj.update(fields) //修改当前行数据});

绑定工具条模板：toolbar
通常你需要在表格的每一行加上查看、编辑、删除这样类似的操作按钮，而 tool 参数就是为此而生，你因此可以非常便捷地实现各种操作功能。tool 参数和 templet 参数的使用方式完全类似，通常接受的是一个选择器，也可以是一段HTML字符。
在这里插入图片描述

//监听工具条table.on('tool(userTable)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"var data = obj.data; //获得当前行数据var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）if (layEvent === 'del') { //查看//do somehinglayer.msg("删除");layer.confirm('真的删除行么', function (index) {layer.close(index);});} else if (layEvent === 'edit') { //编辑//do somethinglayer.msg('修改')//同步更新缓存对应的值}});

获取选中行

在这里插入图片描述

<body><div type="text/html" style="display: none" id="userToolBar"><a class="layui-btn layui-btn-xs" lay-event="add">添加</a><a class="layui-btn layui-btn-xs" lay-event="batch_del">批量删除</a><a type='button' class="layui-btn layui-btn-sm" lay-event="getSelect">得到选中行</a><a type="button" class="layui-btn layui-btn-sm" lay-event="reloadTable">刷新数据</a></div>//头工具栏事件table.on('toolbar(userTable)', function(obj) {switch (obj.event) {case 'add':layer.msg('添加');break;case 'batch_del':layer.msg('批量删除');break;case 'getSelect':var checkStatus = table.checkStatus('userTable'); //idTest 即为基础参数 id 对应的值console.log(checkStatus.data) //获取选中行的数据console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件console.log(checkStatus.isAll ) //表格是否全选break;}})</script>
</body>

刷新数据
在这里插入图片描述

<body><div type="text/html" style="display: none" id="userToolBar"><a class="layui-btn layui-btn-xs" lay-event="add">添加</a><a class="layui-btn layui-btn-xs" lay-event="batch_del">批量删除</a><a type='button' class="layui-btn layui-btn-sm" lay-event="getSelect">得到选中行</a><a type="button" class="layui-btn layui-btn-sm" lay-event="reloadTable">刷新数据</a></div><script type="text/javascript">layui.use(["jquery",'form','element','layer','table'],function() {let $ = layui.jquery;var form = layui.form;var element = layui.element;var layer = layui.layer;var table = layui.table;//渲染数据表格table.render({elem: '#userTable', //渲染的目标对象url:'../static/images/users.json', //数据接口title:'用户数据登录表',//数据导出的标题page:true,//是否启动分页toolbar:"#userToolBar",//表格的工具条defaultToolbar:['filter','exports','print'],//width:220,//hight:300,//cellMinWidth:100,//设置列的最小默认宽度down:function(res,curr,count){alert(res);//后台url返回的json串alert(curr);//当前页alert(count);//数据总条数},totalRow:true,//开启合并行limit:20,//设置每页显示的条数，默认为10limits:[20,40,60,80],loading:true,text:{none:"未查询到数据"  //默认无数据},cols: [[ //列表数据{type:'checkbox',fixed:'left'},{field:'id', title:'ID', width:80,sort:true}, //field设定字段名，title设定标题名称,sort排页面已有数据{field:'username', title:'用户名', width:120,edit:true,align:'center'},//edit可编辑{field:'email', title:'邮箱', width:150, edit: 'text', templet: function(res){return '<em>'+ res.email +'</em>'}},{field:'sex', title:'性别', width:80, edit: 'text', sort: true,templet: function (d) {return d.sex=='男'?'汉子':'妹子';}},{field:'city', title:'城市', width:100},{field:'sign', title:'签名',totalRowText:'合计'},{field:'experience', title:'积分', width:80,totalRow:true}, //totalRow合并计算{field:'ip', title:'IP', width:120},{field:'logins', title:'登入次数', width:100},{field:'joinTime', title:'加入时间', width:120},{fixed: 'right', title:'操作',toolbar:"#userBar",width:150}]]});//头工具栏事件table.on('toolbar(userTable)', function(obj) {switch (obj.event) {case 'add':layer.msg('添加');break;case 'batch_del':layer.msg('批量删除');break;case 'getSelect':var checkStatus = table.checkStatus('userTable'); //idTest 即为基础参数 id 对应的值console.log(checkStatus.data) //获取选中行的数据console.log(checkStatus.data.length) //获取选中行数量，可作为是否有选中行的条件console.log(checkStatus.isAll ) //表格是否全选break;//表格重载case 'reloadTable':table.reload('userTable',{url:'../static/images/users.json'})break;}})});</script>
</body>

三、layui弹出层和数据表格综合案例

实现添加数据，修改数据

在这里插入图片描述

全部代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="../static/css/layui.css"><link rel="stylesheet" href="../static/css/layer.css"><link rel="stylesheet" href="../static/css/laydate.css"></head>
<body><!--搜索条件开始--><fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;" ><legend>查询条件</legend></fieldset><form class="layui-form" action="" method="post"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">学号</label><div class="layui-input-inline"><input type="text" name="id" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">姓名</label><div class="layui-input-inline"><input type="text" name="name" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">邮箱</label><div class="layui-input-inline"><input type="text" name="email" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">开始时间</label><div class="layui-input-inline"><input type="text" class="layui-input" name="start_time" readonly="readonly" id="start_time" placeholder="yyyy-MM-dd"></div></div><div class="layui-inline"><label class="layui-form-label">结束时间</label><div class="layui-input-inline"><input type="text" class="layui-input" name="endtime" readonly="readonly" id="endtime" placeholder="yyyy-MM-dd"></div></div></div><div class="layui-form-item" style="text-align: center;"><div class="layui-input-block"><button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-search" id="doSearch" lay-submit="" lay-filter="demo1">查询</button><button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">重置</button></div></div></form><!--搜索条件结束--><!--数据表格开始--><div type="text/html" style="display: none" id="userToolBar"><a class="layui-btn layui-btn-xs" lay-event="add">添加</a><a class="layui-btn layui-btn-xs" lay-event="batch_del">批量删除</a></div><div id="userBar" style="display: none;"><a class="layui-btn layui-btn-xs" lay-event="edit" id="modify">编辑</a><a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a></div><table class="'layui-hide" id="userTable" lay-filter="userTable"></table><!--数据表格结束--><!--添加和修改弹出层开始--><div style="display:none;padding: 20px" id="addnewdata"><form class="layui-form" action="" method="post" lay-filter="dataFrm" id="dataFrm"><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">学号</label><div class="layui-input-inline"><input type="text" name="id" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">姓名</label><div class="layui-input-inline"><input type="text" name="name" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><div class="layui-inline"><label class="layui-form-label">邮箱</label><div class="layui-input-inline"><input type="text" name="email" autocomplete="off" class="layui-input"></div></div><div class="layui-inline"><label class="layui-form-label">城市</label><div class="layui-input-inline"><input type="text" name="city" autocomplete="off" class="layui-input"></div></div></div><div class="layui-form-item"><label class="layui-form-label">性别</label><div class="layui-input-block"><input type="radio" name="sex" value="男" title="男" checked=""><input type="radio" name="sex" value="女" title="女"></div></div><div class="layui-form-item" style="text-align: center;"><div class="layui-input-block"><button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" id="dosubmit" lay-submit="" lay-filter="dosubmit">提交</button><button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">关闭</button></div></div></form></div><!--添加和修改弹出层结束--><script src="../static/css/layui.js"></script><script type="text/javascript">layui.use(["jquery",'form','element','layer','table','laydate'],function() {let $ = layui.jquery;let form = layui.form;let element = layui.element;let layer = layui.layer;let table = layui.table;let laydate = layui.laydate;laydate.render({elem:'#start_time',type:'datetime',calendar:'True'});laydate.render({elem:'#endtime',type:'datetime',calendar:'True'});//渲染数据表格var tableIns=table.render({elem: '#userTable', //渲染的目标对象url:'../static/images/users.json', //数据接口title:'用户数据登录表',//数据导出的标题page:true,//是否启动分页toolbar:"#userToolBar",//表格的工具条defaultToolbar:['filter','exports','print'],//width:220,hight:"full-300",//cellMinWidth:100,//设置列的最小默认宽度down:function(res,curr,count){alert(res);//后台url返回的json串alert(curr);//当前页alert(count);//数据总条数},//totalRow:true,//开启合并行limit:30,//设置每页显示的条数，默认为10//limits:[20,40,60,80],loading:true,text:{none:"未查询到数据"  //默认无数据},cols: [[ //列表数据{type:'checkbox',fixed:'left'},{field:'id', title:'ID',sort:true}, //field设定字段名，title设定标题名称,sort排页面已有数据{field:'username', title:'用户名',edit:true,align:'center'},//edit可编辑{field:'email', title:'邮箱',align:'center',edit: 'text', templet: function(res){return '<em>'+ res.email +'</em>'}},{field:'sex', title:'性别',align:'center',edit: 'text', sort: true,templet: function (d) {return d.sex=='1'?'男':'女';}},{field:'city', title:'城市',align:'center'},{fixed: 'right', title:'操作',align:'center',toolbar:"#userBar"}]]});//监听工具条table.on('tool(userTable)', function(obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"var data = obj.data; //获得当前行数据var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）if (layEvent === 'del') { //查看//do somehinglayer.msg("删除");layer.confirm('真的删除行么', function (index) {layer.close(index);});} else if (layEvent === 'edit') { //编辑//do somethingopenUpdateUser(data);//同步更新缓存对应的值}});//头工具栏事件table.on('toolbar(userTable)', function(obj) {switch (obj.event) {case 'add':openAddUser();break;case 'batch_del':layer.msg('批量删除');break;}})var url;var mainIndex;//打开添加页面function openAddUser(){mainIndex = layer.open({type:1,title:"添加用户",content:$("#addnewdata"),area:['800px','400px'],success:function (index) {//清空表单数据$('#dataFrm')[0].reset();url="user/updateUser.action";}})}//打开添修改页面function openUpdateUser(data){mainIndex=layer.open({type:1,title:"修改用户",content:$("#addnewdata"),area:['800px','400px'],success:function (index) {form.val("dataFrm",data);}})}//保存form.on("submit(dosubmit)",function (obj) {alert('ok');//序列化表单数据var params = $("#dataFrm").serialize();alert(params);$.post(url,params,function (obj) {alert("成功");//关闭弹出层layer.close(mainIndex);//刷新数据表格tableIns.reload();})})});</script>
</body>
</html>