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 相关文章推荐
xml转json的js代码
Aug 28 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
javascript学习笔记--数字格式类型
May 22 Javascript
jquery任意位置浮动固定层插件用法实例
May 29 Javascript
jquery Deferred 快速解决异步回调的问题
Apr 05 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
turn.js异步加载实现翻书效果
Jul 25 Javascript
Vue.js如何使用Socket.IO的示例代码
Sep 05 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中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
php防止恶意刷新与刷票的方法
2014/11/21 PHP
memcache一致性hash的php实现方法
2015/03/05 PHP
php实现的mongodb操作类
2015/05/28 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
JQuery最佳实践之精妙的自定义事件
2010/08/11 Javascript
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
基于jquery的网站幻灯片切换效果焦点图代码
2013/09/15 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
Jquery实现控件的隐藏和显示实例
2014/02/08 Javascript
javascript实例--教你实现扑克牌洗牌功能
2014/05/15 Javascript
js中一维数组和二位数组中的几个问题示例说明
2014/07/17 Javascript
node.js中的path.extname方法使用说明
2014/12/09 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
2016/09/15 Javascript
Javascript动画效果(4)
2016/10/11 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
2016/12/14 Javascript
纯js实现html转pdf的简单实例(推荐)
2017/02/16 Javascript
JavaScript编写的网页小游戏,很给力
2017/08/18 Javascript
js实现HTML中Select二级联动的实例
2018/01/05 Javascript
React+Antd+Redux实现待办事件的方法
2019/03/14 Javascript
小程序如何获取多个formId实现详解
2019/09/20 Javascript
深入理解python中的浅拷贝和深拷贝
2016/05/30 Python
Sanic框架配置操作分析
2018/07/17 Python
解决pycharm每次新建项目都要重新安装一些第三方库的问题
2019/01/17 Python
Python序列化pickle模块使用详解
2020/03/05 Python
Pyspark获取并处理RDD数据代码实例
2020/03/27 Python
使用Python将语音转换为文本的方法
2020/08/10 Python
Java软件工程师综合面试题笔试题
2013/09/08 面试题
升职自荐信范文
2013/10/05 职场文书
幼儿园家长会邀请函
2014/01/15 职场文书
买房子个人收入证明
2014/01/16 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
2014年科技工作总结
2014/11/26 职场文书