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

最新推荐文章于 2021-12-15 12:03:36 发布

程序媛zcx

最新推荐文章于 2021-12-15 12:03:36 发布

阅读量5.5k

点赞数

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

本文链接：https://blog.csdn.net/qq_40015157/article/details/110876774

版权

前端专栏收录该内容

37 篇文章 1 订阅

订阅专栏

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>

程序媛zcx

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
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, in..
复制链接

扫一扫

专栏目录