后台建设电商网站,给企业做网站的平台,2023年8月新闻热点事件,wordpress 买数据库下图是我一个系统的操作日志#xff0c;在分页插件右下角嵌入了一个导出所有数据的按钮 #xff0c;代码没有任何问题#xff0c;点击导出按钮却失效 排查之后#xff0c;发现表格标签table定义了ID又定义了lay-filter#xff0c;因我使用的layui从2.7.6升级到2.8.11在分页插件右下角嵌入了一个导出所有数据的按钮 代码没有任何问题点击导出按钮却失效 排查之后发现表格标签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 classlayui-hide idcurrentTableId lay-filterlogTable lay-sizesm/table 完整html代码
!DOCTYPE html
html xmlns:thhttp://www.w3.org/1999/xhtml
headmeta charsetutf-8meta nameviewport contentwidthdevice-width, initial-scale1title操作日志/title!-- 请勿在项目正式环境中引用该 layui.css 地址 --link hreflayui/css/layui.css relstylesheetstyle/*表格标题样式*/.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 classlayui-form-item layui-form stylemargin-top:5px lay-filterlogFormFilter !--必须在表单中添加layui-form的class否则提交的时候无法获取到任何值无法识别为form表单--div classlayui-form-item stylemargin:0div classlayui-inlinelabel classlayui-form-label stylewidth: 100px; 操作时间/labeldiv classlayui-input-inline stylewidth: 180px;margin-right:0px;input idcreateDate namecreateDate classlayui-input autocompleteoff//div/divdiv classlayui-inlinelabel classlayui-form-label操作类型/labeldiv classlayui-input-inlineselect idtype nametype lay-search option value搜索或选择操作类型/optionoption th:eachtype:${types} th:value${type} th:text${type}/option/select/div/divdiv classlayui-inlinediv classlayui-input-groupdiv classlayui-input-prefix 操作用户 /divinput nameusername placeholder输入用户工号或名字 classlayui-inputdiv classlayui-input-split layui-input-suffix stylecursor: pointer;background: aquamarine; idsearchSubmit lay-submit lay-filtersearchSubmiti classlayui-icon layui-icon-search/i/div/div/div/div
/div
script typetext/html idlogToolbar操作日志 !--工具栏中添加搜索框非laydate都没问题否则会出现时间框无效--
/script
table idlogList lay-sizesm/table
script typetext/html idpagebar!--分页插件--div classlayui-btn-containerbutton classlayui-btn layui-btn-hei layui-btn-sm lay-eventexport i classlayui-icon layui-icon-export导出全部/i/button/div
/script
script src/layui/layui.js/script
script th:inlinejavascriptlayui.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){pageCurrcurr;}});//监听搜索框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.code0){table.exportFile(logList, res.data, xls); //表名 数据 格式}else{layer.msg(res.msg, {icon: 5});}})}});});/script
/body
/html
