最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

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

在使用bootstrap table的復(fù)選框功能的時候,由于采用服務(wù)端分頁,當(dāng)在第一頁選擇了某些數(shù)據(jù),然后點擊第二頁選擇一些數(shù)據(jù),再次點回第一頁,發(fā)現(xiàn)原先選擇的數(shù)據(jù)已經(jīng)清空了,原來的多選框并不支持翻頁保留多選數(shù)據(jù)。

解決思路:

在分頁的時候,吧原先選擇的數(shù)據(jù)用一個全局變量保存,當(dāng)再次翻頁回來時,判斷當(dāng)前頁數(shù)據(jù)是否存在于保存的數(shù)據(jù)數(shù)組中,存在則狀態(tài)為選擇。當(dāng)然當(dāng)取消選擇的時候也要去刪除數(shù)組中相應(yīng)的數(shù)據(jù)。

為了解決這個問題,在查github上查文檔發(fā)現(xiàn)有人提出了這個問題,并且作者wenzhixin 也編寫了相應(yīng)的例子來演示,想看原問題的點擊打開鏈接。

想直接看示例的點擊打開鏈接

原示例是使用html方式來實現(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}, //給多選框賦一個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方法,是我自己按著思路實現(xiàn)的。開始并沒有實現(xiàn)此功能,后來發(fā)現(xiàn)要給checkbox字段加上一個filed字段,并與responseHandler方法中更改的row字段一致,才能實現(xiàn)功能。

以上所述是小編給大家介紹的bootstrap table 多選框分頁保留示例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持!

相關(guān)文章

  • 全屏滾動插件fullPage.js使用實例解析

    全屏滾動插件fullPage.js使用實例解析

    這篇文章主要為大家解析了全屏滾動插件fullPage.js使用實例,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-10-10
  • Javascript中級語法快速入手

    Javascript中級語法快速入手

    本文是一篇關(guān)于Javascript的中級進(jìn)階總結(jié)。小編希望大家能夠在30分鐘之內(nèi)閱讀完并認(rèn)真體會,多敲代碼,多總結(jié),畢竟Javascript本身并不難。
    2016-07-07
  • amd、cmd、esmodule、commonjs區(qū)別詳解

    amd、cmd、esmodule、commonjs區(qū)別詳解

    本文主要介紹了amd、cmd、esmodule、commonjs區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2023-04-04
  • JS利用?clip-path?實現(xiàn)動態(tài)區(qū)域裁剪功能

    JS利用?clip-path?實現(xiàn)動態(tài)區(qū)域裁剪功能

    這篇文章主要介紹了JS利用?clip-path?實現(xiàn)動態(tài)區(qū)域裁剪功能,文中主要通過使用 box-shadow 實現(xiàn),代碼簡單易懂,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-12-12
  • JavaScript中???、??=、?.和?||的區(qū)別淺析

    JavaScript中???、??=、?.和?||的區(qū)別淺析

    在?JS?中,???運算符被稱為非空運算符,下面這篇文章主要給大家介紹了關(guān)于JavaScript中???、??=、?.和?||區(qū)別的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-08-08
  • thinkjs微信中控之微信鑒權(quán)登陸的實現(xiàn)代碼

    thinkjs微信中控之微信鑒權(quán)登陸的實現(xiàn)代碼

    這篇文章主要介紹了thinkjs微信中控之微信鑒權(quán)登陸的實現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • js實現(xiàn)類似菜單風(fēng)格的TAB選項卡效果代碼

    js實現(xiàn)類似菜單風(fēng)格的TAB選項卡效果代碼

    這篇文章主要介紹了js實現(xiàn)類似菜單風(fēng)格的TAB選項卡效果代碼,通過javascript鼠標(biāo)事件及頁面元素遍歷實現(xiàn)tab切換的功能,非常簡單實用,需要的朋友可以參考下
    2015-08-08
  • 微信小程序開發(fā)之實現(xiàn)一個跑步小程序

    微信小程序開發(fā)之實現(xiàn)一個跑步小程序

    本文將開發(fā)一個簡易的微信跑步小程序,用到的方法是wx.onLocationChange,可以監(jiān)聽實時地理位置變化事件,感興趣的小伙伴可以了解一下
    2022-08-08
  • 函數(shù)式 JavaScript(一)簡介

    函數(shù)式 JavaScript(一)簡介

    JavaScript 是一種強(qiáng)大但被誤解的語言。關(guān)于它到底是一種面向?qū)ο蟮恼Z言還是函數(shù)式語言,人們眾說紛紜——但是現(xiàn)在讓我們把這些爭辯都拋到腦后。
    2014-07-07
  • 一篇文章帶你淺入webpack的DLL優(yōu)化打包

    一篇文章帶你淺入webpack的DLL優(yōu)化打包

    這篇文章主要介紹了一篇文章帶你淺入webpack的DLL優(yōu)化打包,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-02-02

最新評論

澄迈县| 吴江市| 漠河县| 辰溪县| 延安市| 布尔津县| 林芝县| 筠连县| 新田县| 获嘉县| 敦煌市| 桂阳县| 汾西县| 宝鸡市| 五莲县| 泰宁县| 河北区| 株洲市| 孙吴县| 岑巩县| 二连浩特市| 清新县| 唐海县| 宜城市| 鄂温| 青州市| 麻阳| 长乐市| 明水县| 鹿邑县| 绩溪县| 汉源县| 泽库县| 邢台市| 齐齐哈尔市| 荃湾区| 冕宁县| 卓尼县| 察哈| 大连市| 东宁县|