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

最新推荐文章于 2025-02-20 16:25:01 发布

置顶

jhadjahjhb

最新推荐文章于 2025-02-20 16:25:01 发布

阅读量7.3k

点赞数 1

分类专栏： layui 文章标签： layui

本文链接：https://blog.youkuaiyun.com/qq_41996130/article/details/111476911

版权

该博客介绍了layui table.exportFile在不同场景下的使用，包括导出全部数据、选中数据及修改后数据的导出。在场景3中，由于table.exportFile导出的是原始数据，因此需要在数据修改后重新渲染备份表格，以确保导出新数据。解决方案是在done函数中处理并导出由exportDataTable保存的修改后数据。

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

layui table.exportFile 导出数据

最近遇到关于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>

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

{
  "code": 0,
  "data": [
    {
      "name": "张三",
      "age": 20,
      "hobby": "打篮球"
    },
    {
      "name": "李四",
      "age": 22,
      "hobby": "唱歌"
    },
    {
      "name": "王五",
      "age": 21,
      "hobby": "跳舞"
    }
  ]
}

场景1，导出全部数据

点击获取数据时，会请求json数据，渲染数据表格，定义如下变量

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

form.on('submit(requestPersonBtn)', function () {
        personDataTable = table.render({
            elem: '#requestDataTable',
            url: '../json/person.json', // json

最低0.47元/天解锁文章