BootstrapTable怎么用

这篇文章将为大家详细讲解有关Bootstrap Table怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：网站制作、成都网站建设、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的高坪网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

1.Bootstrap Bable 全部数据导出分析

     在表格导出数据中，发现设置了分页参数，导出的数据仅为表格加载的分页参数数据，于是，针对这样的情况，通过设置分页参数的值，使表格可以加载更多的数据，可达到导出所有数据的功能需求。然而，在实际的实验中，发现此方案存在以下问题：

• 表格一次加载一千条数据时，网页响应速度太慢，加载数据等待时间严重过长。（一分钟左右）

• Bootsrtap Table 的文件导出是纯前端的js导出模式，它的数据源只能为表格中的数据集合

    分析产生上述问题的原因，不难发现，html页面在渲染的时候，一次渲染过多的节点，网页性能必然降低。而通过去分析table-export.js中的导出源码，发现导出文件是以表格为数据源，导出多数据时，必然需要表格加载更多的数据，所以这样的循环，导致导出功能在实际项目中，导出特别耗时，应用不理想。要解决这样的问题，目前可采用如下两种方法：

• 修改table-export.js中的导出模块源码，当ajax从后台请求到数据成功后，不在渲染数据到Bootstrap Table中去，而是直接作为数据源提供给导出模块。（目前这样的方案，感觉编写js函数需要的逻辑比较复杂）

• 前端调用java程序中，成熟的导出文件功能，利用java程序处理文件导出。

     本次测试文件导出时，采用了java后台程序处理的方案。具体操作如下：

前端界面仿造Bootstrap Table的js函数，编写一个导出所有文件的按钮利用java程序，调用SXSSFWorkbook组件，导出指定数据到Excel表中

构建导出按钮

     构建导出按钮，修改bootstrap-table.js中的定义事项，加入一个showExportAll参数，定义展示样式即可模拟一个导出按钮，重要实现代码如下：   

 //wanling add exportAll button 2017-8-7
  if (this.options.showExportAll) {
   html.push(sprintf('',
    this.options.formatExportAll()),
    sprintf('', this.options.iconsPrefix, this.options.icons.exportAll),
    '');
  }

最终实现效果如下：

java调用SXSSFWorkbook组件导出文件

     SXSSFWorkbook官网介绍 http://poi.apache.org/apidocs/org/apache/poi/xssf/streaming/SXSSFWorkbook.html。它是专门用来处理大量数据写入 Excel2007的工具。通过在java后台获取到数据后，传入数据，展示列等信息到SXSSFWorkbook中，即可完成数据写入到excel并以文件流的方式输出。核心调用代码如下：   

 @Override
 public Map perform(Map inMap) throws BizException, SysException {
  inMap.put("start", Integer.valueOf(0));
  inMap.put("limit", SysconfigHelper.getExportBatchSize());
  Map result = overTime.QueryAction(inMap);
  String exportFileName = "加班信息表";
  List resutList = (List) result.get(CommonAttribute.ROWS);
  List queryResultColumnNames = new ArrayList(Arrays.asList("createByDesc", "overTimeDate", "beginTime", "endTime", "overTimeHour", "checkPersonDesc", "overTimeStatus", "projectNameDesc", "overTimeAddressDesc", "eatMoney", "taxiMoney", "overTimeRemark"));
  List queryResultColumnFriendlyNames = new ArrayList(Arrays.asList("加班人", "加班日期", "加班开始时间", "加班结束时间", "加班小时", "审核人", "审核状态", "所属项目", "加班地点", "加班餐费", "加班车费", "备注"));
  //List queryResultColumnWidths = new ArrayList(Arrays.asList(65.00, 40.00, 100.00, 120.00, 65.00, 100.00, 65.00, 100.00));
  HttpServletResponse response = (HttpServletResponse) inMap.get("http_response");
  try {
   ExportToExcelHelper.ExportExcel(queryResultColumnNames,queryResultColumnFriendlyNames,resutList,false,exportFileName,response);
  } catch (IOException e) {
   e.printStackTrace();
  }
  return null;
 }
 protected static void exportExcel(List