原文地址:
http://www.5ixiudou.com/portal/detailInfo/1000000005/228
受备案影响,原网页可先访问:http://106.12.198.137:8080/portal-web/portal/detailInfo/1000000005/228
一、问题描述:
1.在工作中,人们比较喜欢用 bootstrapTable 进行数据的展示,而且有导出数据到excel中的需求。
2.bootstrapTable导出数据可以使用 Table Export 插件。https://www.cnblogs.com/evilliu/articles/6424237.html,主要引入两个文件:bootstrap-table-export.js 和 tableExport.js。但是这个导出是有问题的,只能导出当前页的数据,不能导出查询出来的数据的全部页的数据。关于这个问题,网上有一些解决方案,比如设置 exportDataType:'all',也是不能导出全部数据的。
二、方案选择
对于 bootstrapTable,如果想要导出全部数据的话,有两种方案:
1.前台分页过程中,添加"ALL"的分页,然后前台加载全部数据到当前页中,然后导出当前页的数据。
2.将导出的过程放到后台去执行,前台只用传递查询条件、excel 表头信息到后台,由后台去查询、拼装、导出即可。
对于方案1,首先前台加载大量数据的话,渲染会非常慢,甚至僵死超时,更不用说导出还要消耗更长的时间,所以该方案不合适。
对于方案2,前台不用做特殊操作,将导出的业务过程放到后台,不会对前台的信息展示产生任何影响,可行性高。
最终选择方案2.
三、方案执行过程(亲测可用)
1.所需资源文件:
资源文件下载:
http://www.5ixiudou.com/portal/detailInfo/1000000005/228
注意:要使用新版本的bootstrap-table.js文件。
2.核心代码:
js 部分:
//导出全部查询数据
function exportExcelForAll(){
var formData = {
startDateStr:$("#startDate").val(),
endDateStr:$("#endDate").val(),
};
//导出所有数据
$.exportAllData4BootstrapTable({
tableId: "ivrRecord_table",
fileName: "全部数据导出",
sheetName: "全部数据导出",
url: $.basePath + "/demo/exportAllData.htm",
queryParam: formData
});
}
//初始化 bootstrapTable
$('#demo_table').bootstrapTable({
toolbar: "#u_tableToolbar",
url:'${basePath}/demo/getDemoDataJson.json',
queryParams:function (params) {
var searchText=params.search;
if(searchText==undefined){
searchText="";
}
return {
limit: params.limit,
offset: params.offset,
startDateStr:$("#startDate").val(),
endDateStr:$("#endDate").val(),
};
},
contentType:"application/x-www-form-urlencoded; charset=UTF-8",
sortable: false,
search: true, //是否显示表格搜索,此搜索是客户端搜索,不会进服务端
// searchOnEnterKey: true, //回车查询
strictSearch: true, //设置为 true启用 全匹配搜索,否则为模糊搜索
showColumns: true, //是否显示所有的列
showRefresh: true, //是否显示刷新按钮
method: 'POST',
striped: true,
sidePagination: "server",
pagination:true,
pageNumber:1,
pageSize: 10,
pageList: [10, 25, 50, 100,200,500,1000,2000,3000, 'ALL'],
columns: [
{title: '${getCodeDesc('VIEWS.IVR','CALL_SERIAL_LOCAL','标志号')}', field: 'pid', align: 'center', valign: 'middle',sortable: true,width:'170px'},
{title: '${getCodeDesc('VIEWS.MODEL','START_DATE_LOCAL','接入时间')}', field: 'beginTime', align: 'center', valign: 'middle', sortable: true,width:'140px',formatter:formatDate},
{title: '${getCodeDesc('VIEWS.MODEL','END_DATE_LOCAL','挂断时间')}', field: 'endTime', align: 'center', valign: 'middle', sortable: true,width:'140px',visible:false,formatter:formatDate},
]
});
html部分:
后台部分:
/**
* 导出全部查询数据
*/
@RequestMapping(value = "/exportAllData.htm", method = {RequestMethod.POST})
public void exportAllData(String startDateStr ,String endDateStr, HttpServletRequest request, HttpServletResponse response,String cols, String fileName, String sheetName) throws Exception {
//防止中文乱码问题
cols = URLDecoder.decode(cols, "utf-8");
fileName = URLDecoder.decode(fileName, "utf-8");
sheetName = URLDecoder.decode(sheetName, "utf-8");
//根据前台传递过来的查询条件查询所有的数据
//根据自己的业务需要进行查询,只要获取最后的数list
DataDemoModel model = new DataDemoModel();
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
List
if(!StringUtil.isEmpty(startDateStr)){
model.setStartDate(sdf.parse(startDateStr));
}
if(!StringUtil.isEmpty(endDateStr)){
model.setEndDate(sdf.parse(endDateStr));
}
list = demoService.findAllDataByCondition(model);
//根据获取的数据导出到文件中
ExcelTemplate excel = new ExcelTemplate();
excel.setFileName(fileName).createNewSheet(sheetName);
//设置标题数据和表格数据
excel.addTitleList(new ColumnData(cols)).addGridList(list);
excel.writeExcel(response);
}
3.关键部分:
用到了后台导出excel模板插件 ExcelTemplate,需要向模板中传递文件名称 fileName ,sheet页名称 sheetName,excel标题信息 cols,数据list。
更多内容请关注我的个人网站:http://www.5ixiudou.com,大家共同学习,共同进步。