表格展示利器 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 相关文章推荐
使用JavaScript 编写简单计算器
Nov 24 Javascript
JavaScript制作windows经典扫雷小游戏
Mar 31 Javascript
详解JavaScript中getFullYear()方法的使用
Jun 10 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
angular2中router路由跳转navigate的使用与刷新页面问题详解
May 07 Javascript
JavaScript的数据类型转换原则(干货)
Mar 15 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
学前端,css与javascript重难点浅析
Jun 11 Javascript
vue3.0 加载json的方法(非ajax)
Oct 26 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
介绍几个array库的新函数 php
2006/12/29 PHP
在smarty模板中使用PHP函数的方法
2011/04/23 PHP
yii框架表单模型使用及以数组形式提交表单数据示例
2014/04/30 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
JS实现的省份级联实例代码
2013/06/24 Javascript
JS图片切换的具体方法(带缩略图版)
2013/11/12 Javascript
将HTML格式的String转化为HTMLElement的实现方法
2014/08/07 Javascript
jquery动态分页效果堪比时光网
2014/09/25 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
JS实现来回出现文字的状态栏特效代码
2015/10/31 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
AngularJS获取json数据的方法详解
2017/05/27 Javascript
angular动态删除ng-repaeat添加的dom节点的方法
2017/07/20 Javascript
利用vue+elementUI实现部分引入组件的方法详解
2017/11/22 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
微信小程序websocket聊天室的实现示例代码
2019/02/12 Javascript
详解Vue demo实现商品列表的展示
2019/05/07 Javascript
JavaScript字符串转数字的简单实现方法
2020/11/27 Javascript
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
Python中的测试模块unittest和doctest的使用教程
2015/04/14 Python
django实现用户登陆功能详解
2017/12/11 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
浅谈Python的条件判断语句if/else语句
2019/03/21 Python
python抓取需要扫微信登陆页面
2019/04/29 Python
Python实现京东秒杀功能代码
2019/05/16 Python
小白教你PyCharm从下载到安装再到科学使用PyCharm2020最新激活码
2020/09/25 Python
python 元组和列表的区别
2020/12/30 Python
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
初婚未育未抱养证明
2014/01/12 职场文书
自荐书范文范例
2014/02/13 职场文书
正风肃纪剖析材料
2014/09/30 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
大学生奖学金获奖感言(范文)
2019/08/15 职场文书
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python