解决bootstrapTable动态添加的一行不会被$(“#bootstrap-table“).bootstrapTable(‘getSelections‘)获取到

没手可分(ಡωಡ)

于 2023-03-02 18:30:21 发布

阅读量661

点赞数

分类专栏： html web ruoyi 文章标签： bootstrap javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_43099837/article/details/129306079

版权

web 同时被 3 个专栏收录

15 篇文章

订阅专栏

html

9 篇文章

订阅专栏

ruoyi

2 篇文章

订阅专栏

文章讲述了在BootstrapTable中，通过监听行的选中和取消选中事件，动态控制添加按钮的状态。当有一行被选中时，按钮变为可点击，多行或无选中时则禁用。实现过程中使用了JavaScript的数组操作和事件处理函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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