今天維護以前老項目時,碰到需要監聽擷取bootstrap-table CheckBox 的選中和取消事件,并做不同的處理,找了會才試出正确的方法,特此記錄下。
![](https://img.laitimes.com/img/__Qf2AjLwojIjJCLyojI0JCLiAzNfRHLGZkRGZkRfJ3bs92YsYTMfVmepNHL1UFVOJTSq5UMNpHWwYUbiBnTzwEMW1mY1RzRapnTtxkb5ckYplTeMZTTINGMShUYfRHelRHLwEzX39GZhh2css2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xyayFWbyVGdhd3LcV2Zh1Wa9M3clN2byBXLzN3btg3Pn5GcuIjN3EjMxQTMyETMxAjMwIzLc52YucWbp5GZzNmLn9Gbi1yZtl2Lc9CX6MHc0RHaiojIsJye.png)
因為目前業務是需要選中立即送出,是以就不能用選中後擷取目前所有選中的行批量送出的方式,隻能是單條選中/取消實時請求接口。
//擷取目前選中的行對象
$("#dataGrid").on("check.bs.table", function (e, row, $element) { //點選CheckBox觸發事件
//row - 目前的行對象,取值方式 row.屬性
var _memberId = row.memberId;
//省略通路背景邏輯
});
其中 $("#dataGrid") 為目前table對象
//擷取目前取消選中的行對象
$("#dataGrid").on("uncheck.bs.table", function (e, row, $element) {
//row - 目前的行對象,取值方式 row.屬性
var _memberId = row.memberId;
//省略通路背景邏輯
});
//設定CheckBox預設選中
[[
{field: 'ck', checkbox: true, align: 'center',formatter: function(value, row, index){
var _checked = false; //預設不選中
if(!u.isEmpty(row.authDate)){ //滿足條件,設定選中
_checked = true;
};
return {
checked: _checked
}
}},
{field: 'account', title: '會員郵箱', align: 'center'},
{field: 'authDate', title: '授權時間', align: 'center'},
]]
上述代碼片段為初始化bootstrap-table時對列屬性 columns 的設定,其中第一個對象 field:'ck' 為第一列 CheckBox 清單,全部列效果如 文中第一張圖檔。