今天在開發過程中遇到了一個問題，就是關于bootstrap-table全選按鈕事件的問題，翻了一下它的開發文檔，發現只有全選按鈕選中事件，沒有取消選中事件，因為要做的是一個商品選擇功能，沒有取消全選事件就沒辦法做價格實時更新，然后打開萬能的百度查了一下，看到了前輩的一篇文章，然后寫篇文章備份一下。

$(function(){

/*初始化表格*/

$("#goods").bootstrapTable({

data: data

});

/*加載事件*/

$("#goods")

.on('click-row.bs.table', function (e, row, ele,field) {

$("#eventInfo").text('點擊行事件 當前商品名：'+ row.goodsName

+ '，價格：' + row.price

+ '，效期：' + row.date

+ '當前點擊單元格field值為：' + field);

})

.on('dbl-click-row.bs.table', function (e, row, ele,field) {

$("#eventInfo").text('雙擊行事件');

})

.on('check.bs.table', function (e, row,ele) {

$("#eventInfo").text('checkbox選中事件');

})

.on('uncheck.bs.table', function (e, row,ele) {

$("#eventInfo").text('checkbox取消選中事件');

})

.on('sort.bs.table', function (e, field, order) {

var o;

switch(order){

case "desc":

o = "降序";

break;

case "asc":

o = "升序";

break;

}

$("#eventInfo").text('排序事件 當前' + name + '列，以' + o + "排列");

})

.on('check-all.bs.table', function (e,dataArr) {

$("#eventInfo").text('全選事件');

})

.on('uncheck-all.bs.table', function (e,dataArr) {

$("#eventInfo").text('取消全選事件');

})

.on('load-success.bs.table', function (e, data) {

$("#eventInfo").text('加載成功事件');

})

.on('load-error.bs.table', function (e, status) {

$("#eventInfo").text('加載錯誤事件');

})

.on('column-switch.bs.table', function (e, field, checked) {

var colName;

switch(field){

case "goodsName":

colName = "商品名稱";

break;

case "price":

colName = "價格";

break;

case "date":

colName = "日期";

break;

}

if(checked){

$("#eventInfo").text('篩選列事件 ' + colName + '列顯示');

}else{

$("#eventInfo").text('篩選列事件 ' + colName + '列隱藏');

}

})

.on('page-change.bs.table', function (e, number, size) {

$("#eventInfo").text('切換頁事件 當前頁數：第' + number + "頁，每頁顯示數量" + size + "條");

})

.on('search.bs.table', function (e, text) {

$("#eventInfo").text('搜索事件');

});

});

分析事件及回調函數

bootstrap-table事件基本以on綁定，bootstrap-table的事件都有.bs.table后綴 bs即bootstrap 顯然.bs.table是申明boostrap-table。

click-row：行點擊事件，callback獲取4個參數 ： e 事件對象 ， row 當前行數據對象 ， ele 當前單元格對象 ， field 當前單元格的field值。(row是數據對象，ele是DOM對象)

dbl-click-row：行雙擊事件，callback獲取4個參數 ： e 事件對象 ， row 當前行數據對象 ， ele 當前單元格對象 ， field 當前單元格的field值。(row是數據對象，ele是DOM對象)

check：單個checkbox選中事件，callback獲取3個參數 ： e 事件對象 ， row 當前行數據對象 ， ele 當前單元格對象。(row是數據對象，ele是DOM對象)

uncheck：單個checkbox取消選中事件，callback獲取3個參數 ： e 事件對象 ， row 當前行數據對象 ， ele 當前單元格對象。(row是數據對象，ele是DOM對象)

check-all：全選checkbox事件，callback獲取2個參數 ：e 事件對象 ，dataArr 選中行數據對象集合(dataArr的對象是數據對象)

uncheck-all：全選checkbox取消事件，callback獲取2個參數 ：e 事件對象 ，dataArr 選中行數據對象集合(dataArr的對象是數據對象)

sort：列排序事件，callback獲取3個參數 ： e 事件對象 ，?field?當前列的field值 ，?order 當前列是升序還是降序(enum值，desc ， asc)。

load-success：數據加載成功事件，callback獲取2個參數：e 事件對象 ， data 成功加載的數據對象集合。(dataArr的對象是數據對象)

load-error：數據加載失敗事件，callback獲取2個參數：e 事件對象 ，?status 失敗狀態碼。

column-switch：顯示隱藏列選擇事件，callback獲取3個參數：e 事件對象 ，field?當前列的field值 ，checked 是否勾選(bool值)。

page-change：翻頁事件，callback獲取3個參數 ： e 事件對象 ，number 當前頁碼(不是下標，是頁碼) ，size 當前頁數據條數。

search：搜索事件，callback獲取2個參數 ： e 事件對象 ，text 搜索框輸入內容。

感謝前輩，原文出處：點擊直達

總結

以上是生活随笔為你收集整理的bootstraptable 汇总_bootstrap-table事件汇总的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。