锐客网

  1. 首页 > 睿知 > it技术 > >

bootstrap导出table中数据

所需插件：tableExport.js
地址：https://github.com/hhurz/tableExport.jquery.plugin
同时还有个简版，不要混淆了（这两个版本对中文处理不好，建议用上面那款）
https://github.com/kayalshri/tableExport.jquery.plugin
https://github.com/golfing4ca/tableExport.jquery.plugin
1.导入js文件
2.增加引用
showExport: true,//是否显示导出
exportDataType: "basic",//basic', 'all', 'selected'.
3.实例：
$('#tb_departments').bootstrapTable({

url: '/abbs_docking/projectStatisticsQuery.do',//请求后台的URL（*）
method: 'get',//请求方式（*）
striped: true,//是否显示行间隔色
sortOrder: "asc",//排序方式
queryParams: oTableInit.queryParams,//传递参数（*）
sidePagination: "server",//分页方式：client客户端分页，server服务端分页（*）
pageNumber:1,//初始化加载第一页，默认第一页
pagination: true,
pageSize: 10,//每页的记录行数（*）
minimumCountColumns: 2,//最少允许的列数
uniqueId: "processId",//每一行的唯一标识，一般为主键列
height: 500,
cardView: false,//是否显示详细视图
detailView: true,//是否显示父子表
showExport: true,//是否显示导出
exportDataType: "basic",//basic', 'all', 'selected'.
columns: [{
field: 'processId',
title: '项目ID'
}, {
field: 'processName',
title: '项目名称'
},{
field: 'requester',
title: '上报人'
}, {
field: 'processStatistics',
title: '销售金额(元)'
}, {
field: 'processStartDate',
title: '上线时间'
}, {
field: 'click1',
align: 'center',
width: '6%',
title: '',
formatter:function(value,row,index){
return '业绩趋势'; }}, {field: 'click2',align: 'center',width: '6%',title: '',formatter:function(value,row,index){return '销售明细'; }},{field: 'click3',align: 'center',width: '6%',title: '',formatter:function(value,row,index){/* if (row.processStatus == '进行中'){return '关闭'; }else{return null; } */return null; }},{field: 'processInstId',title: '实例ID'},{field: 'processTempId',title: '模板ID'}, ],//注册加载子表的事件。注意下这里的三个参数！/* onExpandRow: function (index, row, $detail) {oTableInit.InitSubTable(index, row, $detail); } */});

4.也可选择性添加button点击事件来实现下载
onClick="$('#yourtableid').tableExport({type:'excel',escape:'false'})"
【bootstrap导出table中数据】5.测试效果，下载正常，中文显示正常

    推荐阅读


    上一篇：商道经略中的时、局、势

    下一篇：微服务架构的数据设计模式