官方文档的困惑

首先要说明的是：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> 添加</button><button class="layui-btn layui-btn-danger" id="batchDel"><i class="iconfont icon-shanchu"></i> 删除</button><button class="layui-btn layui-btn-warm" id="batchDisabled"><i class="iconfont icon-tingyong"></i> 锁定</button><button class="layui-btn layui-btn-normal" id="batchEnabled"><i class="iconfont icon-qiyong"></i> 解锁</button><button class="layui-btn" id="export"><i class="iconfont icon-export"></i> 导出</button><span>共有数据：<i id="countNum"></i> 条</span></okToolbar><!--数据表格--><table class="layui-hide" id="table1" lay-filter="tableFilter"></table>

注意：上面代码中“导出”按钮的id为“export”，表格的id为table1。

js代码：

<script>layui.use(['element', 'table', 'form', 'jquery', 'laydate','layer'], function () {var table = layui.table;         //表格var form = layui.form;           //表单var layer = layui.layer;         //弹层var $ = layui.jquery;var ins1=table.render({elem: '#table1',url: '/ant-admin/data/user.json',limit: 10,page:true,cols: [[{type: 'checkbox'},{field: 'id', title: 'ID',width:80, sort: true,align: 'center'},{field: 'username', title: '用户名', sort: true,align: 'center'},{field: 'status', title: '状态', templet: '#statusTpl',align: 'center'},{field: 'role', title: '角色类型', templet: '#roleTpl',sort: true,align: 'center'},{field: 'phone', title: '手机',align: 'center'},{field: 'createTime', title: '创建时间',align: 'center'},{field: 'lastLoginTime', title: '最近登录时间',align: 'center'},{field: 'logins', title: '登陆次数',sort: true,align: 'center',width:100},{fixed: 'right', title: '操作', align:'center', minWidth:160,toolbar: '#barDemo'}]],done: function (res, curr, count) {exportData=res.data;}});$("#export").click(function(){table.exportFile(ins1.config.id,exportData, 'xls');})})
</script>

要点：
1、在表格渲染完成后的回调函数中，定义一个全局变量exportData，让它取得表格中的数据集合。就是下面这行

exportData=res.data;

2、在导出数据时将变量exportData作为data变量传给table.exportFile(id, data, type) 函数。这样就大功告成了，怎么样，是不是很简单！

3、需要说明的是：table.exportFile函数的第三个参数type默认是导出csv格式文件，要导出xls文件的话，把它设置成‘xls’就可以了。

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

Word文档表格中插入图片无法完整显示解决办法
如上图所示,Word文档表格中插入图片却只显示很窄一条边解决办法:选中图片,菜单栏上点击段落右方小箭头扩展项选择单倍行距,即可完整显示图片
数据备份中可能出错的情况及解决办法
作者:gaoyuan 来源:赛迪网技术社区发布时间:2007.03.06 本文总结了数据库备份过程中所有可能出错的情况,大家可以参考以下. 如果你做DBA时间不长,对数据库的备份有些担心,希望能找到 ...
获取layui表格单元格的数据_Layui数据表格之获取表格中所有的数据方法
数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的JS对象数组用来保存数据表格中的原 ...
laytpl遍历实体列表_Layui数据表格之获取表格中所有的数据方法
数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的js对象数组用来保存数据表格中的原 ...
layui数据表格中展示图片及图片预览
在项目中遇到数据表格中放入图片同时可以点击放大预览.预览方式我才用的是layer方式.代码如下: layui.use('table', function(){var table = layui.tab ...
layui一个表格中怎么接两个接口的值_layer学习笔记之table表格引入数据实现分页...
LayUI是一款免费,开源,轻量级的前端cms框架,适用于企业后端,能快速上手开发,集成了常用的组件,还有完善的文档和社区. 最近一直在学习使用layer的layui框架技术,这个主要表现在于弹出层的 ...
layui单元格鼠标样式_Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法...
如下所示: var tableIns = window.demoTable = table .render({ elem : '#idTest', id : 'idTest', url : '/par ...
oracle 数据导出 excel 自动分多个文件,从oracle数据库中导出大量数据到excel中为什么自动分成了好几个excel文件《excel表格新手入门》...
EXCEL中一个单元格中多行文本如何导入或复制到SQL SERVER 数据库表中? 保留换行符保存进数据表啊,读取出来显示的时候根据需要进行转换就行了,比如要在网页上显示,可以把换行符转换成HTML的 ...
layui修改table中的按钮_layui数据表格中如何设置按钮切换（是否置顶）与分页居中...
手记1 一.数据表格中按钮切换(置顶与取消) 在layUI数据表格中是可以使用toolbar设置表格内的按钮使用laytel语法置顶 {{# if(d.order>0){ }} 取消 {{ ...

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

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

官方文档的困惑

解决办法

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

最新文章

热门文章