JS組件系列——表格組件神器：bootstrap table（三：終結篇，最後的乾貨福利）
前言：前面介紹了兩篇關於bootstrap table的基礎用法，這章咱們繼續來看看它比較經常使用的一些功能，來個終結篇吧，毛爺爺告訴咱們作事要善始善終~~bootstrap table這東西要想全部功能覆蓋彷佛不太現實，博主挑選了一些自認爲比較經常使用的功能在此分享給各位園友。源碼也在這篇統一給出。好了，很少說廢話，開始咱們的乾貨之旅吧。css
bootstrap table系列：html
- JS組件系列——表格組件神器：bootstrap table
- JS組件系列——表格組件神器：bootstrap table（二：父子表和行列調序）
- JS組件系列——表格組件神器：bootstrap table（三：終結篇，最後的乾貨福利）
1、效果展現
一、表格行樣式
好比咱們有一個顯示訂單頁面的需求，不一樣狀態的訂單顯示不一樣的顏色，如圖：jquery
二、表格行內編輯
第一篇的時候有園友就問過博主是否能夠支持行內編輯的效果，答案是確定的。咱們先來看看效果：git
編輯前ajax
點擊某個單元格數據數據庫
編輯後完成後json
三、表格行列合併
關於行列合併的需求博主以爲是很是常見的，尤爲是作頁面報表的時候須要用到。先來看看效果：bootstrap
當前頁顯示不全，點擊進入看看。怎麼樣？效果還不錯吧。api
四、表格數據導出
關於表格數據導出，bootstrap table支持三種模式的導出：basic、all、selected。也就是當前頁數據導出、全部數據導出、選中數據導出。而且支持導出多種類型的文件，好比常見的excel、xml、json等格式。瀏覽器
導出當前頁到excel
導出表格全部數據
導出選中行數據
至於其餘類型的文件的導出，和excel基本相同，就不作效果展現了。
2、表格行樣式代碼示例
關於表格行的樣式設置，其餘是它一個最基礎的功能，爲何要把它放在第三篇？是由於博主以爲這功能可能處處都用得着。固然，效果並不難，本身用jQuery設置tr的背景色也能夠實現，可是博主以爲，既然bootstrap table提供了機制設置行的背景色，咱們何不用它內置的api呢。咱們看看如何實現。
初始化表格的時候
//初始化Table $('#tb_order').bootstrapTable({ url: '/TableStyle/GetOrder', //請求後臺的URL（*） method: 'get', //請求方式（*） //toolbar: '#toolbar', //工具按鈕用哪一個容器 striped: true, //是否顯示行間隔色 cache: false, //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*） pagination: true, //是否顯示分頁（*） sortable: false, //是否啓用排序 sortOrder: "asc", //排序方式 queryParams: oTableInit.queryParams,//傳遞參數（*） sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*） pageNumber: 1, //初始化加載第一頁，默認第一頁 pageSize: 10, //每頁的記錄行數（*） pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*） search: true, //是否顯示錶格搜索，此搜索是客戶端搜索，不會進服務端，因此，我的感受意義不大 strictSearch: true, showColumns: true, //是否顯示全部的列 showRefresh: true, //是否顯示刷新按鈕 minimumCountColumns: 2, //最少容許的列數 clickToSelect: true, //是否啓用點擊選中行 height: 500, //行高，若是沒有設置height屬性，表格自動根據記錄條數以爲表格高度 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 == "待排產") { 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: '訂單狀態' }, { field: 'REMARK', title: '備註' }, ] });
其實重點就在這個參數裏面：
rowStyle: function (row, index) { //這裏有5個取值表明5中顏色['active', 'success', 'info', 'warning', 'danger']; var strclass = ""; if (row.ORDER_STATUS == "待排產") { strclass = 'success';//還有一個active } else if (row.ORDER_STATUS == "已刪除") { strclass = 'danger'; } else { return {}; } return { classes: strclass } },
bootstrap table支持5中表格的行背景色，分別是'active', 'success', 'info', 'warning', 'danger'這五種，至於每種對應的背景顏色，將代碼運行起來就可看到。關於這個方法的返回值，博主第一次用的時候也研究了很久，按照bootstrap table的規則，必須返回一個json格式的對象型如： { classes: strclass } 。
3、表格行內編輯代碼示例
關於表格行內編輯，須要使用bootstrap table擴展的幾個js文件。
一、引入額外的js文件
<link rel="stylesheet" href="//rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/css/bootstrap-editable.css"> <script src="//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>
二、在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 }
三、在js裏面初始化表格的時候註冊編輯保存的事件
$('#tb_departments').bootstrapTable({
url: '/Editable/GetDepartment', //請求後臺的URL（*）
method: 'get', //請求方式（*）
toolbar: '#toolbar', //工具按鈕用哪一個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啓用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數（*）
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber: 1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數（*）
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 () { } }); }
對應的方法裏面須要本身處理保存的邏輯。四個參數field, row, oldValue, $el分別對應着當前列的名稱、當前行數據對象、更新前的值、編輯的當前單元格的jQuery對象。
4、表格行列合併代碼示例
表格的行列合併功能不用引用其餘的js文件，只須要在cshtml頁面使用table的colspan和rowspan便可實現。
一、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>
二、js初始化並沒有特殊
$('#tb_report').bootstrapTable({
url: '/GroupColumns/GetReport', //請求後臺的URL（*）
method: 'get', //請求方式（*）
toolbar: '#toolbar', //工具按鈕用哪一個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數（*）
sidePagination: "server", //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber: 1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）
});
怎麼樣，有沒有很簡單。固然，有人說了，你均可以不用js初始化，直接在cshtml裏面用table的屬性去設置url、分頁等信息。確實，若是咱們看過它的api，會發現它初始化的每個屬性都對應一個table的屬性。型如
若是你的表格沒有一些特殊的事件須要處理，這樣是徹底沒有問題的。
5、表格數據導出代碼示例
表格數據的導出功能也須要一些擴展的js支持。
一、引入額外的js文件
<script src="~/Content/bootstrap-table/extensions/export/bootstrap-table-export.js"></script> <script src="//rawgit.com/hhurz/tableExport.jquery.plugin/master/tableExport.js"></script>
二、js初始化的時候
$('#tb_departments').bootstrapTable({
url: '/Export/GetDepartment', //請求後臺的URL（*）
method: 'get', //請求方式（*）
toolbar: '#toolbar', //工具按鈕用哪一個容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認爲true，因此通常狀況下須要設置一下這個屬性（*）
pagination: true, //是否顯示分頁（*）
sortable: false, //是否啓用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數（*）
sidePagination: "client", //分頁方式：client客戶端分頁，server服務端分頁（*）
pageNumber: 1, //初始化加載第一頁，默認第一頁
pageSize: 10, //每頁的記錄行數（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁的行數（*）
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表示導出的模式是當前頁、全部數據仍是選中數據。
6、總結
以上就是功能的效果以及實現的簡單代碼。博主發現有幾個問題有待解決。
一、行內編輯的功能是每個單元格提交到後臺，這樣會形成數據庫的頻繁操做，感受不太合適。不知道有沒有更好的方式，每行提交到後臺。
二、導出的功能雖然很好用，可是遺憾的是不支持IE瀏覽器，博主試過官網上面的example，好像IE也導出不了。待驗證。
源碼提供出來，園友們有興趣能夠看看。源碼下載。
最近打算作點本身的東西出來，將博客裏面的一些好的技術融合進去。有項目合做的小夥伴趕快聯繫博主吧！
本文原創出處：http://www.cnblogs.com/landeanfen/
歡迎各位轉載，可是未經做者本人贊成，轉載文章以後必須在文章頁面明顯位置給出做者和原文鏈接，不然保留追究法律責任的權利！
相關文章
- 1. JS組件系列——表格組件神器：bootstrap table
- 2. JS組件系列——表格組件神器：bootstrap table（二：父子表和行列調序）
- 3. JS組件系列——Bootstrap Table 表格行拖拽
- 4. JS組件系列——Bootstrap文件上傳組件：bootstrap fileinput
- 5. 表格組件神器：bootstrap table詳細使用指南
- 6. 使用bootstrap table小記（表格組件）
- 7. JS組件系列——本身動手封裝bootstrap-treegrid組件
- 8. JS組件系列——自己動手封裝bootstrap-treegrid組件
- 9. JS組件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）
- 更多相關文章...
- • ASP AdRotator 組件 - ASP 教程
- • MyBatis的核心組件 - MyBatis教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • 互聯網組織的未來：剖析GitHub員工的任性之源
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. JS組件系列——表格組件神器：bootstrap table
- 2. JS組件系列——表格組件神器：bootstrap table（二：父子表和行列調序）
- 3. JS組件系列——Bootstrap Table 表格行拖拽
- 4. JS組件系列——Bootstrap文件上傳組件：bootstrap fileinput
- 5. 表格組件神器：bootstrap table詳細使用指南
- 6. 使用bootstrap table小記（表格組件）
- 7. JS組件系列——本身動手封裝bootstrap-treegrid組件
- 8. JS組件系列——自己動手封裝bootstrap-treegrid組件
- 9. JS組件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）