bootstrap table 多選框分頁保留示例代碼
在使用bootstrap table的復(fù)選框功能的時(shí)候,由于采用服務(wù)端分頁,當(dāng)在第一頁選擇了某些數(shù)據(jù),然后點(diǎn)擊第二頁選擇一些數(shù)據(jù),再次點(diǎn)回第一頁,發(fā)現(xiàn)原先選擇的數(shù)據(jù)已經(jīng)清空了,原來的多選框并不支持翻頁保留多選數(shù)據(jù)。
解決思路:
在分頁的時(shí)候,吧原先選擇的數(shù)據(jù)用一個(gè)全局變量保存,當(dāng)再次翻頁回來時(shí),判斷當(dāng)前頁數(shù)據(jù)是否存在于保存的數(shù)據(jù)數(shù)組中,存在則狀態(tài)為選擇。當(dāng)然當(dāng)取消選擇的時(shí)候也要去刪除數(shù)組中相應(yīng)的數(shù)據(jù)。
為了解決這個(gè)問題,在查github上查文檔發(fā)現(xiàn)有人提出了這個(gè)問題,并且作者wenzhixin 也編寫了相應(yīng)的例子來演示,想看原問題的點(diǎn)擊打開鏈接。
想直接看示例的點(diǎn)擊打開鏈接
原示例是使用html方式來實(shí)現(xiàn)的表格,并使用服務(wù)端分頁。并且相關(guān)js方法并不完善,我也踩了很多坑,所以本博客在原作者編寫的示例的基礎(chǔ)上,做了相關(guān)更改,在此展示和說明:
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", //服務(wù)端分頁 idField:"id", pageSize: 10, responseHandler:responseHandler, //在渲染頁面數(shù)據(jù)之前執(zhí)行的方法,此配置很重要!!!!!!! columns: [ {field: 'checkStatus',checkbox: true}, //給多選框賦一個(gè)field值為“checkStatus”用于更改選擇狀態(tài)!!!!! {field: 'id',visible:false}, {field: 'orderNumber',title: "訂單編號",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); }); }); //表格分頁之前處理多選框數(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; }
原示例中并沒有給出union和difference方法,是我自己按著思路實(shí)現(xiàn)的。開始并沒有實(shí)現(xiàn)此功能,后來發(fā)現(xiàn)要給checkbox字段加上一個(gè)filed字段,并與responseHandler方法中更改的row字段一致,才能實(shí)現(xiàn)功能。
以上所述是小編給大家介紹的bootstrap table 多選框分頁保留示例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript canvas實(shí)現(xiàn)環(huán)形漸變進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)環(huán)形漸變進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06JS+CSS實(shí)現(xiàn)消息的點(diǎn)擊展示和隱藏(H5端)
在 H5 端,我們經(jīng)常需要實(shí)現(xiàn)類似于點(diǎn)擊按鈕來展示或隱藏消息的功能,以下是一個(gè)使用 CSS 和 JavaScript(配合 Vue.js)來實(shí)現(xiàn)這個(gè)效果的簡單示例,需要的朋友可以參考下2023-10-10微信小程序用swiper實(shí)現(xiàn)滑動刻度尺
這篇文章主要為大家詳細(xì)介紹了微信小程序用swiper實(shí)現(xiàn)滑動刻度尺,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-06-06javascript實(shí)現(xiàn)點(diǎn)擊按鈕變色
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)點(diǎn)擊按鈕變色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07