layui.table.reload后upload按钮失效

最新推荐文章于 2024-01-04 18:04:23 发布

huarshao

最新推荐文章于 2024-01-04 18:04:23 发布

阅读量2.3k

点赞数 3

CC 4.0 BY-SA版权

文章标签：前端 layui

本文链接：https://blog.csdn.net/huarshao/article/details/109769331

在layui开发里，将导入按钮置于table头部工具栏，点击查询按钮刷新table后，导入按钮失效，重新刷新页面先点击导入则可用。解决方案是在table.render中添加done方法并调用bindTableToolbarFunction()，同时定义该方法并重新定义layui.upload。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

layui开发中碰到问题，导入按钮放在table的头部工具栏中，在点击查询按钮刷新table后，发现导入按钮失效了。重新刷新页面，先点击导入时可以用的。

解决方案：

1，table.render中添加done方法，里面添加bindTableToolbarFunction()

table.render({
        elem: '#currentTableId'
        , url: your_url
        , where: your_where
        , toolbar: '#toolbarDemo'
        , height: 500
        , defaultToolbar: []
        , cols: cols
        , done: function (value, date, endDate) {
            //重新绑定，upload方法
            bindTableToolbarFunction()
        }
    });

2，定义bindTableToolbarFunction()，包含原来的upload

function bindTableToolbarFunction(){
//这里重新定义 layui.upload
        layui.use(['upload'], function () {
            //导入excel 
            upload.render({
                elem: '#importExcel'
                , url: url
                , accept: 'file' //普通文件
                , exts: 'xls|xlsx'
                , done: function (res) {
                    //上传完毕回调
                    if (res) {
                        layer.open({
                            title: '提示信息'
                            , content: '导入成功!'
                            , btn: ['确认']
                            , yes: function () {
                                //刷新当前页面
                                window.location.reload();
                            }
                        });
                    } else {
                        layer.open({
                            title: '提示信息'
                            , content: '导入异常，请联系管理员!'
                        });
                    }
                    console.log(res);
                }
                , error: function () {
                    //请求异常回调
                    layer.open({
                        title: '提示信息'
                        , content: '导入失败!'
                    });
                }
            });
        })
    }

这里方法中重新定义了layui.upload，原来upload写在外层