layui如何导出表格所有数据？

最新推荐文章于 2024-04-18 06:06:15 发布

天使小七

最新推荐文章于 2024-04-18 06:06:15 发布

阅读量3.9k

点赞数 1

文章标签： java javascript

本文链接：https://blog.csdn.net/weixin_43756775/article/details/109160805

版权

layui自带了一个导出单页数据，
但是经常要用到导出表格的所有数据，
经过一番研究后发现layui有个任意数据导出的，
条件是传入三个值
id, data, type
也就是<table 标签的id
和table.render 中cols中相对应的数据
以及导文件的后缀 csv 或者 xls
在这里插入图片描述
效果图
<图片出了意外维护当中>
页面代码
User.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户信息</title>
    <link rel="stylesheet" href="layui-v2.5.6/layui/css/layui.css" media="all">
</head>

<body>
<center><h3>你好我是UserInfo</h3></center>
<table id="TableOne"></table>
<script src="layui-v2.5.6/layui/layui.js" charset="utf-8"></script>
<!--工具栏-->
<script type="text/html" id="toolbarDemo">
    <button id="exports" class="layui-btn layui-btn-normal layui-btn-sm data-add-btn">
        <i class="layui-icon">&#xe67d;</i>导出Excel表格
    </button>
</script>

<script>
    layui.use(['form', 'table', 'laydate', 'element'], function () {
        var $ = layui.jquery,
            form = layui.form,
            laydate = layui.laydate,
            table = layui.table,
            element = layui.element;

        table.render({
            elem: '#TableOne',
            url : "/user/queryByLimit",
            toolbar: "#toolbarDemo",
            cols: [
                [
                {field:"id",title:"编号"},
                {field:"uname",title:"用户名"},
                {field:"pwd",title:"密码"}
                ]
            ]
        })

        //导出
        $("#exports").click(function () {
            var excels = null;
            $.ajax({
                url: "/user/exports",
                type: 'post',
                success:function(result){
                    excels = result;
                    table.exportFile('TableOne', excels,'xls');
                }});

            return false;
        })
    });
</script>
</body>

</html>

思路：
通过ajax得到请求数据，并将数据放入到layui自带的table.exportFile()方法中将数据导出为Excel文件

controller主要代码（根据自己的业务需求调整）

@Autowired
private UserService userService;

//导出excel需要的数据
@RequestMapping("exports")
public Object exports(){
    List<User> list = userService.list();
    return list;
}

天使小七

关注

1
点赞
踩
14

收藏

觉得还不错? 一键收藏
4
评论
layui如何导出表格所有数据？

layui自带了一个导出单页数据，但是经常要用到导出表格的所有数据，经过一番研究后发现layui有个任意数据导出的，条件是传入三个值id, data, type也就是<table 标签的id和table.render 中cols中相对应的数据以及导文件的后缀 csv 或者 xls效果图页面代码User.html<!DOCTYPE html><html lang="en"><head> <meta charset="UT
复制链接

扫一扫