layui table.exportFile 导出数据常见应用场景

layui table.exportFile 导出数据常见应用场景

置顶
jhadjahjhb

于 2020-12-22 16:46:36 发布

5896
 收藏 8
分类专栏： layui 文章标签： layui
版权

layui
专栏收录该内容
1 篇文章0 订阅
订阅专栏
layui table.exportFile 导出数据
数据准备工作
场景1，导出全部数据
场景2，导出选中的数据
场景3，更改表格数据，再导出数据

最近遇到关于layui table渲染完表格将需要的数据导出的问题，于是将遇到的问题总结了下来。
数据准备工作
<button class="layui-btn" lay-submit lay-filter="requestPersonBtn">获取数据</button>
<button class="layui-btn" lay-submit lay-filter="exportPersonBtn">导出数据</button>

<!--   获取数据渲染的表格  -->
<table id="requestDataTable" class="dataTable"></table>

<!--   这里的表格,是一个隐藏的表格,做数据修改后的处理     -->
<div class="layui-hide"><table id="exportDataTable" class="dataTable"></table></div>
1
2
3
4
5
6
7
8

数据请求为本地测试数据：person.json

{
  "code": 0,
  "data": [
    {
      "name": "张三",
      "age": 20,
      "hobby": "打篮球"
    },
    {
      "name": "李四",
      "age": 22,
      "hobby": "唱歌"
    },
    {
      "name": "王五",
      "age": 21,
      "hobby": "跳舞"
    }
  ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
场景1，导出全部数据
点击获取数据时，会请求json数据，渲染数据表格，定义如下变量

let personDataTable; // 变量存储当前渲染出的表格

form.on('submit(requestPersonBtn)', function () {
        personDataTable = table.render({
            elem: '#requestDataTable',
            url: '../json/person.json', // json数据路径
            size: 'sm',
            id: 'requestDataTable',
            even: true,//隔行背景
            toolbar: "#toolbarTpl",
            defaultToolbar: ['filter'],
            contentType: 'application/json',
            cols: [[
                {field: 'name', title: '姓名', width: '240'},
                {field: 'age', title: '年龄', width: '240'},
                {field: 'hobby', title: '喜好', width: '240'}
            ]],
            height: 'full-110',
            done: function (res, curr, count) {
            }
        });
        return false;  //避免表单重复提交
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
数据显示为：

点击导出数据按钮，需要做以下处理：
根据定义的 personDataTable 变量可以直接导出渲染的数据，如下图所示

form.on('submit(exportPersonBtn)', function () {
        // 这里不需要选择数据导出
        table.exportFile(personDataTable.config.id);
        return false;
    })
1
2
3
4
5


场景2，导出选中的数据
需要将table表格添加选择框，如下：

{filed: 'ID', type: 'checkbox', width: '50'},
1

获取选中的行数据

form.on('submit(exportPersonBtn)', function () {
        // 更改导出方法，需要选中数据导出
        let personData = getPersonArray();
        if(personData.length == 0){
            layer.msg("请选择需要导出的数据");
            return false;
        }
        console.log("personData", personData); //打印获取的数据
        table.exportFile(personDataTable.config.id, personData);
        return false;   //避免表单重复提交
    })

// 获取选中的数据
function getPersonArray() {
     let checkStatus = table.checkStatus('requestDataTable');
     return checkStatus.data;
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
测试的结果如下，根据选中的数据导出数据



场景3，更改表格数据，再导出数据
请求数据渲染表格后，需要对表格某一行数据进行处理，比如：请求数据后，将张三的年龄设置22，并显示红色样式

done: function (res, curr, count) {
        // 0 为张三的固定索引，数据较多时需要遍历res，这里只做演示使用
        let LAY_TABLE_INDEX = 0;  
        let td = $(".layui-table").find("[data-index='"+LAY_TABLE_INDEX+"']").find("[data-field='age']");
        td.html("22");
        td.css("color","red");
    }
1
2
3
4
5
6
7


再导出数据，发现是原来的数据，新数据并没有导出，如图：



table.exportFile 导出数据是 渲染表格后的原数据，如果数据做过修改，table.exportFile 无法导出新数据。

处理问题： 我们前面定义了这样一行代码就有用啦，处理表格渲染后，将 更改后的数据渲染到 exportDataTable 表格中备份，导出的表格数据就是exportDataTable的数据，这样就能实现导出修改过的数据。

<div class="layui-hide"><table id="exportDataTable" class="dataTable"></table></div>
1
在渲染表格后 done 函数，需要做如下处理：

let personDataExport = []; //  定义变量，需要导出的表格

done: function (res, curr, count) {
       let LAY_TABLE_INDEX = 0;
        let td = $(".layui-table").find("[data-index='"+LAY_TABLE_INDEX+"']").find("[data-field='age']");
        td.html("22");
        td.css("color","red");
        $.each(res.data, function (index, item) {
            if(index == LAY_TABLE_INDEX){
                item.age = 22;
                personDataExport.push(item);
            }else{
                personDataExport.push((item));
            }
        })
        // 遍历数据，将新数据添加到 personDataExport ,渲染需要导出的表格
        init_export_table(personDataExport);
    }
    
// 定义 init_export_table 方法
function init_export_table(data) {
        // personDataTable 变量需要指向导出的表格
        personDataTable = table.render({
            elem: '#exportDataTable',  //表格ID
            data: data,
            size: 'sm',
            id: 'exportDataTable',
            even: true,//隔行背景
            toolbar: "#toolbarTpl",
            defaultToolbar: ['filter'],
            contentType: 'application/json',
            cols: [[
                {filed: 'ID', title: 'ID', type: 'checkbox', width: '50', align: 'center'},
                {field: 'name', title: '姓名', width: '240', align: 'center'},
                {field: 'age', title: '年龄', width: '240', align: 'center'},
                {field: 'hobby', title: '喜好', width: '240', align: 'center'}
            ]],
            height: 'full-110',
        });
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
此时，再导出数据，就是更改后的数据。

总的来说，就是将修改后的数据备份，重新渲染一个新的表格，table.exportFile参数ID，指向这个表格。
————————————————
版权声明：本文为CSDN博主「jhadjahjhb」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_41996130/article/details/111476911