可乐儿儿 2020-12-07 09:14 采纳率: 100%
浏览 652
已采纳

bootstrapTable中怎么使用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;
        }

  • 写回答

2条回答 默认 最新

  • 程序媛zcx 2020-12-08 16:42
    关注

     不知道是否满足你的需求,我在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>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥60 版本过低apk如何修改可以兼容新的安卓系统
  • ¥25 由IPR导致的DRIVER_POWER_STATE_FAILURE蓝屏
  • ¥50 有数据,怎么建立模型求影响全要素生产率的因素
  • ¥50 有数据,怎么用matlab求全要素生产率
  • ¥15 TI的insta-spin例程
  • ¥15 完成下列问题完成下列问题
  • ¥15 C#算法问题, 不知道怎么处理这个数据的转换
  • ¥15 YoloV5 第三方库的版本对照问题
  • ¥15 请完成下列相关问题!
  • ¥15 drone 推送镜像时候 purge: true 推送完毕后没有删除对应的镜像,手动拷贝到服务器执行结果正确在样才能让指令自动执行成功删除对应镜像,如何解决?