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 相关文章推荐
对YUI扩展的Gird组件 Part-2
Mar 10 Javascript
理解JavaScript的prototype属性
Feb 11 Javascript
jquery 模板的应用示例
Nov 12 Javascript
jQuery大于号(&gt;)选择器的作用解释
Jan 13 Javascript
javascript实现dom动态创建省市纵向列表菜单的方法
May 14 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
获取当前月(季度/年)的最后一天(set相关操作及应用)
Dec 27 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
解决layui数据表格排序图标被超出的表头挤出去的问题
Sep 19 Javascript
JS面试题中深拷贝的实现讲解
May 07 Javascript
node脚手架搭建服务器实现token验证的方法
Jan 20 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
介绍几个array库的新函数 php
2006/12/29 PHP
DISCUZ 分页代码
2007/01/02 PHP
Ajax+PHP 边学边练 之二 实例
2009/11/24 PHP
vs中通过剪切板循环来循环粘贴不同内容
2011/04/30 PHP
PHP版 汉字转码的实现详解
2013/06/09 PHP
php一些错误处理的方法与技巧总结
2013/08/10 PHP
php遍历文件夹下的所有文件和子文件夹示例
2014/03/20 PHP
PHP实现的简易版图片相似度比较
2015/01/07 PHP
php封装好的人民币数值转中文大写类
2015/12/20 PHP
Symfony核心类概述
2016/03/17 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
laravel 框架结合关联查询 when()用法分析
2019/11/22 PHP
BOOM vs RR BO5 第二场 2.14
2021/03/10 DOTA
JavaScript学习笔记(十)
2010/01/17 Javascript
Dom 结点创建 基础知识
2011/10/01 Javascript
Javascript设置对象的ReadOnly属性(示例代码)
2013/12/25 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
javascript弹出带文字信息的提示框效果
2016/07/19 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
React Native使用fetch实现图片上传的示例代码
2018/03/07 Javascript
在vue-cli创建的项目中使用sass操作
2020/08/10 Javascript
VSCode插件安装完成后的配置(常用配置)
2020/08/24 Javascript
Vue.js原理分析之nextTick实现详解
2020/09/07 Javascript
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
wxPython电子表格功能wx.grid实例教程
2019/11/19 Python
python2和python3哪个使用率高
2020/06/23 Python
python 实现性别识别
2020/11/21 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
英文留学推荐信范文
2014/01/25 职场文书
和解协议书
2014/04/16 职场文书
2014年9.18纪念日演讲稿
2014/09/14 职场文书
2015年图书馆个人工作总结
2015/05/26 职场文书