1.Bootstrap Bable 全部數據導出分析
在表格導出數據中，發現設置了分頁參數，導出的數據僅為表格加載的分頁參數數據，于是，針對這樣的情況，通過設置分頁參數的值，使表格可以加載更多的數據，可達到導出所有數據的功能需求。然而，在實際的實驗中，發現此方案存在以下問題：
分析產生上述問題的原因，不難發現，html頁面在渲染的時候，一次渲染過多的節點，網頁性能必然降低。而通過去分析table-export.js中的導出源碼，發現導出文件是以表格為數據源，導出多數據時，必然需要表格加載更多的數據，所以這樣的循環，導致導出功能在實際項目中，導出特別耗時，應用不理想。要解決這樣的問題，目前可采用如下兩種方法：
本次測試文件導出時，采用了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實例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
