JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】
bootstrap table系列：
JS表格組件神器bootstrap table詳解（基礎(chǔ)版）
JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】
JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調(diào)序】
Bootstrap Table是輕量級的和功能豐富的以表格的形式顯示的數(shù)據(jù)，支持單選，復選框，排序，分頁,顯示/隱藏列,固定標題滾動表,響應(yīng)式設(shè)計，Ajax加載JSON數(shù)據(jù)，點擊排序的列，卡片視圖等。那么本文給大家介紹JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】，一起學習吧！
一、效果展示
1、表格行樣式
比如我們有一個顯示訂單頁面的需求，不同狀態(tài)的訂單顯示不同的顏色，如圖：
2、表格行內(nèi)編輯
第一篇的時候有園友就問過博主是否可以支持行內(nèi)編輯的效果，答案是肯定的。我們先來看看效果：
編輯前
點擊某個單元格數(shù)據(jù)
編輯后完成后
3、表格行列合并
關(guān)于行列合并的需求博主覺得是非常常見的，尤其是做頁面報表的時候需要用到。先來看看效果：
當前頁顯示不全，點擊進入看看。怎么樣？效果還不錯吧。
4、表格數(shù)據(jù)導出
關(guān)于表格數(shù)據(jù)導出，bootstrap table支持三種模式的導出：basic、all、selected。也就是當前頁數(shù)據(jù)導出、所有數(shù)據(jù)導出、選中數(shù)據(jù)導出。并且支持導出多種類型的文件，比如常見的excel、xml、json等格式。
導出當前頁到excel
導出表格所有數(shù)據(jù)
導出選中行數(shù)據(jù)
至于其他類型的文件的導出，和excel基本相同，就不做效果展示了。
二、表格行樣式代碼示例
關(guān)于表格行的樣式設(shè)置，其他是它一個最基礎(chǔ)的功能，為什么要把它放在第三篇？是因為博主覺得這功能可能到處都用得著。當然，效果并不難，自己用jQuery設(shè)置tr的背景色也可以實現(xiàn)，但是博主覺得，既然bootstrap table提供了機制設(shè)置行的背景色，我們何不用它內(nèi)置的api呢。我們看看如何實現(xiàn)。
初始化表格的時候
//初始化Table
$('#tb_order').bootstrapTable({
url: '/TableStyle/GetOrder', //請求后臺的URL（*）
method: 'get', //請求方式（*）
//toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認為true，所以一般情況下需要設(shè)置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數(shù)（*）
sidePagination: "server", //分頁方式：client客戶端分頁，server服務(wù)端分頁（*）
pageNumber: 1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數(shù)（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(shù)（*）
search: true, //是否顯示表格搜索，此搜索是客戶端搜索，不會進服務(wù)端，所以，個人感覺意義不大
strictSearch: true,
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數(shù)
clickToSelect: true, //是否啟用點擊選中行
height: 500, //行高，如果沒有設(shè)置height屬性，表格自動根據(jù)記錄條數(shù)覺得表格高度
uniqueId: "ID", //每一行的唯一標識，一般為主鍵列
showToggle: true, //是否顯示詳細視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細視圖
detailView: false, //是否顯示父子表
rowStyle: function (row, index) {
//這里有5個取值代表5中顏色['active', 'success', 'info', 'warning', 'danger'];
var strclass = "";
if (row.ORDER_STATUS == "待排產(chǎn)") {
strclass = 'success';//還有一個active
}
else if (row.ORDER_STATUS == "已刪除") {
strclass = 'danger';
}
else {
return {};
}
return { classes: strclass }
},
columns: [{
checkbox: true
}, {
field: 'ORDER_NO',
title: '訂單編號'
}, {
field: 'ORDER_TYPE',
title: '訂單類型'
}, {
field: 'ORDER_STATUS',
title: '訂單狀態(tài)'
}, {
field: 'REMARK',
title: '備注'
}, ]
});
其實重點就在這個參數(shù)里面：
rowStyle: function (row, index) {
//這里有5個取值代表5中顏色['active', 'success', 'info', 'warning', 'danger'];
var strclass = "";
if (row.ORDER_STATUS == "待排產(chǎn)") {
strclass = 'success';//還有一個active
}
else if (row.ORDER_STATUS == "已刪除") {
strclass = 'danger';
}
else {
return {};
}
return { classes: strclass }
},
bootstrap table支持5中表格的行背景色，分別是'active', 'success', 'info', 'warning', 'danger'這五種，至于每種對應(yīng)的背景顏色，將代碼運行起來就可看到。關(guān)于這個方法的返回值，博主第一次用的時候也研究了好久，按照bootstrap table的規(guī)則，必須返回一個json格式的對象型如： { classes: strclass } 。
三、表格行內(nèi)編輯代碼示例
關(guān)于表格行內(nèi)編輯，需要使用bootstrap table擴展的幾個js文件。
1、引入額外的js文件
<link rel="stylesheet" > <script src="http://rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editable.js"></script> <script src="~/Content/bootstrap-table/extensions/editable/bootstrap-table-editable.js"></script>
2、在cshtml頁面定義表格時，添加兩個屬性
<table id="tb_departments"> <thead> <tr> <th data-field="Name" data-editable="true">部門名稱</th> <th data-field="ParentName">上級部門</th> <th data-field="Level" data-editable="true">部門級別</th> <th data-field="Desc" data-editable="true">描述</th> </tr> </thead> </table>
如果是在js里面初始化，寫法如下：
{
field: "name",
title: "名稱",
editable:true
}
3、在js里面初始化表格的時候注冊編輯保存的事件
$('#tb_departments').bootstrapTable({
url: '/Editable/GetDepartment', //請求后臺的URL（*）
method: 'get', //請求方式（*）
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認為true，所以一般情況下需要設(shè)置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數(shù)（*）
sidePagination: "server", //分頁方式：client客戶端分頁，server服務(wù)端分頁（*）
pageNumber: 1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數(shù)（*）
onEditableSave: function (field, row, oldValue, $el) {
$.ajax({
type: "post",
url: "/Editable/Edit",
data: { strJson: JSON.stringify(row) },
success: function (data, status) {
if (status == "success") {
alert("編輯成功");
}
},
error: function () {
alert("Error");
},
complete: function () {
}
});
}
});
重點還是看看這個事件的處理方法
onEditableSave: function (field, row, oldValue, $el) {
$.ajax({
type: "post",
url: "/Editable/Edit",
data: { strJson: JSON.stringify(row) },
success: function (data, status) {
if (status == "success") {
alert("編輯成功");
}
},
error: function () {
alert("Error");
},
complete: function () {
}
});
}
對應(yīng)的方法里面需要自己處理保存的邏輯。四個參數(shù)field, row, oldValue, $el分別對應(yīng)著當前列的名稱、當前行數(shù)據(jù)對象、更新前的值、編輯的當前單元格的jQuery對象。
四、表格行列合并代碼示例
表格的行列合并功能不用引用其他的js文件，只需要在cshtml頁面使用table的colspan和rowspan即可實現(xiàn)。
1、cshtml頁面
<table id="tb_report"> <thead> <tr> <th colspan="4" data-valign="middle" data-align="center">第一季度</th> <th colspan="4" data-valign="middle" data-align="center">第二季度</th> <th colspan="4" data-valign="middle" data-align="center">第三季度</th> <th colspan="4" data-valign="middle" data-align="center">第四季度</th> <th data-field="TotalCount" rowspan="2" data-valign="middle" data-align="center">年度匯總</th> </tr> <tr> <th data-field="JanCount" data-align="center">一月</th> <th data-field="FebCount" data-align="center">二月</th> <th data-field="MarCount" data-align="center">三月</th> <th data-field="FirstQuarter" data-align="center">第一季度</th> <th data-field="AprCount" data-align="center">四月</th> <th data-field="MayCount" data-align="center">五月</th> <th data-field="JunCount" data-align="center">六月</th> <th data-field="SecondQuarter" data-align="center">第二季度</th> <th data-field="JulCount" data-align="center">七月</th> <th data-field="AguCount" data-align="center">八月</th> <th data-field="SepCount" data-align="center">九月</th> <th data-field="ThirdQuarter" data-align="center">第三季度</th> <th data-field="OctCount" data-align="center">十月</th> <th data-field="NovCount" data-align="center">十一月</th> <th data-field="DecCount" data-align="center">十二月</th> <th data-field="ForthQuarter" data-align="center">第四季度</th> </tr> </thead> </table>
2、js初始化并無特殊
$('#tb_report').bootstrapTable({
url: '/GroupColumns/GetReport', //請求后臺的URL（*）
method: 'get', //請求方式（*）
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認為true，所以一般情況下需要設(shè)置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數(shù)（*）
sidePagination: "server", //分頁方式：client客戶端分頁，server服務(wù)端分頁（*）
pageNumber: 1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數(shù)（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(shù)（*）
});
怎么樣，有沒有很簡單。當然，有人說了，你都可以不用js初始化，直接在cshtml里面用table的屬性去設(shè)置url、分頁等信息。確實，如果我們看過它的api，會發(fā)現(xiàn)它初始化的每一個屬性都對應(yīng)一個table的屬性。型如
如果你的表格沒有一些特殊的事件需要處理，這樣是完全沒有問題的。
五、表格數(shù)據(jù)導出代碼示例
表格數(shù)據(jù)的導出功能也需要一些擴展的js支持。
1、引入額外的js文件
<script src="~/Content/bootstrap-table/extensions/export/bootstrap-table-export.js"></script> <script src="http://rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
2、js初始化的時候
$('#tb_departments').bootstrapTable({
url: '/Export/GetDepartment', //請求后臺的URL（*）
method: 'get', //請求方式（*）
toolbar: '#toolbar', //工具按鈕用哪個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認為true，所以一般情況下需要設(shè)置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數(shù)（*）
sidePagination: "client", //分頁方式：client客戶端分頁，server服務(wù)端分頁（*）
pageNumber: 1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數(shù)（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數(shù)（*）
clickToSelect:true,
showExport: true, //是否顯示導出
exportDataType: "basic", //basic', 'all', 'selected'.
columns: [{
checkbox: true
}, {
field: 'Name',
title: '部門名稱'
}, {
field: 'ParentName',
title: '上級部門'
}, {
field: 'Level',
title: '部門級別'
}, {
field: 'Desc',
title: '描述'
}, ]
});
還是來看重點：這兩個屬性
showExport: true, //是否顯示導出 exportDataType: "basic", //basic', 'all', 'selected'. showExport表示是否顯示導出的按鈕，exportDataType表示導出的模式是當前頁、所有數(shù)據(jù)還是選中數(shù)據(jù)。
六、總結(jié)
以上就是功能的效果以及實現(xiàn)的簡單代碼。博主發(fā)現(xiàn)有幾個問題有待解決。
1、行內(nèi)編輯的功能是每一個單元格提交到后臺，這樣會造成數(shù)據(jù)庫的頻繁操作，感覺不太合適。不知道有沒有更好的方式，每行提交到后臺。
2、導出的功能雖然很好用，但是遺憾的是不支持IE瀏覽器，博主試過官網(wǎng)上面的example，好像IE也導出不了。待驗證。
以上所述是小編給大家介紹的JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】的相關(guān)內(nèi)容，希望對大家有所幫助！
相關(guān)文章
這篇文章主要為大家詳細介紹了JS實現(xiàn)圖片放大效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要介紹了js日期格式化yyyy-MM-dd問題，具有很好的參考價值，希望對大家大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要是對js 動態(tài)加載事件的幾種方法進行了詳細的總結(jié)介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
這篇文章主要為大家詳細介紹了JSP基于Bootstrap分頁顯示實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
這篇文章主要為大家介紹了JavaScript進階之前端文件上傳和下載示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
JavaScript判斷兩種格式的輸入日期的正確性的代碼...2007-03-03
本文為大家詳細介紹下通過JS實現(xiàn)可改變列寬的table，具體的思路及代碼如下，感興趣的朋友可以參考下哈，希望對大家有所幫助2013-07-07
JavaScript forEach中return失效問題解決方案
這篇文章主要介紹了JavaScript forEach中return失效問題解決方案,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-06-06
遮罩層實現(xiàn)浮層DIV登錄的效果，想必很多的朋友都有遇到過吧，實現(xiàn)起來也是很簡單的，下面有個不錯的實現(xiàn)，大家可以感受下2014-02-02
調(diào)試Javascript代碼(瀏覽器F12及VS中debugger關(guān)鍵字)
目前，常用的瀏覽器IE、Chrome、Firefox都有相應(yīng)的腳本調(diào)試功能下面我就介紹如何在瀏覽器/VS中調(diào)試我們的JS代碼,感興趣的你可不要走開啊，希望本文對你有所幫助2013-01-01