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

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');
                    }

                });

            }
        })

你可能感兴趣的:(项目,layui,前端)