此代码是针对于bootstrap table中分页的跨页全选。
以下是整个bootstrap的定义
<script type="text/javascript" src="http://cdn.jsdelivr.net/lodash/3.8.0/lodash.min.js"></script>//一定要引用这个js不然文档加载函数中的的_[func]不会生效
$table.bootstrapTable({
method: 'get',
url: queryUrl,
toolbar: '#toolbaruser', //工具按钮用哪个容器
height: $(window).height() - ,
striped: false, //是否显示行间隔色
pagination: true,
singleSelect: false, //是否多选
pageSize: ,
pageNumber: ,
showRefresh: true,
pageList: [],
search: false, //不显示 搜索框
// showColumns: true, //不显示下拉框（选择显示的列）
sidePagination: "server", //服务端请求
queryParams: queryParams,
showToggle: true,
clickToSelect: true,
responseHandler: responseHandler, //这里是引用的下面的responseHandler方法
// showExport: true, // exportDataType: "basic", minimunCountColumns: , columns: [{ field: 'state', checkbox: true }, { //field: 'Number',//可不加 title: '序号', //标题 可不加 formatter: function (value, row, index) { return index + ; } } , { title: '流水号', field: 'Id', sortable: true }, { field: 'UserName', title: '用户名', sortable: true }, { field: 'Number', title: '工号/学号', sortable: true }, { field: 'CreateName', title: '创建人', sortable: true }, { field: 'CreateTime', title: '创建时间', sortable: true }, { field: 'State', title: '状态', sortable: true, formatter: function (value, row) { return stateFormatter(value, row); } } ], onLoadSuccess: function () { }, onLoadError: function () { mif.showErrorMessageBox("数据加载失败！"); } });
在文档就绪函数中添加如下代码：
$(function () {
$table.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows) {
var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
debugger
return row.Id; //注意这里的row.id 中的id指的是列表的主键，替换成你使用的就行了比如 studentId等
});
debugger
func = $.inArray(e.type, ['check', 'check-all']) > - ? 'union' : 'difference';
selectionIds = _[func](selectionIds, ids);
});
});
添加responseHandler方法
此方法在bootstrap table中有定义，一定要加上
function responseHandler(res) {
debugger
$.each(res.rows, function (i, row) {
//注意这里的row.id 中的id指的是列表的主键，替换成你使用的就行了比如 studentId等
row.state = $.inArray(row.Id, selectionIds) !== -;
});
return res;
}
下面是全选按钮以及取消全选的click事件：
click事件的目的是获取bootstrap table中的所有数据的id
function checkall() {
$.ajax({
//async: false,
type: "POST",
data: {
State: $("#organization").val(),
OrgCode: $("#userrole").val(),
RoleCode: $("#name").val(),
UserName: $("#number").val()
},
url: 'GetAll',
dataType: 'text',
success: function (data) {
console.log(data)
selectionIds.splice(, selectionIds.length); //清空selectionIds数组
var arr = data.split(',');
console.log(arr);
for (var i = ; i < arr.length; i++) {
selectionIds.push(parseInt(arr[i]));
}
console.log(selectionIds)
query(); //query方法的目的主要是刷新表格
}
});
}
function cancel() {
selectionIds.splice(0, selectionIds.length); //
console.log(selectionIds)
query();
}
function query() {
$table.bootstrapTable('refresh');
}
以上就是bootstraptable的跨页全选，代码没贴完，但是认真读了，是没有问题的。
eg：此博客是本人原创，转载请注明出处。