新的表格展示利器 Bootstrap Table Ⅱ

  上一篇文章介绍了Bootstrap Table的基本知识点和应用,本文针对上一篇文章中未解决的文件导出问题进行分析,同时介绍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参数,定义展示样式即可模拟一个导出按钮,重要实现代码如下:

复制代码
 1    //wanling add exportAll button 2017-8-7 2         if (this.options.showExportAll) {  3             html.push(sprintf('<button class="btn' + 4                     sprintf(' btn-%s', this.options.buttonsClass) + 5                     sprintf(' btn-%s', this.options.iconSize) + 6                     '" type="button" name="exportAll" aria-label="exportAll" title="%s">',  7                 this.options.formatExportAll()),  8                 sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.exportAll),  9                 '</button>'); 10         }
复制代码

     最终实现效果如下:

java调用SXSSFWorkbook组件导出文件

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

复制代码
 1 @Override  2     public Map perform(Map inMap) throws BizException, SysException {  3         inMap.put("start", Integer.valueOf(0));  4         inMap.put("limit", SysconfigHelper.getExportBatchSize());  5         Map result = overTime.QueryAction(inMap);  6         String exportFileName = "加班信息表";  7         List resutList = (List) result.get(CommonAttribute.ROWS);  8         List queryResultColumnNames = new ArrayList(Arrays.asList("createByDesc", "overTimeDate", "beginTime", "endTime", "overTimeHour", "checkPersonDesc", "overTimeStatus", "projectNameDesc", "overTimeAddressDesc", "eatMoney", "taxiMoney", "overTimeRemark"));  9         List queryResultColumnFriendlyNames = new ArrayList(Arrays.asList("加班人", "加班日期", "加班开始时间", "加班结束时间", "加班小时", "审核人", "审核状态", "所属项目", "加班地点", "加班餐费", "加班车费", "备注")); 10         //List<Double> queryResultColumnWidths = new ArrayList(Arrays.asList(65.00, 40.00, 100.00, 120.00, 65.00, 100.00, 65.00, 100.00));11         HttpServletResponse response = (HttpServletResponse) inMap.get("http_response"); 12         try { 13             ExportToExcelHelper.ExportExcel(queryResultColumnNames,queryResultColumnFriendlyNames,resutList,false,exportFileName,response); 14

                    
                
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信