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.rendertable.render({elem: '#LAY-user-back-manage', //指向页面组件idheight: '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', // 请求的类型，默认为getdata: {}, // 请求的参数，可以为空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', // 请求的类型，默认为getdata: {}, // 请求的参数，可以为空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.findlayer是一款近年来备受青睐的 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.formlayer.confirmfunction 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.layervar table = layui.table// 渲染表格table.render({elem:"#demo", // 表格元素的idurl:"此处填写访问网址加协议", // 数据接口的urlpage: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两个字段。如果没有，你需要修改后台代码以正确地返回这两个字段。
![[Flutter get_cli] 配置 sub_folder:false报错](https://img-blog.csdnimg.cn/direct/b4b8bb363b7b42bc96c6ab4fbffd0d10.png)
