【layui-全部导出】layui添加全部导出按钮

最新推荐文章于 2024-08-23 18:00:00 发布

兔头迟早要秃头

最新推荐文章于 2024-08-23 18:00:00 发布

阅读量2k

点赞数

分类专栏：项目文章标签： layui 前端

本文链接：https://blog.csdn.net/qq_44179024/article/details/131289906

版权

项目专栏收录该内容

8 篇文章 0 订阅

订阅专栏

文章讲述了如何在layui表格中添加一个自定义的全部导出按钮，通过Ajax获取后端接口的全部数据，并使用layui的table.exportFile方法以XLS格式导出。这个过程涉及到对分页接口的处理，通过设置参数来获取所有数据。

摘要由CSDN通过智能技术生成

layui的表格导出功能是只有导出单页的操作，但是没有全部导出的功能，所以需要手动添加一个按钮

1、在表单的左边自定义头部工具栏添加一个全部导出的按钮

<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
         <button class="layui-btn layui-btn-sm" lay-event="getAllData">导出全部数据</button>
    </div>
</script>

2、给工具栏事件添加绑定事件
获取后端接口返回的全部数据，使用layui的table自带的exportFile进行导出

table.exportFile(dataTable.config.id, res.data, ‘xls’);

table = layui.table,
dataTable = table.render({}）
res.data : 表格数据
xls：导出的表格类型


table.on('toolbar()', function (obj) {
            var event = obj.event;
            // 官方是用的switch，因为只有一个直接判断了
            if(event === 'getData') {
                $.ajax({
                    type: 'GET',
                    url: 'XXXXXX?page=1&limit=999999', //因为后端接口分页了，在不添加接口的情况下使用
                    headers: {
                        token: MyLocalStorage.Cache.get('token')
                    },
                    contentType: "application/json",
                    success: function (res) {
                        console.log(res.data)
                        table.exportFile(dataTable.config.id, res.data, 'xls');
                    }

                });

            }
        })