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

往事不堪回首..

已于 2023-07-28 10:50:23 修改

阅读量2k

点赞数

文章标签： layui javascript 前端

于 2023-07-28 10:30:08 首次发布

本文链接：https://blog.csdn.net/qq3892997/article/details/131974904

版权

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

排查之后，发现表格标签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){
            //重新加载table
            table.reload('logList',{    //重新加载table
                where: 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>

往事不堪回首..

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
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。
复制链接

扫一扫