bootstrapTable中使用onCheck方法取消选中某行的CheckBox

bootstrap table 参考文档: http://www.itxst.com/bootstrap-table-methods/tutorial.html

今天看到了一个问题,之前没有用过,翻看文档写个示例记录一下:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <script src="http://www.itxst.com/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script>
    <link href="http://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-4.3.1/css/bootstrap.css"
          rel="stylesheet"/>
    <link href="http://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.css"
          rel="stylesheet"/>
    <script src="http://www.itxst.com/package/bootstrap-table-1.14.1/bootstrap-table-1.14.1/bootstrap-table.js"></script>
    <title>bootstrap table onCheck选中行事件在线例子</title>
    <style>
        .table-demo {
            width: 80%;
            margin: 30px auto 0px auto;
        }
    </style>
</head>
<body>
<div class="radio-inline">
    <input type="radio" name="killOrder" id="killOrder1" value="0" checked/>
    <label for="killOrder1">正常选中</label>
</div>
<div class="radio-inline">
    <input type="radio" name="killOrder" id="killOrder2" value="1"/>
    <label for="killOrder2">开启取消选中</label>
</div>

<div class="table-demo">
    <table id="table"></table>
</div>
<script>
    //设置需要显示的列
    let type = 0;
    var columns = [{
        checkbox: true
    }, {
        field: 'ProductName',
        title: '产品名称'

    }, {
        field: 'StockNum',
        title: 'Item 库存',

    }];

    //需要显示的数据
    var data = [{
        Id: 1,
        ProductName: '香蕉',
        StockNum: '100'
    }, {
        Id: 2,
        ProductName: '苹果',
        StockNum: '200'
    }, {
        Id: 3,
        ProductName: '葡萄',
        StockNum: '300'
    }
    ];
    //bootstrap table初始化数据
    $('#table').bootstrapTable({
        singleSelect: false,
        clickToSelect: true,
        columns: columns,
        data: data,
        onCheck: function (row, $element) {
            type = $("input[name='killOrder']:checked").val();
            // alert(type);
            // alert(JSON.stringify(row));//获取到当前行的数据
            let curId = row.Id; // 获取当前选中的ID
            var rows = $('#table').bootstrapTable('getSelections');//获取到选中所有行的数据
            // alert(JSON.stringify(rows));
            if (type == 1) {//满足条件,需要取消其他选中
                //1、可以先全部取消,再进行选择
                //$('#table').bootstrapTable('uncheckAll');
                //2、可以传一个变量自定义选中或取消哪一行
                //$('#table').bootstrapTable('check', 1); 选中第二行
                //$('#table').bootstrapTable('uncheck', 1); 取消选中第二行

                //示例:选中行时触发,取消选中当前数据以外的行
                let uncheckList = [];
                for (let i = 0; i < rows.length; i++) {
                    if (rows[i].Id !== curId) {// 假如需要取消选中的是 Id 不为 当前选中数据的ID, 你可以根据自己的需求来建 uncheckList 数组
                        uncheckList.push(rows[i].Id)
                    }
                }
                console.log("uncheckList" + uncheckList);
                $('#table').bootstrapTable('uncheckBy', {field: 'Id', values: uncheckList});
            }
        }
    });
</script>
</body>
</html>

 

  • 0
    点赞
  • 3
    收藏
  • 打赏
    打赏
  • 0
    评论
©️2022 CSDN 皮肤主题:黑客帝国 设计师:我叫白小胖 返回首页
评论

打赏作者

程序媛zcx

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值