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

不念不忘少年蓝@ 2022-12-07 01:20 1022阅读 0赞

### 背景 ###

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

记录一下昨天遇到的一个问题，就是我想在表格的头部工具栏，增加一个文件上传的接口，用于数据的批量导入，就简单的写了一个按钮，使用upload组件实现了功能，但是奇怪的事情发生了，第一次上传成功之后，页面不刷新，再次点击第二次的话，是无法上传文件，向后台发出请求的，最后排查的原因是，按钮上面的事件没有被渲染，导致上传组件无法与指定的按钮进行绑定。

### 问题重现 ###

*  在工具栏声明按钮，控件ID为import

*  调用upload组件，绑定控件按钮

//指定允许上传的文件类型
            upload.render({ 
                              elem: '#import'
                              , url: BASE_WEB + 'enterprisepoints/enterprisePointsBatch/importExcel' //改成您自己的上传接口
                              , accept: 'file' //普通文件
                              , acceptMime: '.xls,.xlsx'
                              , done: function (res) { 
                                            if (res.code == 400) { 
                                                table.reload(tableId);
                                                layer.msg(res.msg, { time: 4000}); 
                                                else { 
                                                table.reload(tableId);
                                                bindTableToolbarFunction();
                                                bnyKit.errorMsg(res.msg);
                                            }
                                // Layui的table在reload之后使用ID绑定的按钮失效，需要重新绑定
                                bindTableToolbarFunction();
                                }
                          });

### 问题解决 ###

#### 方案一（原始方案，不推荐） ####

问题是在进行操作后，没有执行渲染事件，那么好，我在执行的每次动作之后，都重新执行一下渲染就可以。

*  将渲染方法封装为一个函数

// Layui的table在reload之后使用ID绑定的按钮失效，需要重新绑定
            function bindTableToolbarFunction() { 
                // 绑定新增用户事件
    
                    upload.render({ 
                                      elem: '#import'
                                      , url: BASE_WEB + 'enterprisepoints/enterprisePointsBatch/importExcel' //改成您自己的上传接口
                                      , accept: 'file' //普通文件
                                      , acceptMime: '.xls,.xlsx'
                                      , done: function (res) { 
                                                        if (res.code == 400) { 
                                                            table.reload(tableId);
                                                            layer.msg(res.msg, { time: 4000});
                                                        } else { 
                                                            table.reload(tableId);
                                                            layer.msg('上传成功');
                                                            layer.msg(res.data, { 
                                                                time: 5000, //20s后自动关闭
                                                                btn: ['关闭']
                                                            });
                                                        }
                                        }
                                  });
    
    
            }

*  在每个动作之后，都需要执行该函数，例如

if (layEvent === 'details') { 
    
                    layer.open({ 
                        type: 2
                        , title: '明细详情'
                        , content: BASE_WEB + 'enterprisepoints/enterprisePointsBatch/details?batchId=' + data.id
                        , maxmin: true
                        , area: area   // 宽高
                        , btn: ['关闭']
                        , yes: function (index, layero) { 
                            layer.closeAll();
                        }
                    });
                    bindTableToolbarFunction();
                }

*  我一开始使用了该方式，但是在测试之后发现，有的情况还是不可以，而且如果我在页面添加其他操作的话，都需要是执行渲染函数，虽然已经被封装为函数了，但是还是新操作还是会被污染。

#### 方案二（推荐使用） ####

我们可以沿用layui提供了头部工具栏的功能，只是我需要去避免绑定按钮的失效渲染即可，![在这里插入图片描述][20200914172532647.png_pic_center]  
表格的工具栏模板如上，我猜想，每次在进行工具栏渲染的时候，一定是按照toolbarDemo这个id进行的，我的控件id，正式因为渲染才失效的，那么我是不是可以把按钮拿出来，然后进行上传组件的绑定呢，除此之外，lay-event这个控件还是正常使用，只是在lay-event事件处理的时候，再出发我的上传按钮的点击动作。

*  第一步，将按钮拿到模板外面

<button type="button" class="layui-btn layui-btn-sm" id="importFile" value="导入明细" style="display: none"/>
    <script type="text/html" id="headToolbarTpl">
        <input type="button" class="layui-btn layui-btn-sm" lay-event="import" style="margin-left: 10px" value="导入明细"/>
        <input type="button" class="layui-btn layui-btn-sm" lay-event="download" style="margin-left: 10px"
               value="下载模板"/>
    </script>

注：由于我在模板中已经加了导入明细的按钮操作，所以我将自己声明的按钮隐藏掉，防止页面重复出现

*  第二步：绑定生成的按钮事件，即绑定upload组件

//指定允许上传的文件类型
            upload.render({ 
                elem: '#importFile'
                              , url: BASE_WEB + 'enterprisepoints/enterprisePointsBatch/importExcel' //改成您自己的上传接口
                              , accept: 'file' //普通文件
                              , acceptMime: '.xls,.xlsx'
                              , done: function (res) { 
                    if (res.code == 400) { 
                        table.reload(tableId);
                        layer.msg(res.msg, { time: 4000});
                    } else if (res.code == 200) { 
                        table.reload(tableId);
                        //bindTableToolbarFunction();
                        bnyKit.sucessMsg(res.msg)
                    } else { 
                        table.reload(tableId);
                        //bindTableToolbarFunction();
                        bnyKit.errorMsg(res.msg);
                    }
                    // Layui的table在reload之后使用ID绑定的按钮失效，需要重新绑定
                    //bindTableToolbarFunction();
                }
                          });

*  第三步，将event的时间处理，转到隐藏按钮的点击动作

case 'import':
                        $("#importFile").click();
                        break;

#### 总结 ####

网上确实有好多人遇到这个问题，但是试了好多个方案，都不是很理想，其中还有使用table.render中的done函数的，但是也还是不行，遂自己总结一下，避免后面踩坑。

[20200914172532647.png_pic_center]: /images/20221123/3a7b77f7b3ba423185a6edefbfeb8521.png