weixin_44292346
码狗可乐
采纳率100%
2020-12-07 09:14 阅读 195

bootstrapTable中怎么使用onCheck事件来实现某行取消CheckBox选中

5

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条回答 默认 最新

  • 已采纳
    qq_40015157 程序媛zcc 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 评论 复制链接分享
  • weixin_44292346 码狗可乐 2020-12-09 10:00

    谢谢大佬

    点赞 评论 复制链接分享

相关推荐