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

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

问题描述:

 row.TYPE是数据库里的值,Judge是定义的全局变量怎么使用onCheck函数来取消选中的行的CheckBox

function BusinessLicenseVerify() {
            var oTableInitPersonnel = new Object();
            oTableInitPersonnel.Init = function (url, columns) {

                $('#BusinessLicenseTable').bootstrapTable({
                    url: contextUri + url,                //请求后台的URL(*)
                    method: 'post',                      //请求方式(*)
                    striped: true,                      //是否显示行间隔色
                    cache: false,                       //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
                    pagination: true,                   //是否显示分页(*)
                    sortable: false,                     //是否启用排序
                    sortOrder: "asc",                   //排序方式
                    paginationDetailHAlign: ' hidden',//去掉分页信息,这里注意hidden前面有个空格,样式加上.hidden{display:none;}
                    queryParams: oTableInitPersonnel.queryParams,            //传递参数
                    sidePagination: "server",           //分页方式:client客户端分页,server服务端分页(*)
                    pageNumber: 1,                       //初始化加载第一页,默认第一页
                    //singleSelect: true,//单行选择单行,设置为true将禁止多选
                    pageSize: 7,                       //每页的记录行数(*)
                    //showColumns: true,               //是否显示 内容列下拉框
                    pageList: [7, 30, 50, 100],        //可供选择的每页的行数(*)
                    search: false,                       //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大
                    strictSearch: false,
                    //showColumns: true,                  //是否显示所有的列
                    showRefresh: false,                  //是否显示刷新按钮
                    minimumCountColumns: 2,             //最少允许的列数
                    clickToSelect: false,                //是否启用点击选中行
                    //height: 500,                      //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
                    //uniqueId: "UserID",                 //每一行的唯一标识,一般为主键列
                    showToggle: false,                   //是否显示详细视图和列表视图的切换按钮
                    cardView: false,                    //是否显示详细视图
                    detailView: false,                  //是否显示父子表
                    columns: columns,
                    responseHandler: responseHandler, //在渲染页面数据之前执行的方法,此配置很重要!!!!!!!
                    onLoadSuccess: function () {
                    },
                    onLoadError: function () {
                        layer.alert("@Resources.Global.DataLoadingFailed");
                    },
                    onDblClickRow: function (row, $element) {
                    },
                    onCheck: function (row, $element) {
                        if (row.TYPE == "营业执照") {
                            Judge++;
                            if (($("input[name='MasterCopyType']:checked").val() == 0 && Judge >= 2) || ($("input[name='MasterCopyType']:checked").val() == 3 && Judge >= 2)) {
                                layer.alert("只能选择一个营业执照");
                               
                            }
                        }
                    }
                });
            }

            //得到查询的参数
            oTableInitPersonnel.queryParams = function (params) {
                var page = {   //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的

                    PageSize: params.limit,   //页面显示行数
                    CurrentPage: (params.offset / params.limit) + 1,   //页码
                    Data: $("#SearchBusinessLicenseForm").serializeJsonObject(),
                    sort: params.sort      //排序列名
                    //sortOrder: params.order //排位命令(desc,asc)
                };
                return page;
            }
            return oTableInitPersonnel;
        }

 不知道是否满足你的需求,我在Demo中列举了一些API,也在demo中写了一个示例,我的示例需求是在选中行时触发,取消选中当前数据以外的行,你可以按照自己的需求改数组,可以试一下这个示例,希望能帮到你。  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>

谢谢大佬