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參數，定義展示樣式即可模擬一個導出按鈕，重要實現代碼如下：   

 //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+'" ',
      '>' + 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>&nbsp;";
      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怎么用”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。