JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】
bootstrap table系列：
JS表格組件神器bootstrap table詳解（基礎(chǔ)版）
JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】
JS組件系列之Bootstrap table表格組件神器【二、父子表和行列調(diào)序】
Bootstrap Table是輕量級(jí)的和功能豐富的以表格的形式顯示的數(shù)據(jù)，支持單選，復(fù)選框，排序，分頁(yè),顯示/隱藏列,固定標(biāo)題滾動(dòng)表,響應(yīng)式設(shè)計(jì)，Ajax加載JSON數(shù)據(jù)，點(diǎn)擊排序的列，卡片視圖等。那么本文給大家介紹JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】，一起學(xué)習(xí)吧！
一、效果展示
1、表格行樣式
比如我們有一個(gè)顯示訂單頁(yè)面的需求，不同狀態(tài)的訂單顯示不同的顏色，如圖：
2、表格行內(nèi)編輯
第一篇的時(shí)候有園友就問(wèn)過(guò)博主是否可以支持行內(nèi)編輯的效果，答案是肯定的。我們先來(lái)看看效果：
編輯前
點(diǎn)擊某個(gè)單元格數(shù)據(jù)
編輯后完成后
3、表格行列合并
關(guān)于行列合并的需求博主覺(jué)得是非常常見(jiàn)的，尤其是做頁(yè)面報(bào)表的時(shí)候需要用到。先來(lái)看看效果：
當(dāng)前頁(yè)顯示不全，點(diǎn)擊進(jìn)入看看。怎么樣？效果還不錯(cuò)吧。
4、表格數(shù)據(jù)導(dǎo)出
關(guān)于表格數(shù)據(jù)導(dǎo)出，bootstrap table支持三種模式的導(dǎo)出：basic、all、selected。也就是當(dāng)前頁(yè)數(shù)據(jù)導(dǎo)出、所有數(shù)據(jù)導(dǎo)出、選中數(shù)據(jù)導(dǎo)出。并且支持導(dǎo)出多種類(lèi)型的文件，比如常見(jiàn)的excel、xml、json等格式。
導(dǎo)出當(dāng)前頁(yè)到excel
導(dǎo)出表格所有數(shù)據(jù)
導(dǎo)出選中行數(shù)據(jù)
至于其他類(lèi)型的文件的導(dǎo)出，和excel基本相同，就不做效果展示了。
二、表格行樣式代碼示例
關(guān)于表格行的樣式設(shè)置，其他是它一個(gè)最基礎(chǔ)的功能，為什么要把它放在第三篇？是因?yàn)椴┲饔X(jué)得這功能可能到處都用得著。當(dāng)然，效果并不難，自己用jQuery設(shè)置tr的背景色也可以實(shí)現(xiàn)，但是博主覺(jué)得，既然bootstrap table提供了機(jī)制設(shè)置行的背景色，我們何不用它內(nèi)置的api呢。我們看看如何實(shí)現(xiàn)。
初始化表格的時(shí)候
//初始化Table
$('#tb_order').bootstrapTable({
url: '/TableStyle/GetOrder', //請(qǐng)求后臺(tái)的URL（*）
method: 'get', //請(qǐng)求方式（*）
//toolbar: '#toolbar', //工具按鈕用哪個(gè)容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
pagination: true, //是否顯示分頁(yè)（*）
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數(shù)（*）
sidePagination: "server", //分頁(yè)方式：client客戶端分頁(yè)，server服務(wù)端分頁(yè)（*）
pageNumber: 1, //初始化加載第一頁(yè)，默認(rèn)第一頁(yè)
pageSize: 10, //每頁(yè)的記錄行數(shù)（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁(yè)的行數(shù)（*）
search: true, //是否顯示表格搜索，此搜索是客戶端搜索，不會(huì)進(jìn)服務(wù)端，所以，個(gè)人感覺(jué)意義不大
strictSearch: true,
showColumns: true, //是否顯示所有的列
showRefresh: true, //是否顯示刷新按鈕
minimumCountColumns: 2, //最少允許的列數(shù)
clickToSelect: true, //是否啟用點(diǎn)擊選中行
height: 500, //行高，如果沒(méi)有設(shè)置height屬性，表格自動(dòng)根據(jù)記錄條數(shù)覺(jué)得表格高度
uniqueId: "ID", //每一行的唯一標(biāo)識(shí)，一般為主鍵列
showToggle: true, //是否顯示詳細(xì)視圖和列表視圖的切換按鈕
cardView: false, //是否顯示詳細(xì)視圖
detailView: false, //是否顯示父子表
rowStyle: function (row, index) {
//這里有5個(gè)取值代表5中顏色['active', 'success', 'info', 'warning', 'danger'];
var strclass = "";
if (row.ORDER_STATUS == "待排產(chǎn)") {
strclass = 'success';//還有一個(gè)active
}
else if (row.ORDER_STATUS == "已刪除") {
strclass = 'danger';
}
else {
return {};
}
return { classes: strclass }
},
columns: [{
checkbox: true
}, {
field: 'ORDER_NO',
title: '訂單編號(hào)'
}, {
field: 'ORDER_TYPE',
title: '訂單類(lèi)型'
}, {
field: 'ORDER_STATUS',
title: '訂單狀態(tài)'
}, {
field: 'REMARK',
title: '備注'
}, ]
});
其實(shí)重點(diǎn)就在這個(gè)參數(shù)里面：
rowStyle: function (row, index) {
//這里有5個(gè)取值代表5中顏色['active', 'success', 'info', 'warning', 'danger'];
var strclass = "";
if (row.ORDER_STATUS == "待排產(chǎn)") {
strclass = 'success';//還有一個(gè)active
}
else if (row.ORDER_STATUS == "已刪除") {
strclass = 'danger';
}
else {
return {};
}
return { classes: strclass }
},
bootstrap table支持5中表格的行背景色，分別是'active', 'success', 'info', 'warning', 'danger'這五種，至于每種對(duì)應(yīng)的背景顏色，將代碼運(yùn)行起來(lái)就可看到。關(guān)于這個(gè)方法的返回值，博主第一次用的時(shí)候也研究了好久，按照bootstrap table的規(guī)則，必須返回一個(gè)json格式的對(duì)象型如： { classes: strclass } 。
三、表格行內(nèi)編輯代碼示例
關(guān)于表格行內(nèi)編輯，需要使用bootstrap table擴(kuò)展的幾個(gè)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頁(yè)面定義表格時(shí)，添加兩個(gè)屬性
<table id="tb_departments"> <thead> <tr> <th data-field="Name" data-editable="true">部門(mén)名稱</th> <th data-field="ParentName">上級(jí)部門(mén)</th> <th data-field="Level" data-editable="true">部門(mén)級(jí)別</th> <th data-field="Desc" data-editable="true">描述</th> </tr> </thead> </table>
如果是在js里面初始化，寫(xiě)法如下：
{
field: "name",
title: "名稱",
editable:true
}
3、在js里面初始化表格的時(shí)候注冊(cè)編輯保存的事件
$('#tb_departments').bootstrapTable({
url: '/Editable/GetDepartment', //請(qǐng)求后臺(tái)的URL（*）
method: 'get', //請(qǐng)求方式（*）
toolbar: '#toolbar', //工具按鈕用哪個(gè)容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
pagination: true, //是否顯示分頁(yè)（*）
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數(shù)（*）
sidePagination: "server", //分頁(yè)方式：client客戶端分頁(yè)，server服務(wù)端分頁(yè)（*）
pageNumber: 1, //初始化加載第一頁(yè)，默認(rèn)第一頁(yè)
pageSize: 10, //每頁(yè)的記錄行數(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 () {
}
});
}
});
重點(diǎn)還是看看這個(gè)事件的處理方法
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 () {
}
});
}
對(duì)應(yīng)的方法里面需要自己處理保存的邏輯。四個(gè)參數(shù)field, row, oldValue, $el分別對(duì)應(yīng)著當(dāng)前列的名稱、當(dāng)前行數(shù)據(jù)對(duì)象、更新前的值、編輯的當(dāng)前單元格的jQuery對(duì)象。
四、表格行列合并代碼示例
表格的行列合并功能不用引用其他的js文件，只需要在cshtml頁(yè)面使用table的colspan和rowspan即可實(shí)現(xiàn)。
1、cshtml頁(yè)面
<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初始化并無(wú)特殊
$('#tb_report').bootstrapTable({
url: '/GroupColumns/GetReport', //請(qǐng)求后臺(tái)的URL（*）
method: 'get', //請(qǐng)求方式（*）
toolbar: '#toolbar', //工具按鈕用哪個(gè)容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
pagination: true, //是否顯示分頁(yè)（*）
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數(shù)（*）
sidePagination: "server", //分頁(yè)方式：client客戶端分頁(yè)，server服務(wù)端分頁(yè)（*）
pageNumber: 1, //初始化加載第一頁(yè)，默認(rèn)第一頁(yè)
pageSize: 10, //每頁(yè)的記錄行數(shù)（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁(yè)的行數(shù)（*）
});
怎么樣，有沒(méi)有很簡(jiǎn)單。當(dāng)然，有人說(shuō)了，你都可以不用js初始化，直接在cshtml里面用table的屬性去設(shè)置url、分頁(yè)等信息。確實(shí)，如果我們看過(guò)它的api，會(huì)發(fā)現(xiàn)它初始化的每一個(gè)屬性都對(duì)應(yīng)一個(gè)table的屬性。型如
如果你的表格沒(méi)有一些特殊的事件需要處理，這樣是完全沒(méi)有問(wèn)題的。
五、表格數(shù)據(jù)導(dǎo)出代碼示例
表格數(shù)據(jù)的導(dǎo)出功能也需要一些擴(kuò)展的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初始化的時(shí)候
$('#tb_departments').bootstrapTable({
url: '/Export/GetDepartment', //請(qǐng)求后臺(tái)的URL（*）
method: 'get', //請(qǐng)求方式（*）
toolbar: '#toolbar', //工具按鈕用哪個(gè)容器
striped: true, //是否顯示行間隔色
cache: false, //是否使用緩存，默認(rèn)為true，所以一般情況下需要設(shè)置一下這個(gè)屬性（*）
pagination: true, //是否顯示分頁(yè)（*）
sortable: false, //是否啟用排序
sortOrder: "asc", //排序方式
queryParams: oTableInit.queryParams,//傳遞參數(shù)（*）
sidePagination: "client", //分頁(yè)方式：client客戶端分頁(yè)，server服務(wù)端分頁(yè)（*）
pageNumber: 1, //初始化加載第一頁(yè)，默認(rèn)第一頁(yè)
pageSize: 10, //每頁(yè)的記錄行數(shù)（*）
pageList: [10, 25, 50, 100], //可供選擇的每頁(yè)的行數(shù)（*）
clickToSelect:true,
showExport: true, //是否顯示導(dǎo)出
exportDataType: "basic", //basic', 'all', 'selected'.
columns: [{
checkbox: true
}, {
field: 'Name',
title: '部門(mén)名稱'
}, {
field: 'ParentName',
title: '上級(jí)部門(mén)'
}, {
field: 'Level',
title: '部門(mén)級(jí)別'
}, {
field: 'Desc',
title: '描述'
}, ]
});
還是來(lái)看重點(diǎn)：這兩個(gè)屬性
showExport: true, //是否顯示導(dǎo)出 exportDataType: "basic", //basic', 'all', 'selected'. showExport表示是否顯示導(dǎo)出的按鈕，exportDataType表示導(dǎo)出的模式是當(dāng)前頁(yè)、所有數(shù)據(jù)還是選中數(shù)據(jù)。
六、總結(jié)
以上就是功能的效果以及實(shí)現(xiàn)的簡(jiǎn)單代碼。博主發(fā)現(xiàn)有幾個(gè)問(wèn)題有待解決。
1、行內(nèi)編輯的功能是每一個(gè)單元格提交到后臺(tái)，這樣會(huì)造成數(shù)據(jù)庫(kù)的頻繁操作，感覺(jué)不太合適。不知道有沒(méi)有更好的方式，每行提交到后臺(tái)。
2、導(dǎo)出的功能雖然很好用，但是遺憾的是不支持IE瀏覽器，博主試過(guò)官網(wǎng)上面的example，好像IE也導(dǎo)出不了。待驗(yàn)證。
以上所述是小編給大家介紹的JS組件系列之Bootstrap table表格組件神器【終結(jié)篇】的相關(guān)內(nèi)容，希望對(duì)大家有所幫助！
相關(guān)文章
因項(xiàng)目開(kāi)發(fā)需要，須將每一個(gè)方法都獨(dú)立成單獨(dú)的js文件以便載入、維護(hù)，所以，必須需要有一個(gè)控制器用于載入這些方法。2010-07-07
JavaScript之filter_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
filter也是一個(gè)常用的操作，它用于把Array的某些元素過(guò)濾掉，然后返回剩下的元素。下面通過(guò)實(shí)例代碼給大家簡(jiǎn)答介紹下javascript中的filter，需要的的朋友參考下吧2017-06-06
Javascript四舍五入Math.round()與Math.pow()使用介紹
本文為大家介紹下Javascript中的四舍五入Math.round()與Math.pow()的使用，感興趣的朋友不要錯(cuò)過(guò)2013-12-12
javascript下有關(guān)dom以及xml節(jié)點(diǎn)訪問(wèn)兼容問(wèn)題
javascript下有關(guān)dom以及xml節(jié)點(diǎn)訪問(wèn)兼容問(wèn)題...2007-11-11
在JavaScript中使用for循環(huán)的方法詳解
在本文中，我們將學(xué)習(xí) JavaScript 中提供，的 for 循環(huán)，我們將了解如何在 JavaScript 中使用 for...in 循環(huán)語(yǔ)句、其語(yǔ)法、工作原理示例、何時(shí)使用或避免使用它以及我們可以使用哪些其他類(lèi)型的循環(huán),需要的朋友可以參考下2023-07-07
TypeScript同樣也可以結(jié)合構(gòu)建工具一起使用，下邊以webpack為例介紹一下如何結(jié)合構(gòu)建工具使用TypeScript，本文分步驟給大家介紹的非常詳細(xì)，需要的朋友參考下吧2021-06-06
JS支持帶x身份證號(hào)碼驗(yàn)證函數(shù)
身份證號(hào)碼驗(yàn)證-支持新的帶x身份證2008-08-08
學(xué)好js，這些js函數(shù)概念一定要知道【推薦】
本文主要介紹了一些js函數(shù)概念，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
JS實(shí)現(xiàn)簡(jiǎn)單表格排序操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單表格排序操作,結(jié)合具體實(shí)例形式分析了JavaScript事件響應(yīng)及table表格動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-10-10
基于JavaScript實(shí)現(xiàn)鼠標(biāo)箭頭移動(dòng)圖片跟著移動(dòng)
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)鼠標(biāo)箭頭移動(dòng)圖片跟著移動(dòng)的核心代碼，代碼比較簡(jiǎn)單易懂,需要的朋友可以參考下2016-08-08