layui
- layer
- table
- table render
<script type="text/html" id="buttonTpl">
{{# if(d.check == true){ }}
<button class="layui-btn layui-btn-xs">已审核</button>
{{# } else { }}
<button class="layui-btn layui-btn-primary layui-btn-xs">未审核</button>
{{# } }}
</script>
绑定模版选择器
{{d.id}}、{{d.title}} 是动态内容，它对应数据接口返回的字段名。
除此之外，你还可以读取到以下额外字段： 序号：{{ d.LAY_INDEX }} （该额外字段为 layui 2.2.0 新增）
<input type="checkbox" lay-filter="switch" name="switch" lay-skin="switch" lay-text="通过|待审核">
lay-verify="phone"
layui.config({
.extend({
.use(['index', 'form'], function(){
var $ = layui.$
,form = layui.form ;
form.verify({})
table.render
table.render({
elem: '#LAY-user-back-manage', //指向页面组件id
height: 'full-200',
url: '/power',
title: '预警系统用户列表',
page: true,//开启分页
limit: 5,//默认每页显示条数
limtis: [3, 5, 10],
cols: [[
{ type: 'checkbox', fixed: 'left' }
, { field: 'id', width: 80, sort: true, title: 'ID' }
, { field: 'title', width: 200, title: '用户名' }
, { field: 'pic', width: 250, title: '封面图片', templet: '#imgtmp' }
, { field: 'content', minWidth: 400, title: '内容' }
, { field: 'sort', width: 100, title: '分类' }
, { fixed: 'right', width: 165, align: 'center', toolbar: '#table-useradmin-webuser' }
]]
})
table.render({
elem: '#userData' // html 中 table 标签的 id
, url: '/user/userlist' //数据接口
, title: '已用优惠券'
, cols: [[
{ field: 'tkt_name', title: '已用优惠券', width: 300, height: 200, align: 'center' }
]]
, id:"tickedRolad" // 当前 table 变量数据表的 id
, response: { // 响应的数据的格式
statusName: 'code' //规定数据状态的字段名称，默认：code
, statusCode: 0 //规定成功的状态码，默认：0
, msgName: 'hint' //规定状态信息的字段名称，默认：msg
, countName: 'total' //规定数据总数的字段名称，默认：count
, dataName: 'maps1' //规定数据列表的字段名称，默认：data
}
, parseData: function (res) {
// 解析数据
console.log(res)
}
, skin: 'line'
});
layui.form事件监听
语法：form.on('event(过滤器值)', callback);
form模块在 layui 事件机制中注册了专属事件，所以当你使用layui.onevent()自定义模块事件时，请勿占用form名。form支持的事件如下:
event 描述
select 监听select下拉选择事件
checkbox 监听checkbox复选框勾选事件
switch 监听checkbox复选框开关事件
radio 监听radio单选框事件
submit 监听表单提交事件
基本用法细节如下:
按钮点击或者表单被执行提交时触发，其中回调函数只有在验证全部通过后才会进入，回调返回三个成员：
form.on('submit(*)', function(data){
console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});
再次温馨提示：上述的submit(*)中的 * 号为事件过滤器的值，是在你绑定执行提交的元素时设定的，如：
<button lay-submit lay-filter="*">提交</button>
你可以把*号换成任意的值，如：lay-filter="go"，但监听事件时也要改成 form.on('submit(go)', callback);
iframe表单
layer.open({
id: 'LAY_layuipro', //设定一个id，防止重复弹出
type: 2,
title:'添加人员信息',
area: ['600px','340px'],
btn: ['保存','关闭'],
yes: function(index, layero){
var inputForm = $(window.frames["layui-layer-iframe" + index].document).contents().find("#userForm");
inputForm.ajaxSubmit({
url:'<%=path%>/version/demand/saveDemand',
type:'post',
dataType:'json',
success:function(result){
if(result.data=='ok'){
layer.closeAll();
layer.alert("添加成功！")
reloadData();//重新加载列表
}
}
});
},btn2: function(){
layer.closeAll();
},content: '<%=path%>/user/toAdd'
})
, btn: ['确定', '取消']
, yes: function (index, layero) {
var iframeWindow = window['layui-layer-iframe' + index]
, submitID = 'LAY-user-back-submit'
, submit = layero.find('iframe').contents().find('#' + submitID);
iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
var field = data.field; //获取提交的字段
console.lgo(field)
https://blog.csdn.net/qq_27878777/article/details/122085781
{
"code": 0
,"msg": ""
,"count": "100"
,"data": [{
"id": "1001"
,"loginname": "admin"
,"telphone": "11111111111"
,"email": "111@qq.com"
,"role": "超级管理员"
,"jointime": "20150217"
,"check": true
},{
"id": "1002"
,"loginname": "common-1"
,"telphone": "22222222222"
,"email": "222@qq.com"
,"role": "管理员"
,"jointime": "20160217"
,"check": false
},{
"id": "1003"
,"loginname": "common-2"
,"telphone": "33333333333"
,"email": "333@qq.com"
,"role": "管理员"
,"jointime": "20161012"
,"check": false
},{
"id": "1004"
,"loginname": "common-3"
,"telphone": "44444444444"
,"email": "444@qq.com"
,"role": "管理员"
,"jointime": "20170518"
,"check": true
},{
"id": "1005"
,"loginname": "common-4"
,"telphone": "55555555555"
,"email": "555@qq.com"
,"role": "管理员"
,"jointime": "20180101"
,"check": false
},{
"id": "1006"
,"loginname": "common-5"
,"telphone": "66666666666"
,"email": "666@qq.com"
,"role": "管理员"
,"jointime": "20160217"
,"check": false
},{
"id": "1007"
,"loginname": "common-6"
,"telphone": "77777777777"
,"email": "777@qq.com"
,"role": "管理员"
,"jointime": "20161012"
,"check": false
},{
"id": "1008"
,"loginname": "common-7"
,"telphone": "88888888888"
,"email": "888@qq.com"
,"role": "管理员"
,"jointime": "20170518"
,"check": true
},{
"id": "1009"
,"loginname": "common-8"
,"telphone": "99999999999"
,"email": "999@qq.com"
,"role": "管理员"
,"jointime": "20180101"
,"check": false
}]
}
layui中layer弹出层点击事件无效
1、click只能为页面现有的元素绑定点击事件，如果是动态生成的新的元素，是没有事 件的
2、而(document).on(“click”,”指定的元素”,function());
方法则是将指定的事件绑定在document上，而新产生的元素如果符合指定的元素，那就触发此事件不起作用：(document).on(“click”,”指定的元素”,function());
方法则是将指定的事件绑定在document上，而新产生的元素如果符合指定的元素，那就触发此事件不起作用：
(‘#test').on(‘click', function() {
layer.msg(‘响应点击事件');
});
起作用了：
$(document).on(‘click', ‘#test', function() {
layer.msg(‘响应点击事件');
});
layui是一个遵循原生态开发模式的Web UI组件库，
它提供了一些常用的界面元素和交互效果。
其中一个组件是layer，它可以实现弹出层、提示框、加载层等功能。以下是一些使用layer组件的示例代码：
弹出一个简单的信息框：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layer示例</title>
<!-- 引入layui.css -->
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
</head>
<body>
<!-- 引入jquery.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入layui.js -->
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
// 使用layui模块
layui.use('layer', function(){
// 获取layer对象
var layer = layui.layer;
// 调用layer.msg方法，弹出一个信息框
layer.msg('Hello World');
});
</script>
</body>
</html>
弹出一个带有标题和按钮的询问框：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layer示例</title>
<!-- 引入layui.css -->
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
</head>
<body>
<!-- 引入jquery.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入layui.js -->
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
// 使用layui模块
layui.use('layer', function(){
// 获取layer对象
var layer = layui.layer;
// 调用layer.confirm方法，弹出一个询问框
layer.confirm('您确定要删除吗？', {
title: '提示', // 标题
btn: ['确定','取消'] // 按钮
}, function(index){
// 点击确定按钮的回调函数
layer.close(index); // 关闭当前层
layer.msg('删除成功'); // 显示删除成功信息
}, function(index){
// 点击取消按钮的回调函数
layer.close(index); // 关闭当前层
});
});
</script>
</body>
</html>
显示一个加载中的动画：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layer示例</title>
<!-- 引入layui.css -->
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
</head>
<body>
<!-- 引入jquery.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入layui.js -->
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
// 使用layui模块
layui.use('layer', function(){
// 获取layer对象
var layer = layui.layer;
// 调用layer.load方法，显示加载中动画，默认为风格0（转圈）
var index = layer.load();
setTimeout(function(){
layer.close(index); // 关闭加载层，需要传入索引值index作为参数
},3000); // 设置3秒后关闭加载层
});
</script>
</body>
</html>
layui提供了一个jquery的扩展方法，叫做layui.data。这个方法可以用来发送ajax请求，并且在请求过程中显示一个加载中的动画。以下是一个使用layui.data方法的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui示例</title>
<!-- 引入layui.css -->
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
</head>
<body>
<!-- 定义一个显示数据的容器 -->
<div id="data-container"></div>
<!-- 引入jquery.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入layui.js -->
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
// 使用layui模块
layui.use(['layer', 'jquery'], function(){
// 获取layer和jquery对象
var layer = layui.layer;
var $ = layui.jquery;
// 调用layui.data方法，发送ajax请求
layui.data('test', {
url: 'https://jsonplaceholder.typicode.com/posts', // 请求的地址
type: 'get', // 请求的类型，默认为get
data: {}, // 请求的参数，可以为空
success: function(res){ // 请求成功的回调函数
// 关闭加载层
layer.closeAll('loading');
// 把返回的数据显示到容器中
$('#data-container').html(JSON.stringify(res));
},
error: function(err){ // 请求失败的回调函数
// 关闭加载层
layer.closeAll('loading');
// 显示错误信息
layer.msg('请求失败');
}
});
});
</script>
</body>
</html>
layer.confirm是一个弹出一个带有标题和按钮的询问框的方法，它可以接受一个回调函数作为参数，在用户点击确定或取消按钮时执行。如果想要在回调函数中发送ajax请求，并且在请求过程中显示一个加载中的动画，可以使用layer.load方法来打开一个加载层，并在请求成功或失败后使用layer.closeAll或layer.close方法来关闭加载层。以下是一个使用layer.confirm和layer.load方法的示例代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layer示例</title>
<!-- 引入layui.css -->
<link rel="stylesheet" href="https://www.layuicdn.com/layui/css/layui.css">
</head>
<body>
<!-- 引入jquery.js -->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- 引入layui.js -->
<script src="https://www.layuicdn.com/layui/layui.js"></script>
<script>
// 使用layui模块
layui.use(['layer', 'jquery'], function(){
// 获取layer和jquery对象
var layer = layui.layer;
var $ = layui.jquery;
// 调用layer.confirm方法，弹出一个询问框
layer.confirm('您确定要删除吗？', {
title: '提示', // 标题
btn: ['确定','取消'] // 按钮
}, function(index){
// 点击确定按钮的回调函数
// 关闭当前层，需要传入索引值index作为参数
layer.close(index);
// 调用layer.load方法，打开一个加载层，默认为风格0（转圈）
var loadIndex = layer.load();
// 发送ajax请求
$.ajax({
url: '/././', // 请求的地址
type: 'POST', // 请求的类型，默认为get
data: {}, // 请求的参数，可以为空
success: function (res) {
// 请求成功的回调函数
// 关闭加载层，需要传入索引值loadIndex作为参数
layer.close(loadIndex);
// 显示成功信息
layer.msg('删除成功');
},
error: function(res){
// 请求失败的回调函数
// 关闭所有弹层，不需要传入参数
layer.closeAll();
// 显示错误信息
layer.alert('请求失败');
}
});
}, function(index){
// 点击取消按钮的回调函数
// 关闭当前层，需要传入索引值index作为参数
layer.close(index);
});
});
</script>
</body>
</html>
layer
layero.find
layer是一款近年来备受青睐的 web 弹层组件
var iframeWindow = window['layui-layer-iframe' + index]
, submitID = 'LAY-user-back-submit'
, submit = layero.find('iframe').contents().find('#' + submitID);
console.log(iframeWindow.layui.form)
iframeWindow.layui.form
layer.confirm
function saveBack(museId) {
var str = "<div><h4>会费返还</h4><p>金额：<input type='text' id='price' /></p></div>";
layer.confirm(str, {btn: ['确定', '取消'], title: "提示"}, function () {
var price = $("#price").val();
if (price == null || price == undefined) {
layer.msg('请输入金额', {icon: 2});
}
var url = "${ctx }/manage/member/Back.do?museId=" + museId + "&price=" + price;
$.ajax({
type: "post",
url: url,
data: null,
dataType: "json",
async: false,
success: function (data) {
if (data.flag == 1) {
layer.msg('操作成功', {icon: 1});
window.setTimeout("javascript:location.href='${ctx }/manage/member/toPage.do'", 2000);
} else {
layer.msg(data.msg, {icon: 2});
}
}
});
});
}
方法一：
直接在function里面加入layer.closeAll(‘dialog’);
layer.confirm("请问是否确定删除，删除后不可恢复？", {
btn: ["确定","取消"] //按钮
}, function(){
alert(123);
layer.closeAll('dialog');
}, function(){
});
方法二：
修改function()，function(index)，这种方式，官方是支持的。具体可以看官方文档demo的写法
layer.confirm("请问是否确定删除，删除后不可恢复？", {
btn: ["确定","取消"] //按钮
}, function(index){
alert(123);
layer.close(index);
}, function(){
});
引入layer的js文件和css文件，或者使用layui.use()方法来加载layer模块。例如1：
<script src="layer.js"></script>
<link rel="stylesheet" href="layer.css">
layui.use('layer', function(){
var layer = layui.layer;
});
使用layer.open()方法来创建一个弹出层，可以设置不同的参数来控制弹出层的类型、标题、内容、样式、位置、按钮等。例如12：
layer.open({
type: 1, // 弹出层的类型，1表示页面层
title: '标题', // 弹出层的标题
content: '内容', // 弹出层的内容，可以是html或dom对象
area: ['300px', '200px'], // 弹出层的宽高
offset: '100px', // 弹出层距离顶部的距离
btn: ['确定', '取消'], // 弹出层的按钮
yes: function(index, layero){
// 点击确定按钮的回调函数
layer.close(index); // 关闭弹出层
},
cancel: function(index, layero){
// 点击取消按钮或右上角关闭按钮的回调函数
layer.close(index); // 关闭弹出层
}
});
使用layer.msg()方法来快捷创建一个提示信息框，可以设置提示内容、图标、时间等。例如13：
layer.msg('操作成功', {icon: 1, time: 2000}); // 显示一个带有对号图标和2秒自动关闭的提示信息框
// 引入layui的table和layer模块
layui.use(['table','layer'],function () {
var table = layui.table // 获取table模块对象
var layer = layui.layer // 获取layer模块对象
table
好的，我会尽力回答你的问题。😊
根据搜索结果，你可以使用layui的table模块来创建带有选项的表格，例如复选框、单选框、工具条等。你需要在表头的cols参数中设置type和toolbar属性来指定选项的类型和模板。例如：
table.render({
elem: '#demo',
height: 312,
url: '/static/json/table/user.json', //数据接口
page: true, //开启分页
cols: [[ //表头
{type: 'checkbox', fixed: 'left'}, //复选框
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},
{field: 'username', title: '用户名', width:80},
{field: 'sex', title: '性别', width:80, sort: true},
{field: 'city', title: '城市', width:80},
<!-- 定义一个表格元素 -->
<table id="demo" lay-filter="test"></table>
<!-- 定义一个按钮模板 -->
<script type="text/html" id="btn">
<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>
<!-- 引入layui.js -->
<script src="layui/layui.js"></script>
<!-- 使用layui的table模块渲染表格 -->
<script>
layui.use(['layer','table'],function () {
var layer = layui.layer
var table = layui.table
// 渲染表格
table.render({
elem:"#demo", // 表格元素的id
url:"此处填写访问网址加协议", // 数据接口的url
page:true, // 开启分页
cols:[[ // 表头
{field: 'title', title: '标题', width:200, fixed: 'left'} ,
{field: 'ctime', title: '时间', width:150} ,
{field: 'description', title: '发布公司', width:150} ,
{field: 'button', title: '操作', width:200, toolbar:"#btn"} // 使用按钮模板
]],
parseData:function (res) { // 解析数据格式
return {
"code":0, // 状态码，必须为0
"msg":res.msg, // 状态信息
"count":1000, // 数据总数
"data":res.newslist // 数据列表
}
}
})
})
</script>
// 监听按钮点击事件
table.on('tool (test)', function(obj){
var data = obj.data; // 获取当前行的数据对象
var layEvent = obj.event; // 获取当前点击的按钮事件名
if(layEvent === 'detail'){ // 如果是查看按钮
console.log(data); // 打印当前行的数据对象
layer.msg('查看操作'); // 弹出提示信息
} else if(layEvent === 'edit'){ // 如果是编辑按钮
console.log(data); // 打印当前行的数据对象
layer.msg('编辑操作'); // 弹出提示信息
} else if(layEvent === 'del'){ // 如果是删除按钮
console.log(data); // 打印当前行的数据对象
layer.msg('删除操作'); // 弹出提示信息
}
});
第一个参数是一个字符串，表示事件名和过滤器名，用括号分隔。事件名是固定的，为’tool’，表示工具条事件。过滤器名是自定义的，要和表格元素的lay-filter属性一致，用于区分不同的表格实例。在这个例子中，过滤器名是’test’，表示监听id为’demo’的表格元素的工具条事件。
第二个参数是一个函数，表示事件处理函数。它的参数是一个对象，包含了一些事件相关的属性和方法。比如：
obj.data：表示当前行的数据对象，可以通过它获取单元格的值。
obj.event：表示当前点击的按钮事件名，可以通过它判断是哪个按钮被点击。
obj.tr：表示当前行的DOM对象，可以通过它操作DOM元素。
obj.del()：表示删除当前行的方法，可以通过它实现删除功能。
obj.update()：表示更新当前行的方法，可以通过它实现更新功能。
// 在table.render方法中，为标题列设置templet属性，值为一个函数
table.render({
cols: [[
{field:'title', title: '标题', width:200, templet: function(d){
// 使用a标签包裹标题，并设置href属性为任务详情页的链接，使用d.task_id, d.targetName, d.site_cnt作为参数
// 使用+号连接字符串和变量
return '<a href="https://127.0.0.1:5003/taskList/taskDetail?task_id='+ d.task_id +'&targetName='+ d.targetName +'&site_cnt='+ d.site_cnt +'" target="_blank">'+ d.title +'</a>';
// 或者使用模板字符串和插值表达式
// return `<a href="https://127.0.0.1:5003/taskList/taskDetail?task_id=${d.task_id}&targetName=${d.targetName}&site_cnt=${d.site_cnt}" target="_blank">${d.title}</a>`;
}}
]]
});
table.render({
elem: '#demo',
height: 312,
url: '/demo/table/user/',
page: true,
cols: [[
{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'},
{field: 'name', title: '任务名', width:200, templet: function(d){
//获取URL的参数
var url = new URL('https://120.48.83.89:5003/api/site/?page=1&size=10&task_id=642e35eea59cc5e1dd0db908&targetName=www.recheng.fun&site_cnt=4&domain_cnt=1&ip_cnt=1&cert_cnt=0&service_cnt=0&fileleak_cnt=0&url_cnt=0&vuln_cnt=0&npoc_service_cnt=0&cip_cnt=1&nuclei_result_cnt=0&stat_finger_cnt=1');
var params = url.searchParams;
//判断表格的某一行是否存在这个值
if (d._id == params.get('task_id') && d.target == params.get('targetName')){
//拼接一个超链接
return `<a href="/api/site/?page=1&size=10&task_id=${d._id}&targetName=${d.target}" target="_blank">${d.name}</a>`;
} else {
//返回原始值
return d.name;
}
}}
//其他列省略
]]
});
table render
在layui中，table.render()方法需要返回一个JSON格式的数据，其中必须包含code和data两个字段。其中code字段表示状态码，data字段表示数据。如果返回的数据格式不符合要求，就会出现这个错误。
你可以检查一下你的后台代码，看看是否正确地返回了code和data两个字段。如果没有，你需要修改后台代码以正确地返回这两个字段。
![[计算机网络]：流量控制](https://img-blog.csdnimg.cn/direct/66488ccfb58c44a39489776e59ada41d.png)
