亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

bootstrap table 多選框分頁保留示例代碼

 更新時(shí)間:2017年03月08日 08:45:58   作者:Agger_chen  
在使用bootstrap table的復(fù)選框功能的時(shí)候,由于采用服務(wù)端分頁,當(dāng)在第一頁選擇了某些數(shù)據(jù),然后點(diǎn)擊第二頁選擇一些數(shù)據(jù),再次點(diǎn)回第一頁,發(fā)現(xiàn)原先選擇的數(shù)據(jù)已經(jīng)清空了,原來的多選框并不支持翻頁保留多選數(shù)據(jù),怎么解決呢,下面小編給大家分享下解決思路

在使用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)度條

    JavaScript canvas實(shí)現(xiàn)環(huán)形漸變進(jìn)度條

    這篇文章主要為大家詳細(xì)介紹了JavaScript canvas實(shí)現(xiàn)環(huán)形漸變進(jìn)度條,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-06-06
  • JS+CSS實(shí)現(xiàn)消息的點(diǎn)擊展示和隱藏(H5端)

    JS+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)滑動刻度尺

    微信小程序用swiper實(shí)現(xiàn)滑動刻度尺

    這篇文章主要為大家詳細(xì)介紹了微信小程序用swiper實(shí)現(xiàn)滑動刻度尺,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-06-06
  • 讀JavaScript DOM編程藝術(shù)筆記

    讀JavaScript DOM編程藝術(shù)筆記

    讀JavaScript DOM編程藝術(shù)筆記,需要的朋友可以參考下。
    2011-11-11
  • 詳解javascript遍歷方式

    詳解javascript遍歷方式

    這篇文章主要介紹了詳解javascript遍歷方式,感興趣的小伙伴們可以參考一下
    2015-11-11
  • 微信小程序wx.request的簡單封裝

    微信小程序wx.request的簡單封裝

    這篇文章主要介紹了微信小程序wx.request的簡單封裝,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-11-11
  • javascript實(shí)現(xiàn)點(diǎn)擊按鈕變色

    javascript實(shí)現(xiàn)點(diǎn)擊按鈕變色

    這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)點(diǎn)擊按鈕變色,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • 用js實(shí)現(xiàn)鍵盤方向鍵翻頁功能的代碼

    用js實(shí)現(xiàn)鍵盤方向鍵翻頁功能的代碼

    用js實(shí)現(xiàn)鍵盤方向鍵翻頁功能的代碼...
    2007-06-06
  • javascript string字符串優(yōu)化問題

    javascript string字符串優(yōu)化問題

    今天看到一個(gè)很久的帖子說string連接優(yōu)化問題。于是自己也測試一下。寫了個(gè)很簡單的代碼
    2011-07-07
  • 詳解如何在JavaScript中使用裝飾器

    詳解如何在JavaScript中使用裝飾器

    Decorator裝飾器是ES7的時(shí)候提案的特性,目前處于Stage?3候選階段(2022年10月)。裝飾器簡單來說就是修改類和類方法的語法糖,很多面向?qū)ο笳Z言都有裝飾器這一特性。本文就來說說如何在JavaScript中使用裝飾器,需要的可以參考一下
    2022-10-10

最新評論