您好,登錄后才能下訂單哦!
在使用bootstrap table的復(fù)選框功能的時(shí)候,由于采用服務(wù)端分頁(yè),當(dāng)在第一頁(yè)選擇了某些數(shù)據(jù),然后點(diǎn)擊第二頁(yè)選擇一些數(shù)據(jù),再次點(diǎn)回第一頁(yè),發(fā)現(xiàn)原先選擇的數(shù)據(jù)已經(jīng)清空了,原來(lái)的多選框并不支持翻頁(yè)保留多選數(shù)據(jù)。
解決思路:
在分頁(yè)的時(shí)候,吧原先選擇的數(shù)據(jù)用一個(gè)全局變量保存,當(dāng)再次翻頁(yè)回來(lái)時(shí),判斷當(dāng)前頁(yè)數(shù)據(jù)是否存在于保存的數(shù)據(jù)數(shù)組中,存在則狀態(tài)為選擇。當(dāng)然當(dāng)取消選擇的時(shí)候也要去刪除數(shù)組中相應(yīng)的數(shù)據(jù)。
為了解決這個(gè)問(wèn)題,在查github上查文檔發(fā)現(xiàn)有人提出了這個(gè)問(wèn)題,并且作者wenzhixin 也編寫(xiě)了相應(yīng)的例子來(lái)演示,想看原問(wèn)題的點(diǎn)擊打開(kāi)鏈接。
想直接看示例的點(diǎn)擊打開(kāi)鏈接
原示例是使用html方式來(lái)實(shí)現(xiàn)的表格,并使用服務(wù)端分頁(yè)。并且相關(guān)js方法并不完善,我也踩了很多坑,所以本博客在原作者編寫(xiě)的示例的基礎(chǔ)上,做了相關(guān)更改,在此展示和說(shuō)明:
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, //顯示分頁(yè) clickToSelect:true, //是否選中 maintainSelected:true, sidePagination: "server", //服務(wù)端分頁(yè) idField:"id", pageSize: 10, responseHandler:responseHandler, //在渲染頁(yè)面數(shù)據(jù)之前執(zhí)行的方法,此配置很重要!!!!!!! columns: [ {field: 'checkStatus',checkbox: true}, //給多選框賦一個(gè)field值為“checkStatus”用于更改選擇狀態(tài)!!!!! {field: 'id',visible:false}, {field: 'orderNumber',title: "訂單編號(hào)",align:'center',width:'10%'} ] }); //選中事件操作數(shù)組 var union = function(array,ids){ $.each(ids, function (i, id) { if($.inArray(id,array)==-1){ array[array.length] = id; } }); return array; }; //取消選中事件操作數(shù)組 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); }); }); //表格分頁(yè)之前處理多選框數(shù)據(jù) function responseHandler(res) { $.each(res.rows, function (i, row) { row.checkStatus = $.inArray(row.id, selectionIds) != -1; //判斷當(dāng)前行的數(shù)據(jù)id是否存在與選中的數(shù)組,存在則將多選框狀態(tài)變?yōu)閠rue }); return res; }
原示例中并沒(méi)有給出union和difference方法,是我自己按著思路實(shí)現(xiàn)的。開(kāi)始并沒(méi)有實(shí)現(xiàn)此功能,后來(lái)發(fā)現(xiàn)要給checkbox字段加上一個(gè)filed字段,并與responseHandler方法中更改的row字段一致,才能實(shí)現(xiàn)功能。
以上所述是小編給大家介紹的bootstrap table 多選框分頁(yè)保留示例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。