表格展示利器 Bootstrap Table實(shí)例代碼

來源：懂視網(wǎng) 責(zé)編：小采時間：2020-11-27 22:31:11

表格展示利器 Bootstrap Table實(shí)例代碼

表格展示利器 Bootstrap Table實(shí)例代碼:1.Bootstrap Bable 全部數(shù)據(jù)導(dǎo)出分析在表格導(dǎo)出數(shù)據(jù)中，發(fā)現(xiàn)設(shè)置了分頁參數(shù)，導(dǎo)出的數(shù)據(jù)僅為表格加載的分頁參數(shù)數(shù)據(jù)，于是，針對這樣的情況，通過設(shè)置分頁參數(shù)的值，使表格可以加載更多的數(shù)據(jù)，可達(dá)到導(dǎo)出所有數(shù)據(jù)的功能需求。然而，在實(shí)際的實(shí)驗(yàn)中，發(fā)現(xiàn)此

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀表格展示利器 Bootstrap Table實(shí)例代碼:1.Bootstrap Bable 全部數(shù)據(jù)導(dǎo)出分析在表格導(dǎo)出數(shù)據(jù)中，發(fā)現(xiàn)設(shè)置了分頁參數(shù)，導(dǎo)出的數(shù)據(jù)僅為表格加載的分頁參數(shù)數(shù)據(jù)，于是，針對這樣的情況，通過設(shè)置分頁參數(shù)的值，使表格可以加載更多的數(shù)據(jù)，可達(dá)到導(dǎo)出所有數(shù)據(jù)的功能需求。然而，在實(shí)際的實(shí)驗(yàn)中，發(fā)現(xiàn)此

1.Bootstrap Bable 全部數(shù)據(jù)導(dǎo)出分析

在表格導(dǎo)出數(shù)據(jù)中，發(fā)現(xiàn)設(shè)置了分頁參數(shù)，導(dǎo)出的數(shù)據(jù)僅為表格加載的分頁參數(shù)數(shù)據(jù)，于是，針對這樣的情況，通過設(shè)置分頁參數(shù)的值，使表格可以加載更多的數(shù)據(jù)，可達(dá)到導(dǎo)出所有數(shù)據(jù)的功能需求。然而，在實(shí)際的實(shí)驗(yàn)中，發(fā)現(xiàn)此方案存在以下問題：

表格一次加載一千條數(shù)據(jù)時，網(wǎng)頁響應(yīng)速度太慢，加載數(shù)據(jù)等待時間嚴(yán)重過長。（一分鐘左右）

Bootsrtap Table 的文件導(dǎo)出是純前端的js導(dǎo)出模式，它的數(shù)據(jù)源只能為表格中的數(shù)據(jù)集合

分析產(chǎn)生上述問題的原因，不難發(fā)現(xiàn)，html頁面在渲染的時候，一次渲染過多的節(jié)點(diǎn)，網(wǎng)頁性能必然降低。而通過去分析table-export.js中的導(dǎo)出源碼，發(fā)現(xiàn)導(dǎo)出文件是以表格為數(shù)據(jù)源，導(dǎo)出多數(shù)據(jù)時，必然需要表格加載更多的數(shù)據(jù)，所以這樣的循環(huán)，導(dǎo)致導(dǎo)出功能在實(shí)際項(xiàng)目中，導(dǎo)出特別耗時，應(yīng)用不理想。要解決這樣的問題，目前可采用如下兩種方法：

修改table-export.js中的導(dǎo)出模塊源碼，當(dāng)ajax從后臺請求到數(shù)據(jù)成功后，不在渲染數(shù)據(jù)到Bootstrap Table中去，而是直接作為數(shù)據(jù)源提供給導(dǎo)出模塊。（目前這樣的方案，感覺編寫js函數(shù)需要的邏輯比較復(fù)雜）

前端調(diào)用java程序中，成熟的導(dǎo)出文件功能，利用java程序處理文件導(dǎo)出。

本次測試文件導(dǎo)出時，采用了java后臺程序處理的方案。具體操作如下：

前端界面仿造Bootstrap Table的js函數(shù)，編寫一個導(dǎo)出所有文件的按鈕利用java程序，調(diào)用SXSSFWorkbook組件，導(dǎo)出指定數(shù)據(jù)到Excel表中

構(gòu)建導(dǎo)出按鈕

構(gòu)建導(dǎo)出按鈕，修改bootstrap-table.js中的定義事項(xiàng)，加入一個showExportAll參數(shù)，定義展示樣式即可模擬一個導(dǎo)出按鈕，重要實(shí)現(xiàn)代碼如下：

 //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>');
 }

最終實(shí)現(xiàn)效果如下：

java調(diào)用SXSSFWorkbook組件導(dǎo)出文件

SXSSFWorkbook官網(wǎng)介紹 http://poi.apache.org/apidocs/org/apache/poi/xssf/streaming/SXSSFWorkbook.html。它是專門用來處理大量數(shù)據(jù)寫入 Excel2007的工具。通過在java后臺獲取到數(shù)據(jù)后，傳入數(shù)據(jù)，展示列等信息到SXSSFWorkbook中，即可完成數(shù)據(jù)寫入到excel并以文件流的方式輸出。核心調(diào)用代碼如下：

 @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("加班人", "加班日期", "加班開始時間", "加班結(jié)束時間", "加班小時", "審核人", "審核狀態(tài)", "所屬項(xiàng)目", "加班地點(diǎn)", "加班餐費(fèi)", "加班車費(fèi)", "備注"));
 //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();
 }

導(dǎo)出數(shù)據(jù)效果

通過前端自定義的按鈕，調(diào)用后臺的導(dǎo)出文件action,即可導(dǎo)出數(shù)據(jù)到excel文本中。展示效果如下（部分列數(shù)據(jù)我手動刪除了）：

2.bootstrap table 數(shù)據(jù)行修改

通過調(diào)用Bootstrap Table的擴(kuò)展js(bootstrap-table-editable.js,bootstrap-editable.js)可設(shè)置編輯表格行內(nèi)數(shù)據(jù)。前端設(shè)置編輯表格數(shù)據(jù)，界面展示效果如下：

對于修改表格內(nèi)容時的提示框樣式，可修改bootstrap-table-editable.js中的源碼處理noeditFormatter函數(shù)，修改樣式參考代碼如下：

 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;
 }

前端頁面調(diào)用時，參考代碼如下：

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, //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個屬性（*）
 pagination: true, //是否顯示分頁（*）
 sortable: true, //是否啟用排序
 sortOrder: "asc", //排序方式
 sidePagination: "server", //分頁方式：client客戶端分頁，server服務(wù)端分頁（*）
 pageNumber: 1, //初始化加載第一頁，默認(rèn)第一頁
 pageSize: 20, //每頁的記錄行數(shù)（*）
 pageList: [10, 20, 25, 30], //可供選擇的每頁的行數(shù)（*）
 //search: true, //是否顯示表格搜索，此搜索是客戶端搜索，不會進(jìn)服務(wù)端，所以，個人感覺意義不大
 strictSearch: true,
 singleSelect:false,
 showColumns: true, //是否顯示所有的列
 showToggle:true, //是否顯示詳細(xì)視圖和列表視圖的切換按鈕
 //showRefresh: false, //是否顯示刷新按鈕
 minimumCountColumns: 1, //最少允許的列數(shù)
 //clickToSelect: true, //是否啟用點(diǎn)擊選中行
 cardView: false, //是否顯示詳細(xì)視圖
 detailView: false, //是否顯示父子表
 showHeader: true,
 onEditableSave: function (field, row, oldValue, $el) {
 //單行數(shù)據(jù)修改后，保存到后臺
 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: "加班結(jié)束時間"
 },
 {
 align: "left",
 halign: "left",
 field: "overTimeHour",
 sortable:true,
 title: "加班小時"
 },
 {
 align: "left",
 halign: "left",
 field: "overTimeStatus",
 title: "審核狀態(tài)",
 editable: {
 type: 'select',
 title: "審核狀態(tài)",
 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: "所屬項(xiàng)目"
 },
 {
 align: "left",
 halign: "left",
 field: "overTimeAddressDesc",
 sortable:true,
 title: "加班地點(diǎn)"
 },
 {
 align: "left",
 halign: "left",
 field: "eatMoney",
 sortable:true,
 title: "加班餐費(fèi)"
 },
 {
 align: "left",
 halign: "left",
 field: "taxiMoney",
 sortable:true,
 title: "加班車費(fèi)"
 },
 {
 align: "left",
 halign: "left",
 field: "overTimeRemark",
 title: "備注"
 }
 ],
 onPageChange:function(number, size)
 {
 //設(shè)置在分頁事件觸發(fā)時，傳遞分頁參數(shù)給后臺，重新加載數(shù)據(jù)
 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 () {
 //加載后臺數(shù)據(jù)
 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("數(shù)據(jù)加載失敗");
 }, true, true);
 }

總結(jié)

以上所述是小編給大家介紹的表格展示利器 Bootstrap Table實(shí)例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com