bootstraptable 汇总_bootstrap-table事件汇总
今天在開發過程中遇到了一個問題，就是關于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事件汇总的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 国内油价今晚将迎来“三连降&
- 下一篇： opencv 梯度幅值_OpenCV边缘