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入门教程(12) js对象化编程
Jan 31 Javascript
JavaScript 创建运动框架的实现代码
May 08 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
Javascript表单验证要注意的事项
Sep 29 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
JavaScript中instanceof运算符的使用示例
Jun 08 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
详解Vue 开发模式下跨域问题
Jun 06 Javascript
详解JS构造函数中this和return
Sep 16 Javascript
浅谈Vue.use的使用
Aug 29 Javascript
Koa代理Http请求的示例代码
Oct 10 Javascript
vue实现多条件和模糊搜索功能
May 28 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 strtotime函数详解
2009/12/18 PHP
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
php制作中间带自己定义图片二维码的方法
2014/01/27 PHP
为百度UE编辑器上传图片添加水印功能
2015/04/16 PHP
PHP 中魔术常量的实例详解
2017/10/26 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
laravel 实现关闭CSRF(全部关闭、部分关闭)
2019/10/21 PHP
js限制textarea每行输入字符串长度的代码
2012/10/31 Javascript
Jquery ajaxStart()与ajaxStop()方法(实例讲解)
2013/12/18 Javascript
js二维数组定义和初始化的三种方法总结
2014/03/03 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
jQuery内容过滤选择器用法分析
2015/02/10 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
深入理解requestAnimationFrame的动画循环
2016/09/20 Javascript
form表单转Json提交的方法(推荐)
2016/09/23 Javascript
js中json处理总结之JSON.parse
2016/10/14 Javascript
JS获取日期的方法实例【昨天,今天,明天,前n天,后n天的日期】
2017/09/28 Javascript
jQuery使用each遍历循环的方法
2018/09/19 jQuery
webpack开发环境和生产环境的深入理解
2018/11/08 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
Python 装饰器实现DRY(不重复代码)原则
2018/03/05 Python
Python实现基于TCP UDP协议的IPv4 IPv6模式客户端和服务端功能示例
2018/03/22 Python
在python3.5中使用OpenCV的实例讲解
2018/04/02 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
python 多线程重启方法
2019/02/18 Python
python3 tkinter实现点击一个按钮跳出另一个窗口的方法
2019/06/13 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
html5 利用重力感应实现摇一摇换颜色可用来做抽奖等等
2014/05/07 HTML / CSS
Bluebella德国官网:英国性感内衣和睡衣品牌
2019/11/08 全球购物
学生无故旷课检讨书
2014/09/20 职场文书
群众路线党员自我评议范文2014
2014/09/24 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
2015年领导干部廉洁自律工作总结
2015/05/26 职场文书
公司备用金管理制度
2015/08/04 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书