表格展示利器 Bootstrap Table实例代码


Posted in Javascript onSeptember 06, 2017

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('<button class="btn' +
     sprintf(' btn-%s', this.options.buttonsClass) +
     sprintf(' btn-%s', this.options.iconSize) +
     '" type="button" name="exportAll" aria-label="exportAll" title="%s">',
    this.options.formatExportAll()),
    sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.exportAll),
    '</button>');
  }

最终实现效果如下:

表格展示利器 Bootstrap Table实例代码

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<Double> 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<Object> columnFriendlyNameList, List<Object> columnList, List<Double> columnWidths, Map inMap, OutputStream outputStream, boolean... hideSEQ) {
  boolean hideSeq = hideSEQ.length == 1 && hideSEQ[0];
  SXSSFWorkbook workbook = new SXSSFWorkbook(5000);
  Sheet sheet = workbook.createSheet("sheet1");
  initCellStyle(workbook);
  setHeaderLine(sheet, columnFriendlyNameList, hideSeq);
  setDataLine(sheet, columnList, inMap, hideSeq);
  setColumnWidth(sheet, columnWidths);
  outputWorkBook(workbook, outputStream);
  resetTimeStyleStr();
 }

导出数据效果

   通过前端自定义的按钮,调用后台的导出文件action,即可导出数据到excel文本中。展示效果如下(部分列数据我手动删除了):

表格展示利器 Bootstrap Table实例代码

2.bootstrap table 数据行修改

   通过调用Bootstrap Table的扩展js(bootstrap-table-editable.js,bootstrap-editable.js)可设置编辑表格行内数据。前端设置编辑表格数据,界面展示效果如下:

表格展示利器 Bootstrap Table实例代码

   对于修改表格内容时的提示框样式,可修改bootstrap-table-editable.js中的源码处理noeditFormatter函数,修改样式参考代码如下:

var _dont_edit_formatter = false;
    if (column.editable.hasOwnProperty('noeditFormatter')) {
     var process = column.editable.noeditFormatter(value, row, index);
     if(!process.hasOwnProperty('class')){
      process.class = '';
     }
     if(!process.hasOwnProperty('style')){
      process.style = 'color:#000;text-decoration:none;';
     }
     _dont_edit_formatter = ['<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" ',
      ' data-name="'+process.filed+'"',
      ' data-pk="' + row[that.options.idField] + '"',
      ' data-value="' + process.value + '"',
      ' class="'+process.class+'" style="'+process.style+'"',
      '>' + process.value + '</a>'
     ].join('');
    }

    if (_dont_edit_formatter === false) {
     return ['<a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" ',
      ' data-name="' + column.field + '"',
      ' data-pk="' + row[that.options.idField] + '"',
      ' data-value="' + result + '"',
      editableDataMarkup.join(''),
      '>' + value + '</a>'
     ].join('');
    } else {
     return _dont_edit_formatter;
    }

前端页面调用时,参考代码如下:

loadCharts: function () {
  var me = this;
  var tb_departments = me.getCmp("overtimeTable").bootstrapTable({
   method: 'post',      //请求方式(*)
   height: MP.Const.dataGridHeight,
   toolbar: '#checkovertimeinfo_toolbar',    //工具按钮用哪个容器
   striped: true,      //是否显示行间隔色
   cache: false,      //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
   pagination: true,     //是否显示分页(*)
   sortable: true,      //是否启用排序
   sortOrder: "asc",     //排序方式
   sidePagination: "server",   //分页方式:client客户端分页,server服务端分页(*)
   pageNumber: 1,      //初始化加载第一页,默认第一页
   pageSize: 20,      //每页的记录行数(*)
   pageList: [10, 20, 25, 30],  //可供选择的每页的行数(*)
   //search: true,      //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
   strictSearch: true,
   singleSelect:false,
   showColumns: true,     //是否显示所有的列
   showToggle:true,     //是否显示详细视图和列表视图的切换按钮
   //showRefresh: false,     //是否显示刷新按钮
   minimumCountColumns: 1,    //最少允许的列数
   //clickToSelect: true,    //是否启用点击选中行
   cardView: false,     //是否显示详细视图
   detailView: false,     //是否显示父子表
   showHeader: true,
   onEditableSave: function (field, row, oldValue, $el) {
    //单行数据修改后,保存到后台
    var param={};
    var listUuid=[];
    listUuid[0]=row.uuid;
    param.listUuid=listUuid;
    param.overTimeStatus=row.overTimeStatus;
    MP.doAction("sccq-overtime-update", param, function(data)
    {
     if(data.success)
     {
      MP.Msg.info('审核操作完成');
     }
     me.ajaxGetData();

    },null, true, true);

   },
   columns: [
    {
     title: "全选",
     field: "select",
     checkbox: true,
     align: "left",//水平居中
     halign: "left",//垂直居中
    }, {
     field: "uuid",
     align: 'center',
     title: "个人分析",
     formatter: function (value) {
      var html = "<a class='easyui-linkbutton l-btn l-btn-small l-btn-plain' name='" + value + "'>" +
       "<span class='l-btn-left l-btn-icon-left'><span class='l-btn-icon icon-search'></span><span class='l-btn-text'>查看</span></span></a> ";
      return html;
     }
    }, {
     align: "left",//水平居中
     halign: "left",//垂直居中
     field: "createByDesc",
     title: "加班人"
    },{
     align: "left",
     halign: "left",
     field: "overTimeDate",
     sortable:true,
     title: "加班日期",
     formatter: function (value) {
      return MP.dateFormatter(value);
     }
    },
    {
     align: "left",
     halign: "left",
     field: "beginTime",
     title: "加班开始时间"
    },
    {
     align: "left",
     halign: "left",
     field: "endTime",
     title: "加班结束时间"
    },
    {
     align: "left",
     halign: "left",
     field: "overTimeHour",
     sortable:true,
     title: "加班小时"
    },
    {
     align: "left",
     halign: "left",
     field: "overTimeStatus",
     title: "审核状态",
     editable: {
      type: 'select',
      title: "审核状态",
      pk: 1,
      source: [
       {value: 2, text: '审核通过'},
       {value: 3, text: '驳回'}
      ],
      noeditFormatter: function (value,row,index) {
       var result;
       if (value == '1' || value == '待审核') {
        result={filed:"overTimeStatus",value:"待审核",class:"badge bg-orange",style:"padding:5px 10px;"};
       } else if (value == '2' || value == '审核通过'){
        result={filed:"overTimeStatus",value:"审核通过",class:"badge bg-green",style:"padding:5px 10px;"};
       }
       else if (value == '3' || value == '驳回'){
        result={filed:"overTimeStatus",value:"驳回",class:"badge bg-red",style:"padding:5px 10px;"};
       }
       return result;
      }
     }
    },
    {
     align: "left",
     halign: "left",
     field: "projectNameDesc",
     sortable:true,
     title: "所属项目"
    },
    {
     align: "left",
     halign: "left",
     field: "overTimeAddressDesc",
     sortable:true,
     title: "加班地点"
    },
    {
     align: "left",
     halign: "left",
     field: "eatMoney",
     sortable:true,
     title: "加班餐费"
    },
    {
     align: "left",
     halign: "left",
     field: "taxiMoney",
     sortable:true,
     title: "加班车费"
    },
    {
     align: "left",
     halign: "left",
     field: "overTimeRemark",
     title: "备注"
    }
   ],
   onPageChange:function(number, size)
   {
    //设置在分页事件触发时,传递分页参数给后台,重新加载数据
    me.queryBaseParam.limit=size;
    me.queryBaseParam.start=number;
    me.ajaxGetData();
   },
   onSort: function (name, order) {
    me.queryBaseParam.sort=name;
    me.queryBaseParam.order=order;
    me.ajaxGetData();
   },
   onClickRow: function (row, $elepment, field) {
    if (field == 'uuid') {
     //alert("查看页面");
     var params={};
     params.createBy=row.createBy;
     params.createByDesc=row.createByDesc;
     me.controller.showOvertimeSingleDetail(params);
    }
   }
  });
 },
 ajaxGetData: function () {
  //加载后台数据
  var me=this;
  var params=MP.getFormData("searchOverTimeForm_person",this.controller);
  params.QueryType=1;
  params.limit= me.queryBaseParam.limit;
  params.start= me.queryBaseParam.start;
  params.sort= me.queryBaseParam.sort;
  params.order= me.queryBaseParam.order;
  MP.doAction("sccq-overtime-query", params, function (datas) {
   if (datas.success) {
    me.getCmp("overtimeTable").bootstrapTable('load', datas);
   }
  }, function (datas) {
   alert("数据加载失败");
  }, true, true);
 }

总结

以上所述是小编给大家介绍的表格展示利器 Bootstrap Table实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
jquery时间下拉框小例子
Apr 15 Javascript
textarea 控制输入字符字节数(示例代码)
Dec 27 Javascript
jQuery实现异步获取json数据的2种方式
Aug 29 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
Jan 10 Javascript
JavaScript实现向select下拉框中添加和删除元素的方法
Mar 07 Javascript
微信小程序实现移动端滑动分页效果(ajax)
Jun 13 Javascript
基于复选框demo(分享)
Sep 27 Javascript
JS实现百度网盘任意文件强制下载功能
Aug 31 Javascript
jQuery扩展方法实现Form表单与Json互相转换的实例代码
Sep 05 jQuery
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 Javascript
javascript如何用递归写一个简单的树形结构示例
Sep 06 #Javascript
jquery实现用户登陆界面(示例讲解)
Sep 06 #jQuery
详谈js原型继承的一些问题
Sep 06 #Javascript
浅谈react.js中实现tab吸顶效果的问题
Sep 06 #Javascript
vue组件初学_弹射小球(实例讲解)
Sep 06 #Javascript
node.js-v6新版安装具体步骤(分享)
Sep 06 #Javascript
Angular2里获取(input file)上传文件的内容的方法
Sep 05 #Javascript
You might like
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
php实现文件下载更能介绍
2012/11/23 PHP
解析PHP多种序列化与反序列化的方法
2013/06/06 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
php查找字符串中第一个非0的位置截取
2017/02/27 PHP
js中top/parent/frame概述及案例应用
2013/02/06 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
cookie的secure属性详解
2015/04/08 Javascript
jquery使用经验小结
2015/05/20 Javascript
jQuery ajax时间差导致的变量赋值问题分析
2016/01/22 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
JS实现隔行换色的表格排序
2017/03/27 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
vue spa应用中的路由缓存问题与解决方案
2019/05/31 Javascript
jQuery实现简易QQ聊天框
2020/02/10 jQuery
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
Python实现监控Nginx配置文件的不同并发送邮件报警功能示例
2019/02/26 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
python 整数越界问题详解
2019/06/27 Python
解决Python中回文数和质数的问题
2019/11/24 Python
python requests模拟登陆github的实现方法
2019/12/26 Python
python 弧度与角度互转实例
2020/04/15 Python
Python如何实现远程方法调用
2020/08/07 Python
selenium自动化测试入门实战
2020/12/21 Python
抽象类和接口的区别
2012/09/19 面试题
校领导推荐信
2013/11/01 职场文书
毕业学生推荐信
2013/12/01 职场文书
英语自我评价范文
2014/01/24 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
音乐幼师求职信
2014/07/09 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
邀请函模板
2015/02/02 职场文书
2015年控辍保学工作总结
2015/05/18 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
导游词之蜀山胜景瓦屋山
2019/11/29 职场文书