当先锋百科网

首页 1 2 3 4 5 6 7

背景
业务需要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');
            }
        }