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 cookies操作集合
Apr 12 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
Apr 08 Javascript
Javascript获取HTML静态页面参数传递值示例
Aug 18 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
JS操作XML实例总结(加载与解析XML文件、字符串)
Dec 08 Javascript
JSON 数据详解及实例代码分析
Jan 20 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
JSONP基础知识详解
Mar 19 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
May 21 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 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中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
php的mssql数据库连接类实例
2014/11/28 PHP
php实现生成带二维码图片并强制下载功能
2018/02/24 PHP
PHP扩展mcrypt实现的AES加密功能示例
2019/01/29 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
JavaScript 继承使用分析
2011/05/12 Javascript
jQuery实现可收缩展开的级联菜单实例代码
2013/11/27 Javascript
了不起的node.js读书笔记之例程分析
2014/12/22 Javascript
js判断是否按下了Shift键的方法
2015/01/27 Javascript
javascript绘制漂亮的心型线效果完整实例
2016/02/02 Javascript
jquery使用on绑定a标签无效 只能用live解决
2016/06/02 Javascript
JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
2016/06/21 Javascript
jQuery实现获取元素索引值index的方法
2016/09/18 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
原生js编写2048小游戏
2017/03/17 Javascript
详解Weex基于Vue2.0开发模板搭建
2017/03/20 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
AngularJS 中的数据源的循环输出
2017/10/12 Javascript
vue+axios 前端实现登录拦截的两种方式(路由拦截、http拦截)
2018/10/24 Javascript
python字符串连接方式汇总
2014/08/21 Python
python使用tensorflow深度学习识别验证码
2018/04/03 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
Django生成PDF文档显示网页上以及PDF中文显示乱码的解决方法
2019/12/17 Python
Django Admin后台添加数据库视图过程解析
2020/04/01 Python
Python如何读写CSV文件
2020/08/13 Python
Python hashlib和hmac模块使用方法解析
2020/12/08 Python
html5使用canvas画三角形
2014/12/15 HTML / CSS
Html5页面获取微信公众号的openid的方法
2020/05/12 HTML / CSS
AC Lens:购买隐形眼镜
2017/02/26 全球购物
Pretty Green美国:英式摇滚服饰风格代表品牌之一
2019/01/23 全球购物
美国便宜的横幅和标志印刷在线:Best of Signs
2019/05/29 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
集团公司人力资源部岗位职责
2014/01/03 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
关于青春的演讲稿800字
2014/08/22 职场文书
详解redis在微服务领域的贡献
2021/10/16 Redis