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

这篇具有很好参考价值的文章主要介绍了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代码:文章来源地址https://www.toymoban.com/news/detail-616054.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>

到了这里,关于layui各种事件无效(例如表格重载或 分页插件按钮失效)的解决方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包