jqGrid翻页时数据选中丢失问题的解决办法


Posted in Javascript onFebruary 13, 2017

我在项目中使用jqGrid时,采用异步加载服务器数据,例如点击翻页、搜索时都重新加载数据。这样就会产生一个问题。

问题描述:

当对列表批量删除时,可以选择多个记录信息,选择当前页的第一条,如图:

jqGrid翻页时数据选中丢失问题的解决办法 

点击下一页再选择一些记录,点击删除时,则无法删除前面页所选择的记录。

解决办法:jqGrid貌似没有解决这个问题的方法,所以只能自己写代码保存所选择的记录。需要借助jqGrid的两个事件方法:

/**
multiselect为ture,且点击头部的checkbox时才会触发此事件。aRowids:所有选中行的id集合,为一个数组。status:boolean变量说明checkbox的选择状态,true选中false不选中。无论checkbox是否选择,aRowids始终有 值
**/
onSelectAll(aRowids,status)
/**
当选择行时触发此事件。rowid:当前行id;status:选择状态,当multiselect 为true时此参数才可用
**/
onSelectRow(aRowids,status)

大体代码

//保存选择记录的数组
var selectIds = new Array();
jQuery("#gridid").jqGrid({ 
 onSelectAll:function(aRowids,status){
  if(status==true){ 
   $.each(aRowids,function(i,item){
     saveIdToArray(item);
   })
  }else{
   $.each(aRowids,function(i,item){
    deleteIdFromArray(item);
  })
  }
  }, 
 onSelectRow:function(aRowids,status){
  if(status==true){ //选择
   saveIdToArray(aRowids);
  }else{ //取消选择
   deleteIdFromArray(aRowids);
  }
 }
 })
//保存到数组
function saveIdToArray(item){
 var exit = false;
 for(var i = 0;i < selectIds.length;i++){
  if(item == selectIds[i]){
   exit = true;
   break;
  }
 } 
 selectAssets.push(item);
 }
  }
//从数组中删除
function deleteIdFromArray(item){
 if(selectIds.length > 0){
  for(var i = 0;i < selectIds.length;i++){
   if(item == selectIds[i]){
    selectIds.splice(i,1);
    break;
   }
  }
 }
}

操作时,只对数组进行操作就可以了。

以上所述是小编给大家介绍的jqGrid翻页时数据选中丢失问题的解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 图片上传预览-兼容标准
Jun 01 Javascript
AngularJS实现按钮提示与点击变色效果
Sep 07 Javascript
简单理解vue中track-by属性
Oct 26 Javascript
jQuery弹出窗口简单实现代码
Mar 09 Javascript
微信小程序模板和模块化用法实例分析
Nov 28 Javascript
vue.js使用watch监听路由变化的方法
Jul 08 Javascript
微信小程序有旋转动画效果的音乐组件实例代码
Aug 22 Javascript
JavaScript实用代码小技巧
Aug 23 Javascript
了解JavaScript函数中的默认参数
May 30 Javascript
Vue项目中ESlint规范示例代码
Jul 04 Javascript
Vue 自定义指令实现一键 Copy功能
Sep 16 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
jQuery实现用户输入自动完成功能
Feb 13 #Javascript
微信小程序 详解页面跳转与返回并回传数据
Feb 13 #Javascript
微信小程序 this和that详解及简单实例
Feb 13 #Javascript
脚本div实现拖放功能(两种)
Feb 13 #Javascript
bootstrap table 数据表格行内修改的实现代码
Feb 13 #Javascript
判断横屏竖屏(三种)
Feb 13 #Javascript
详解javascript立即执行函数表达式IIFE
Feb 13 #Javascript
You might like
纯php打造的tab选项卡效果代码(不用js)
2010/12/29 PHP
php显示页码分页类的封装
2017/06/08 PHP
thinkphp查询,3.X 5.0方法(亲试可行)
2017/06/17 PHP
关于Curl在Swoole协程中的解决方案详析
2019/09/12 PHP
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
改变文件域的样式实现思路同时兼容ie、firefox
2013/10/23 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
2015/12/03 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
2016/05/18 Javascript
浅谈jQuery绑定事件会叠加的解决方法和心得总结
2016/10/26 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
基于$.ajax()方法从服务器获取json数据的几种方式总结
2018/01/31 Javascript
使用ngrok+express解决本地环境中微信接口调试问题
2018/02/26 Javascript
Vue 实现手动刷新组件的方法
2019/02/19 Javascript
JS大坑之19位数的Number型精度丢失问题详解
2019/04/22 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
python判断端口是否打开的实现代码
2013/02/10 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
Python实现向服务器请求压缩数据及解压缩数据的方法示例
2017/06/09 Python
python代码 FTP备份交换机配置脚本实例解析
2019/08/01 Python
使用 python pyautogui实现鼠标键盘控制功能
2019/08/04 Python
django drf框架自带的路由及最简化的视图
2019/09/10 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
使用OpenCV获取图片连通域数量,并用不同颜色标记函
2020/06/04 Python
python爬虫如何解决图片验证码
2021/02/14 Python
HTML5 实现图片上传预处理功能
2020/02/06 HTML / CSS
船餐厅和泰晤士河餐饮游轮:Bateaux London
2018/03/19 全球购物
Lancome兰蔻官方旗舰店:来自法国的世界知名美妆品牌
2018/06/14 全球购物
苹果音乐订阅:Apple Music
2018/08/02 全球购物
报社实习生自荐信
2014/01/24 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
2015年劳动部工作总结
2015/05/23 职场文书
银行资信证明
2015/06/17 职场文书
外科护士长工作总结
2015/08/12 职场文书
2016感恩父亲节主题广播稿
2015/12/18 职场文书
pdf论文中python画的图Type 3 fonts字体不兼容的解决方案
2021/04/24 Python
react antd实现动态增减表单
2021/06/03 Javascript