1.表格初始化
$('#businessTypeTable').bootstrapTable({
//请求方法
method: 'post',
//类型json
dataType: "json",
contentType: "application/x-www-form-urlencoded",
//最低显示2行
minimumCountColumns: 2,
//是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
cache: false,
//排序方式
sortOrder: "asc",
//初始化加载第一页,默认第一页
pageNumber:1,
//每页的记录行数(*)
pageSize: 50,
//可供选择的每页的行数(*)
pageList: [50, 100],
responseHandler:responseHandler, //在渲染页面数据之前执行的方法,此配置很重要!!!!!!!
striped:true, //奇偶行渐色表
pagination:true, //显示分页
clickToSelect:true, //是否选中
maintainSelected:true,
sidePagination: "server", //服务端分页
idField:"id",
//这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
url: url,
//默认值为 'limit',传给服务端的参数为:limit, offset, search, sort, order Else
//queryParamsType:'',
////查询参数,每次调用是会带上这个参数,可自定义
queryParams : function(params) {
var searchParam = $("#searchForm").serializeJSON();
searchParam.pageNo = params.limit === undefined? "1" :params.offset/params.limit+1;
searchParam.pageSize = params.limit === undefined? -1 : params.limit;
searchParam.orderBy = params.sort === undefined? "" : params.sort+ " "+ params.order;
return searchParam;
},
onContextMenuItem: function(row, $el){
},
onClickRow: function(row, $el){
},
onShowSearch: function () {
$("#search-collapse").slideToggle();
},
columns: [{
field:'status',
checkbox: true
}, {
field: 'id',
visible:false,
},
columns
]
});
//responseHandler(res);
}
2.js处理
var selectionIds = []; //保存选中ids
$(document).ready(function () {
//选中事件操作数组
var union = function(array,ids){
$.each(ids, function (i, id) {
if($.inArray(id,array)==-1){
array[array.length] = id;
}
});
return array;
};
//取消选中事件操作数组
var difference = function(array,ids){
$.each(ids, function (i, id) {
var index = $.inArray(id,array);
if(index!=-1){
array.splice(index, 1);
}
});
return array;
};
var _ = {"union":union,"difference":difference};
//绑定选中事件、取消事件、全部选中、全部取消
$("#businessTypeTable").on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows) {
debugger;
var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
return row.id; //你的id的名称是什么
});
func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
selectionIds = _[func](selectionIds, ids);
});
});
//表格分页之前处理多选框数据
function responseHandler(res) {
$.each(res.rows, function (i, row) {
debugger;
row.status = $.inArray(row.id, selectionIds) != -1; //判断当前行的数据id是否存在与选中的数组,存在则将多选框状态变为true
});
return res;
}
参考文档:https://github.com/wenzhixin/bootstrap-table/issues/917