背景
业务需要bootstrapTable表格选中某一行数据,并将按钮表示为可点击状态,当选中多行或没选中数据时设置为不可点击状态。
解决
<a class="btn btn-success" id="btn-insert-row" onclick="insertRow()"><i class="fa fa-plus"></i> 所选行下方添加</a>
$("#btn-insert-row").attr('disabled', 'disabled');
var selectAllIds = []; // 选中行id集合
// 点击checkbox事件监听
$('#bootstrap-table').on('uncheck.bs.table check.bs.table check-all.bs.table uncheck-all.bs.table',function(e,rows) {
var datas = $.isArray(rows) ? rows : [rows];// 点击时获取选中的行或取消选中的行
examine(e.type, datas);
})
//caseSort为row{}中自定义的键
function examine(type,datas){
if(type.indexOf('uncheck')===-1){
$.each(datas,function(i,v){
console.log("type.indexOf('uncheck')===-1 "+ JSON.stringify(v));
console.log("type.indexOf('uncheck')===-1 "+ v.caseSort);
// 添加时,判断一行或多行的caseSort是否已经在数组里 不存则添加
selectAllIds.indexOf(parseInt(v.caseSort)) === -1 ? selectAllIds.push(parseInt(v.caseSort)) : -1;
});
}else{
$.each(datas,function(i,v){
console.log(v);
selectAllIds.splice(selectAllIds.indexOf(parseInt(v.caseSort)),1); //删除取消选中行
});
}
//console.log(selectAllIds);
if(selectAllIds.length == 1) {
$("#btn-insert-row").removeAttr("disabled");
}else{
$("#btn-insert-row").attr('disabled', 'disabled');
}
}