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.mzph.cn/news/13876.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

JavaScript高级——ES6基础入门

目录 前言let 和 const块级作用域模板字符串一.模板字符串是什么二.模板字符串的注意事项三. 模板字符串的应用 箭头函数一.箭头函数是什么二.普通函数与箭头函数的转换三.this指向1. 全局作用域中的 this 指向2. 一般函数&#xff08;非箭头函数&#xff09;中的this指向3.箭头…

SSL 证书过期巡检脚本

哈喽大家好&#xff0c;我是咸鱼 我们知道 SSL 证书是会过期的&#xff0c;一旦过期之后需要重新申请。如果没有及时更换证书的话&#xff0c;就有可能导致网站出问题&#xff0c;给公司业务带来一定的影响 所以说我们要每隔一定时间去检查网站上的 SSL 证书是否过期 如果公…

Flutter - 微信朋友圈、十字滑动效果(微博/抖音个人中心效果)

demo 地址: https://github.com/iotjin/jh_flutter_demo 代码不定时更新&#xff0c;请前往github查看最新代码 前言 一般APP都有类似微博/抖音个人中心的效果&#xff0c;支持上下拉刷新&#xff0c;并且顶部有个图片可以下拉放大&#xff0c;图片底部是几个tab&#xff0c;可…

C# IO 相关功能整合

目录 删除文件和删除文件夹 拷贝文件到另一个目录 保存Json文件和读取Json文件 写入和读取TXT文件 打开一个弹框&#xff0c;选择 文件/文件夹&#xff0c;并获取路径 获取项目的Debug目录路径 获取一个目录下的所有文件集合 获取文件全路径、目录、扩展名、文件名称 …

WPF实现DiagramChart

1、文件架构 2、FlowChartStencils.xaml <ResourceDictionary xmlns"http://schemas.microsoft.com/winfx/2006/xaml/presentation"xmlns:x"http://schemas.microsoft.com/winfx/2006/xaml"xmlns:s"clr-namespace:DiagramDesigner"xmlns:c&…

了解Unity编辑器之组件篇Miscellaneous(九)

一、Aim Constraint&#xff1a;是一种动画约束&#xff0c;用于使一个对象朝向另一个对象或一个指定的矢量方向 Activate按钮&#xff1a;用于激活或停用Aim Constraint。当Aim Constraint处于激活状态时&#xff0c;其约束效果将应用于目标对象。 Zero按钮&#xff1a;用于将…

Zabbix监控ActiveMQ

当我们在线上使用了ActiveMQ 后&#xff0c;我们需要对一些参数进行监控&#xff0c;比如 消息是否有阻塞&#xff0c;哪个消息队列阻塞了&#xff0c;总的消息数是多少等等。下面我们就通过 Zabbix 结合 Python 脚本来实现对 ActiveMQ的监控。 一、创建 Activemq Python 监控…

39. Linux系统下在Qt5.9.9中搭建Android开发环境

1. 说明 QT版本:5.9.9 电脑系统:Linux JDK版本:openjdk-8-jdk SDK版本:r24.4.1 NDK版本:android-ndk-r14b 效果展示: 2. 具体步骤 大致安装的步骤如下:①安装Qt5.9.9,②安装jdk,③安装ndk,④安装sdk,⑤在qt中配置前面安装的环境路径 2.1 安装Qt5.9.9 首先下载…

PHP8的数据类型-PHP8知识详解

在PHP8中&#xff0c;变量不需要事先声明&#xff0c;赋值即声明。 不同的数据类型其实就是所储存数据的不同种类。在PHP8.0、8.1中都有所增加。以下是PHP8的15种数据类型&#xff1a; 1、字符串&#xff08;String&#xff09;&#xff1a;用于存储文本数据&#xff0c;可以使…

VScode的简单使用

一、VScode的安装 Visual Studio Code简称VS Code&#xff0c;是一款跨平台的、免费且开源的现代轻量级代码编辑器&#xff0c;支持几乎主流开发语言的语法高亮、智能代码补全、自定义快捷键、括号匹配和颜色区分、代码片段提示、代码对比等特性&#xff0c;也拥有对git的开箱…

node.js 爬虫图片下载

主程序文件 app.js 运行主程序前需要先安装使用到的模块&#xff1a; npm install superagent --save axios要安装指定版,安装最新版会报错&#xff1a;npm install axios0.19.2 --save const {default: axios} require(axios); const fs require(fs); const superagent r…

STM32 UDS Bootloader开发-上位机篇-CANoe制作(2)

文章目录 前言CANoe增加NodeCAPL脚本获取GUI中的参数刷写过程诊断仪在线接收回调函数发送函数总结前言 在上一篇文章中,介绍了UDS Bootloadaer上位机软件基于CANoe的界面设计。本文继续介绍CAPL脚本的编写以实现刷写过程。 CANoe增加Node 在开始编写CAPL之前,需要在Simula…

Android 耗时分析(adb shell/Studio CPU Profiler/插桩Trace API)

1.adb logcat 查看冷启动时间和Activity显示时间&#xff1a; 过滤Displayed关键字&#xff0c;可看到Activity的显示时间 那上面display后面的是时间是指包含哪些过程的时间呢&#xff1f; 模拟在Application中沉睡1秒操作&#xff0c;冷启动情况下&#xff1a; 从上可知&…

【RTT驱动框架分析01】-pin/gpio驱动分析

0gpio使用测试 LED测试 #define LED1_PIN GET_PIN(C, 1) void led1_thread_entry(void* parameter) {rt_pin_mode(LED1_PIN, PIN_MODE_OUTPUT);while(1){rt_thread_delay(50); //delay 500msrt_pin_write(LED1_PIN, PIN_HIGH);rt_thread_delay(50); //delay 50…

MySQL之深入InnoDB存储引擎——物理文件

文章目录 一、参数文件二、日志文件三、表结构定义文件四、InnoDB 存储引擎文件1、表空间文件2、重做日志文件 一、参数文件 当 MySQL 实例启动时&#xff0c;数据库会先去读一个配置参数文件&#xff0c;用来寻找数据库的各种文件所在位置以及指定某些初始化参数。在默认情况…

6-Linux的磁盘分区和挂载

Linux的磁盘分区和挂载 Linux分区查看所有设备的挂载情况 将磁盘进行挂载的案例增加一块磁盘的总体步骤1-在虚拟机中增加磁盘2- 分区3-格式化分区4-挂载分区5-进行永久挂载 磁盘情况查询查询系统整体磁盘使用情况查询指定目录的磁盘占用情况 磁盘情况-工作实用指令统计文件夹下…

Vue3搭建启动

Vue3搭建&启动 一、创建项目二、启动项目三、配置项目1、添加编辑器配置文件2、配置别名3、处理sass/scss4、处理tsx(不用的话可以不处理) 四、添加Eslint 一、创建项目 npm create vite 1.project-name 输入项目名vue3-vite 2.select a framework 选择框架 3.select a var…

关于前端框架vue2升级为vue3的相关说明

一些框架需要升级 当前&#xff08;202306&#xff09; Vue 的最新稳定版本是 v3.3.4。Vue 框架升级为最新的3.0版本&#xff0c;涉及的相关依赖变更有&#xff1a; 前提条件&#xff1a;已安装 16.0 或更高版本的Node.js&#xff08;摘&#xff09; 必须的变更&#xff1a;核…

C语言进阶——文件的打开(为什么使用文件、什么是文件、文件的打开和关闭)

目录 为什么使用文件 什么是文件 程序文件 数据文件 文件名 文件的打开和关闭 文件指针 打开和关闭 为什么使用文件 在之前学习通讯录时&#xff0c;我们可以给通讯录中增加、删除数据&#xff0c;此时数据是存放在内存中&#xff0c;当程序退出的时候&#xff0c;通讯…

【弹力设计篇】聊聊灾备设计、异地多活设计

单机&集群架构 对于一个高可用系统来说&#xff0c;为了提升系统的稳定性&#xff0c;需要以下常用技术服务拆分、服务冗余、限流降级、高可用架构设计、高可用运维&#xff0c;而本篇主要详细介绍下&#xff0c;高可用架构设计。容灾备份以及同城多活&#xff0c;异地多活…