天天看點

bootstrap-table CheckBox點選擷取目前選中/取消目前行對象,設定CheckBox預設選中

今天維護以前老項目時,碰到需要監聽擷取bootstrap-table CheckBox 的選中和取消事件,并做不同的處理,找了會才試出正确的方法,特此記錄下。

bootstrap-table CheckBox點選擷取目前選中/取消目前行對象,設定CheckBox預設選中

因為目前業務是需要選中立即送出,是以就不能用選中後擷取目前所有選中的行批量送出的方式,隻能是單條選中/取消實時請求接口。

//擷取目前選中的行對象

$("#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 清單,全部列效果如 文中第一張圖檔。