layui 表格重载导致表头工具栏失效【一】

我会带着你远行 2023-10-09 21:12 53阅读 0赞

**问题描述**

`layui` 数据表格重载后，表头的工具栏按钮点击失效，不能二次点击，必须刷新整个页面才能生效！

**问题分析**

因为工具栏的按钮是后期渲染出来的，所以第一次载入页面按钮事件是生效的，但是重载之后按钮也会重新加载。这时候按钮就变成未来元素了。这时候按钮就会捕捉不到`click`操作。

**解决办法**

采用事件委托的方式对按钮进行绑定

1、工具栏按钮：

<script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" id="btnCreate" type="button">新增</button>
        </div>
    </script>

2、`js` 部分：

<script src="/static/layui/layui.js" charset="utf-8"></script>
    
    <script>
        layui.use(['table', 'form'], function () {
        
            var table = layui.table
                , form = layui.form;
            var loadingMsg = layer.msg('数据请求中', {
        icon: 16, scrollbar: false, time: 0});
    
            table.render({
        
                elem: '#test'
                , url: '{
        { url_for("rbac_bp.rolelistresource") }}'
                , toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
                , defaultToolbar: ['filter', 'exports', 'print', {
         //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                    title: '提示'
                    , layEvent: 'LAYTABLE_TIPS'
                    , icon: 'layui-icon-tips'
                }]
                , cellMinWidth: 120  // 单元格最新宽度，全局
                , title: '用户数据表'
                , cols: [[
                    {
        field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true}
                    , {
        field: 'name', title: '名称', edit: 'text'}
                    , {
        field: 'remark', title: '备注', edit: 'text'}
                    , {
        field: 'details', title: '详情', edit: 'text'}
                    , {
        field: 'enable', title: '是否开启', edit: 'text'}
                    , {
        field: 'code', title: '角色标识', edit: 'text'}
                    , {
        fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
                ]]
                , id: 'testReload'
                , page: true
                , done: function (res, curr, count) {
        
                    layer.close(loadingMsg);
                }
            });
           
            // 表格重载
            function tableReload() {
        
                table.reload('testReload', {
        
                    page: {
        
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
    
            // 使用事件委托避免点击事件失效
            $("body").on("click", "#btnCreate", function () {
        
                layer.open({
        
                    type: 2,
                    title: '新增角色',
                    shadeClose: true,
                    maxmin: false,
                    fixed: false,
                    resize: false,
                    area: ['880px', '580px'],
                    content: "{
        {url_for('common_bp.get_role_form')}}",
                    end: function () {
        
                        //关闭时做的事情，表格重载
                        tableReload();
                        {
        #layer.close();#}
                    }
                });
            });
    
            
        });
    
    </script>

> 参考：[使用Layui数据表格，表格重载之后，表头工具栏按钮失效！【已解决】][Layui]

[Layui]: https://blog.csdn.net/Fly_1213/article/details/99708034

发表评论取消回复

表情：

评论列表（有 0 条评论，53人围观）

还没有评论，来说两句吧...

相关阅读

相关 layui 表格重载导致表头工具栏失效【一】

问题描述 `layui` 数据表格重载后，表头的工具栏按钮点击失效，不能二次点击，必须刷新整个页面才能生效！问题分析因为工具栏的按钮是后期渲染出来的，所以第一次载入页

我会带着你远行/ 2023年10月09日 21:12/ 0 赞/ 54 阅读

相关解决Layui表格头部工具栏事件绑定失效，上传文件按钮失效问题

背景最近使用了layui的前端框架，也在慢慢适应中，好多功能都已经封装得很实用，遇到不会的功能，看看官网的demo的文档，都还是可以解决的，毕竟咱们的模仿能力还是可以的

不念不忘少年蓝@/ 2022年12月07日 01:20/ 0 赞/ 1083 阅读

相关 layui表格表头添加提示

![layui表头提示][layui] ![layui表头提示][layui 1] '<i class="layui-icon alone-tips" lay-t

骑猪看日落/ 2022年10月16日 07:39/ 0 赞/ 335 阅读

相关 layui表格的表头不滚动

步奏： 1、设置两个table，第一个table有thead没有tbody，第二个table有tbody没有table； 2、第二个table需要一个div包住，并设置宽

左手的ㄟ右手/ 2022年05月14日 05:12/ 0 赞/ 334 阅读

相关 layui监听工具栏（操作列表按钮）

<table id="demo" lay-filter="test"></table> <script type="text/html" id="bar

拼搏现实的明天。/ 2022年04月10日 13:53/ 0 赞/ 375 阅读

相关 table表格-多级表头

数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。层级

た入场券/ 2022年03月18日 07:16/ 0 赞/ 1407 阅读

相关 LayUI数据表格通用工具栏分页+搜索+排序

完成效果 1、接收和展示后端接口传来的数据； 2、分页和跳页；设置每页的数量； 3、工具栏：查看、修改、删除； 4、工具栏：筛选列、导出Excel、打印；

客官°小女子只卖身不卖艺/ 2021年12月11日 11:43/ 0 赞/ 1553 阅读

相关编辑layui表格

开发工具与关键技术：SQL Server 2014与jquery 作者：戴怡斌撰写时间：2019年7月26日在学习jquer

爱被打了一巴掌/ 2021年11月23日 23:26/ 0 赞/ 548 阅读

相关 layui数据表格合并行，并且不影响重载

今天渲染页面的时候碰到一个问题，就是表格行合并的问题。大概如下： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

深碍√TFBOYSˉ_/ 2021年11月09日 05:36/ 0 赞/ 904 阅读

相关 Layui动态添加表头

需求:根据选择查询条件,动态添加clo列,并展示结果实现效果如下: ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVp

迈不过友情╰/ 2021年09月21日 09:42/ 0 赞/ 589 阅读