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

背景

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

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

问题重现

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

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

• 调用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提供了头部工具栏的功能，只是我需要去避免绑定按钮的失效渲染即可，
表格的工具栏模板如上，我猜想，每次在进行工具栏渲染的时候，一定是按照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函数的，但是也还是不行，遂自己总结一下，避免后面踩坑。