layui数据表格中导出所有数据的简易解决办法

layui数据表格中导出所有数据的简易解决办法

官方文档的困惑

首先要说明的是:layui在 table 的工具栏内置了数据导出按钮,如果你是用它内置的导出按钮来导出数据,是没有问题的。但内置的按钮毕竟不太美观,很多时候你可能想通过自己定义的按钮来导出数据,这个时候,我们去参考官方文档,会发现,官方的介绍是非常模糊不清的,请看官方的介绍:
语法:table.exportFile(id, data, type)
代码示例:

var ins1 = table.render({
  elem: '#demo'
  ,id: 'test'
  //,…… //其它参数
})      
      
//将上述表格示例导出为 csv 文件
table.exportFile(ins1.config.id, data); //data 为该实例中的任意数量的数据

绝大多数盆友被这个data变量弄懵逼了,如果直接用它,浏览器会无情的提示:“Uncaught ReferenceError: data is not defined”。
其实,官方例子中的这个data变量,应该是表格数据的集合,但是,官方没说清楚这个data数据要从哪里来,以致于很多小伙伴被弄得一头雾水。

解决办法

先看前端界面
在这里插入图片描述
例如,我要通过单击上图中的“导出”按钮来导出表格中的所有数据,那么我们在html文件中的代码可以像下面这样写:

<!--工具栏-->
    <okToolbar>
        <button class="layui-btn" id="addUser">
            <i class="iconfont icon-tianjiayonghu1" ></i> 添加
评论 42
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值