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>
答
谢谢大佬