当前位置: 首页 > news >正文

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

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

 排查之后,发现表格标签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.lryc.cn/news/99093.html

相关文章:

  • flutter开发实战-父子Widget组件调用方法
  • 策略模式的实现与应用:掌握灵活算法切换的技巧
  • 当ChatGPT应用在汽车行业,具体有哪些场景?
  • 行为型-中介者模式(Mediator Pattern)
  • Kibana+Prometheus+node_exporter 监控告警部署
  • 【前端知识】JavaScript——设计模式(工厂模式、构造函数模式、原型模式)
  • 未来的算法备案法规:创新和安全如何兼顾?
  • pycharm 使用远程服务器 jupyter (本地jupyter同理)
  • leetcode 376. 摆动序列
  • 【图像处理】使用自动编码器进行图像降噪(改进版)
  • MySQL大数据量分页查询方法及其优化
  • dataTable转成对象、json、list
  • ubuntu环境安装centos7虚拟机网络主机不可达,ping不通
  • STN:Spatial Transformer Networks
  • C语言学习笔记 VScode设置C环境-06
  • alias取别名后,另一个shell中和shell脚本中不生效的问题以及crontab执行docker失败问题
  • Shell ❀ 一键配置Iptables规则脚本 (HW推荐)
  • linux服务器查找大文件及删除文件后磁盘空间没有得到释放
  • Java那些“锁”事 - 死锁及排查
  • LLM系列 | 18 : 如何用LangChain进行网页问答
  • Aspose.cell excel转pdf日期格式不正确yyyy/MM/dd变成MM/dd/yyyy
  • 搭建golang开发环境
  • Django实现音乐网站 ⑴
  • 基于粒子群优化算法的分布式电源选址与定容【多目标优化】【IEEE33节点】(Matlab代码实现)
  • 打卡一个力扣题目
  • 【SSM—SpringMVC】 问题集锦(持续更新)
  • 2022年全国职业院校技能大赛(高职组)“软件测试”赛项接口测试任务书
  • Docker 如何助您成为数据科学家
  • 机器学习01 -Hello World(对鸢尾花(Iris Flower)进行训练及测试)
  • android studio JNI开发