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 相关文章推荐
jquery.simple.tree插件 更简单,兼容性更好的无限树插件
Sep 03 Javascript
ECMAScript 5中的属性描述符详解
Mar 02 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
深入理解JavaScript的React框架的原理
Jul 02 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
深入浅析jQuery对象$.html
Aug 22 Javascript
jQuery ajax 当async为false时解决同步操作失败的问题
Nov 18 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
BootStrap Fileinput的使用教程
Dec 30 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
Jul 19 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 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中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
深入理解JavaScript定时机制
2010/10/29 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
2013/12/05 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
jQuery选择id属性带有点符号元素的方法
2015/03/17 Javascript
详解javascript实现瀑布流列式布局
2016/01/29 Javascript
ES6概念 ymbol.for()方法
2016/12/25 Javascript
Jquery EasyUI $.Parser
2017/06/02 jQuery
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
在Vue中使用Compass的方法
2018/03/02 Javascript
微信小程序项目实践之验证码倒计时功能
2018/07/18 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
npx create-react-app xxx创建项目报错的解决办法
2020/02/17 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
2020/08/03 Javascript
浅谈js数组splice删除某个元素爬坑
2020/10/14 Javascript
Vue 数据绑定的原理分析
2020/11/16 Javascript
[06:20]2015国际邀请赛第三日top10
2015/08/08 DOTA
详解在Python中处理异常的教程
2015/05/24 Python
Python遍历文件夹和读写文件的实现代码
2016/08/28 Python
Python编程之微信推送模板消息功能示例
2017/08/21 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
通过 Python 和 OpenCV 实现目标数量监控
2020/01/05 Python
Django自定义全局403、404、500错误页面的示例代码
2020/03/08 Python
python 基于opencv实现图像增强
2020/12/23 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
欧洲最大的球衣网上商店:Kitbag
2017/11/11 全球购物
墨西哥网上超市:Superama
2018/07/10 全球购物
函授本科毕业生自我鉴定
2013/10/16 职场文书
优秀体育委员自荐书
2014/01/31 职场文书
面试通知短信
2015/04/20 职场文书
学生乘坐校车安全责任书
2015/05/11 职场文书
2019毕业论文致谢词
2019/06/24 职场文书
导游词之苏州寒山寺
2019/12/05 职场文书
宫崎骏十大动画电影,宫崎骏好看的动画电影排名
2022/03/22 日漫