layui各种事件无效(例如表格重载或 分页插件按钮失效)的解决方法

chatgpt/2023/10/4 8:38:38

下图是我一个系统的操作日志,在分页插件右下角嵌入了一个导出所有数据的按钮 ,代码没有任何问题,点击导出按钮却失效 

 排查之后,发现表格标签table定义了ID又定义了lay-filter,因我使用的layui从2.7.6升级到2.8.11,升级2.8+之后新增了ID,与原本的lay-filter功能基本一致,也就是定义了ID就不要定义lay-filter,否则例如我下面的id与lay-filter都定义不一致,导致定义的方法如果绑定的是表格的ID那么就会造成事件失效,解决办法要么删除id要么删除lay-filter

<table class="layui-hide" id="currentTableId" lay-filter="logTable" lay-size="sm"></table>

完整html代码:

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>操作日志</title><!-- 请勿在项目正式环境中引用该 layui.css 地址 --><link href="layui/css/layui.css" rel="stylesheet"><style>/*表格标题样式*/.layui-table-tool-temp {text-align: center;font-size: 20px;font-weight: 600;color: #5d9d87;}.layui-table-cell {font-size: 8px;height: 30px;line-height: 24px;padding: 2px 2px;}.layui-form-item {margin-bottom: 0px; }</style>
</head>
<body>
<div class="layui-form-item layui-form" style="margin-top:5px" lay-filter="logFormFilter"> <!--必须在表单中添加layui-form的class,否则提交的时候无法获取到任何值,无法识别为form表单--><div class="layui-form-item" style="margin:0"><div class="layui-inline"><label class="layui-form-label" style="width: 100px;" >操作时间</label><div class="layui-input-inline"  style="width: 180px;margin-right:0px;"><input id="createDate" name="createDate" class="layui-input" autocomplete="off"/></div></div><div class="layui-inline"><label class="layui-form-label">操作类型</label><div class="layui-input-inline"><select id="type" name="type" lay-search="" ><option value="">搜索或选择操作类型</option><option th:each="type:${types}" th:value="${type}" th:text="${type}"></option></select></div></div><div class="layui-inline"><div class="layui-input-group"><div class="layui-input-prefix">   操作用户  </div><input name="username" placeholder="输入用户工号或名字" class="layui-input"><div class="layui-input-split layui-input-suffix" style="cursor: pointer;background: aquamarine;" id="searchSubmit" lay-submit lay-filter="searchSubmit"><i class="layui-icon layui-icon-search"></i></div></div></div></div>
</div>
<script type="text/html" id="logToolbar">操作日志   <!--工具栏中添加搜索框,非laydate都没问题,否则会出现时间框无效-->
</script>
<table id="logList" lay-size="sm"></table>
<script type="text/html" id="pagebar"><!--分页插件--><div class="layui-btn-container"><button class="layui-btn layui-btn-hei layui-btn-sm " lay-event="export" ><i class="layui-icon layui-icon-export">导出全部</i></button></div>
</script>
<script src="/layui/layui.js"></script>
<script th:inline="javascript">layui.use(['form','laydate','table'], function(){var laydate = layui.laydate, table = layui.table, form = layui.form;//操作日期初始化laydate.render({elem: '#createDate',range: '~',value: [[${createDate}]] //初始化日期,max:0 //最大日期只能选择当天,rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  2.8+ 新增});table.render({elem: '#logList',url:'/getSysLog',method: 'post', //默认:get请求cellMinWidth: 80,page: true,limit: 20,limits: [20, 50, 100],title: '操作日志',where: {createDate : [[${createDate}]] },toolbar: '#logToolbar',pagebar: '#pagebar', // 分页栏模板even: true, //开启隔行背景cols: [[{type:'numbers'},{field:'model', title:'模块', width:160},{field:'type', title:'类型', sort:true, width:70},{field:'description', title:'描述', width:146},{field:'url', title: 'Url', width:128},{field:'method', title:'方法', width:220},{field:'params', title:'参数'},{field:'result', title:'结果' },{field:'username', title:'操作用户', width:100},{field:'ip', title:'IP', width:100},{field: 'createDate', width:120, title: '操作时间', sort: true, templet: "<div>{{layui.util.toDateString(d.createDate, 'yyyy-MM-dd HH:mm:ss')}}</div>"}]],done: function(res, curr, count){pageCurr=curr;}});//监听搜索框form.on('submit(searchSubmit)', function(data){//重新加载tabletable.reload('logList',{    //重新加载tablewhere: data.field, page: {curr: 1 //重新从第 1 页开始,如果当前是第10页,再次根据其他条件查询可能无法查询到第10页的数据,翻页时并不会触发跳到第1页}});return false;});// 底部分页栏事件table.on('pagebar(logList)', function(obj){debugger;var eventValue = obj.event; // 获得按钮 lay-event 值if(eventValue == 'export'){$.post('/getSysLog', form.val('logFormFilter'), function(res) {if(res.code==0){table.exportFile('logList', res.data, 'xls'); //表名 数据  格式}else{layer.msg(res.msg, {icon: 5});}})}});});</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.exyb.cn/news/show-5314323.html

如若内容造成侵权/违法违规/事实不符,请联系郑州代理记账网进行投诉反馈,一经查实,立即删除!

相关文章

【Linux后端服务器开发】MAC地址与其他重要协议

目录 一、以太网 二、MAC地址 三、MTU 四、ARP协议 五、DNS系统 六、ICMP协议 七、NAT技术 八、代理服务器 一、以太网 “以太网”不是一种具体的网路&#xff0c;而是一种技术标准&#xff1a;既包含了数据链路层的内容&#xff0c;也包含了一些物理层的内容&#xf…

iOS开发-检查版本更新与强制更新控制

iOS开发-检查版本更新与强制更新控制。 在开发中经常遇到需要检查版本&#xff0c;检查版本及请求appstoreLookUrl查看版本号与当前的版本号进行比对&#xff0c;看是否需要更新。强制更新控制&#xff0c;是将获取到当前版本号传给服务端&#xff0c;服务端判断当前的版本是否…

二叉树题目:左叶子之和

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;左叶子之和 出处&#xff1a;404. 左叶子之和 难度 3 级 题目描述 要求 给你二叉树的根结点 root \texttt{ro…

Java常见异常和错误处理

目录 1. Java.lang.NullPointerException2. Java.lang.ClassNotFoundException3. Java.lang.ArithmeticException4. Java.lang.ArrayIndexOutOfBoundsException5. Java.lang.IllegalArgumentException6. Java.lang.IllegalAccessException7. Java.lang.InstantiationException8…

【ROS 02】ROS通信机制

机器人是一种高度复杂的系统性实现&#xff0c;在机器人上可能集成各种传感器(雷达、摄像头、GPS...)以及运动控制实现&#xff0c;为了解耦合&#xff0c;在ROS中每一个功能点都是一个单独的进程&#xff0c;每一个进程都是独立运行的。更确切的讲&#xff0c;ROS是进程&#…

Flask中flask-session

Flask中flask-session Flask-Session是一个为Flask应用程序开发的工具&#xff0c;允许您轻松处理服务器端会话。会话是存储和追踪用户特定数据的方式。例如&#xff0c;当用户登录到应用程序时&#xff0c;他们的状态&#xff08;即登录状态&#xff09;可以保存在会话中&…

【ARM 常见汇编指令学习 8 - dsb sy 指令及 dsb 参数介绍】

文章目录 ARM dsb sy 指令 上篇文章&#xff1a;ARM 常见汇编指令学习 7 - LDR 指令与LDR伪指令及 mov指令 下篇文章&#xff1a;ARM 常见汇编指令学习 9 - 缓存管理指令 DC 与 IC ARM dsb sy 指令 数据同步屏障是一种特殊类型的内存屏障。 只有当DSB指令执行完毕后&#xff…

群晖虚拟机OpenWRT配置Taiscale

Extract the contents of root to your filesystem root: tar x -zvC / -f openwrt-tailscale-enabler-<tag>.tgzInstall the prerequisites for wget and tailscale: opkg update opkg install libustream-openssl ca-bundle kmod-tunRun tailscale for the first ti
推荐文章