溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在使用bootstrap table的復選框功能的時候，由于采用服務端分頁，當在第一頁選擇了某些數據，然后點擊第二頁選擇一些數據，再次點回第一頁，發現原先選擇的數據已經清空了，原來的多選框并不支持翻頁保留多選數據。
解決思路：
在分頁的時候，吧原先選擇的數據用一個全局變量保存，當再次翻頁回來時，判斷當前頁數據是否存在于保存的數據數組中，存在則狀態為選擇。當然當取消選擇的時候也要去刪除數組中相應的數據。
為了解決這個問題，在查github上查文檔發現有人提出了這個問題，并且作者wenzhixin 也編寫了相應的例子來演示，想看原問題的點擊打開鏈接。
想直接看示例的點擊打開鏈接
原示例是使用html方式來實現的表格，并使用服務端分頁。并且相關js方法并不完善，我也踩了很多坑，所以本博客在原作者編寫的示例的基礎上，做了相關更改，在此展示和說明：
var $table;
var selectionIds = []; //保存選中ids
$(function () {
$table = $("#example1").bootstrapTable({
contentType:"application/x-www-form-urlencoded; charset=UTF-8", //初始化編碼
url:'<%=basePath%>/order/queryOrderList',
method: 'post',
striped:true, //奇偶行漸色表
pagination:true, //顯示分頁
clickToSelect:true, //是否選中
maintainSelected:true,
sidePagination: "server", //服務端分頁
idField:"id",
pageSize: 10,
responseHandler:responseHandler, //在渲染頁面數據之前執行的方法，此配置很重要!!!!!!!
columns: [
{field: 'checkStatus',checkbox: true}, //給多選框賦一個field值為“checkStatus”用于更改選擇狀態!!!!!
{field: 'id',visible:false},
{field: 'orderNumber',title: "訂單編號",align:'center',width:'10%'}
]
});
//選中事件操作數組
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};
//綁定選中事件、取消事件、全部選中、全部取消
$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) {
return row.id;
});
func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
selectionIds = _[func](selectionIds, ids);
});
});
//表格分頁之前處理多選框數據
function responseHandler(res) {
$.each(res.rows, function (i, row) {
row.checkStatus = $.inArray(row.id, selectionIds) != -1; //判斷當前行的數據id是否存在與選中的數組，存在則將多選框狀態變為true
});
return res;
}
原示例中并沒有給出union和difference方法，是我自己按著思路實現的。開始并沒有實現此功能，后來發現要給checkbox字段加上一個filed字段，并與responseHandler方法中更改的row字段一致，才能實現功能。
以上所述是小編給大家介紹的bootstrap table 多選框分頁保留示例代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
