bootstrap-table CheckBox点击获取当前选中/取消当前行对象,设置CheckBox默认选中

今天维护以前老项目时,碰到需要监听获取bootstrap-table 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 列表,全部列效果如 文中第一张图片。

  • 2
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
当你在 Bootstrap Table 中添加复选框列时,可以使用 `getSelections` 方法获取所有选中数据,包括复选框列。以下是一个示例: ```html <table id="table" data-toggle="table" data-url="data.json" data-checkbox="true"> <thead> <tr> <th data-field="state" data-checkbox="true"></th> <th data-field="id">ID</th> <th data-field="name">Name</th> <th data-field="price">Price</th> </tr> </thead> </table> <button id="btn">Get selected row</button> ``` 这个示例中,我们在表格中添加了一个复选框列,并在页面中添加了一个按钮。当用户点击按钮时,我们将获取选中数据并输出到控制台。 ```javascript $('#btn').click(function() { var selections = $('#table').bootstrapTable('getSelections'); console.log('Selected rows:', selections); }); ``` 这段代码中,我们使用 `getSelections` 方法获取所有选中数据,并将其输出到控制台。 注意,复选框列的选中状态并不会影响数据的获取,所以无需特别处理复选框列。如果需要,你可以在数据中添加一个 `checkbox` 属性,用于标识该是否被选中。以下是一个示例: ```javascript $('#btn').click(function() { var selections = $('#table').bootstrapTable('getSelections'); for (var i = 0; i < selections.length; i++) { selections[i].checkbox = true; } console.log('Selected rows:', selections); }); ``` 这段代码中,我们遍历选中数据的数组,并为每个数据添加一个 `checkbox` 属性,用于标识该是否被选中
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值