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 相关文章推荐
跟随鼠标旋转的文字
Nov 30 Javascript
IE6,IE7下js动态加载图片不显示错误
Jul 17 Javascript
解决jquery插件冲突的问题
Jan 23 Javascript
JS动态增加删除UL节点LI及相关内容示例
May 21 Javascript
js获取当前日期时间及其它操作汇总
Apr 17 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
微信小程序 弹窗自定义实例代码
Mar 08 Javascript
HTML5实现微信拍摄上传照片功能
Apr 21 Javascript
解决Vue打包之后文件路径出错的问题
Mar 06 Javascript
小程序实现短信登录倒计时
Jul 12 Javascript
uniapp电商小程序实现订单30分钟倒计时
Nov 01 Javascript
js实现自动锁屏功能
Jun 02 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
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
完美解决令人抓狂的zend studio 7代码提示(content Assist)速度慢的问题
2013/06/20 PHP
PHP导航下拉菜单的实现如此简单
2013/09/22 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
Javascript代码混淆综合解决方案-Javascript在线混淆器
2006/12/18 Javascript
面向对象的编程思想在javascript中的运用上部
2009/11/20 Javascript
javascript检测对象中是否存在某个属性判断方法小结
2013/05/19 Javascript
Jquery:ajax实现翻页无刷新功能代码
2013/08/05 Javascript
JS获取单击按钮单元格所在行的信息
2014/06/17 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
微信小程序 canvas API详解及实例代码
2016/10/08 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
vue mint-ui tabbar变组件使用
2018/05/04 Javascript
详解为生产环境编译Angular2应用的方法
2018/12/10 Javascript
jQuery操作元素的内容和样式完整实例分析
2020/01/10 jQuery
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
Python3读取zip文件信息的方法
2015/05/22 Python
Python中的列表生成式与生成器学习教程
2016/03/13 Python
Python实现计算图像RGB均值方式
2020/06/04 Python
10个python爬虫入门实例(小结)
2020/11/01 Python
耐克美国官网:Nike.com
2016/08/01 全球购物
英国女士和男士时尚服装网上购物:Top Labels Online
2018/03/25 全球购物
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
威盛公司软件C++工程师笔试题面试题
2012/07/16 面试题
请说出这段代码执行后a和b的值分别是多少
2015/03/28 面试题
运动会表扬稿大全
2014/01/16 职场文书
开工典礼策划方案
2014/05/23 职场文书
乡镇精神文明建设汇报材料
2014/08/15 职场文书
2014年最新学校运动会广播稿
2014/09/17 职场文书
安全生产隐患排查制度
2015/08/05 职场文书
python实现监听键盘
2021/04/26 Python
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android