表格展示利器 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('<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>');
  }

最终实现效果如下：

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文本中。展示效果如下（部分列数据我手动删除了）：

2.bootstrap table 数据行修改

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

   对于修改表格内容时的提示框样式，可修改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实例代码，希望对大家有所帮助