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 相关文章推荐
json简单介绍
Jun 10 Javascript
jquery select(列表)的操作(取值/赋值)
Aug 06 Javascript
Extjs列表详细信息窗口新建后自动加载解决方法
Apr 02 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
JavaScript中常用的运算符小结
Jan 18 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
JS异常处理的一个想法(sofish)
Mar 14 Javascript
jQuery中Dom的基本操作小结
Jan 23 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
Oct 10 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
JavaScript数组去重实现方法小结
Jan 17 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 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.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
PHP抓取及分析网页的方法详解
2016/04/26 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
jQuery初学:find()方法及children方法的区别分析
2011/01/31 Javascript
jquery构造器的实现代码小结
2011/05/16 Javascript
Javascript浮点数乘积运算出现多位小数的解决方法
2014/02/17 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
JavaScript中字符串(string)转json的2种方法
2015/06/25 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
JS定时器使用,定时定点,固定时刻,循环执行详解
2016/05/31 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
2016/06/14 Javascript
在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口的方法
2016/08/05 Javascript
JavaScript省市级联下拉菜单实例
2017/02/14 Javascript
js实现自定义进度条效果
2017/03/15 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
2019/03/30 Javascript
Vue.js组件使用props传递数据的方法
2019/10/19 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
Python使用QQ邮箱发送Email的方法实例
2017/02/09 Python
基于python中pygame模块的Linux下安装过程(详解)
2017/11/09 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
Python文件操作中进行字符串替换的方法(保存到新文件/当前文件)
2019/06/28 Python
Python字符串格式化输出代码实例
2019/11/22 Python
TensorFlow 多元函数的极值实例
2020/02/10 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
HTML5 Canvas实现360度全景图的示例代码
2018/01/29 HTML / CSS
英国最出名高街品牌:Forever Unique
2018/02/24 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
数控技术专业毕业自荐书范文
2014/02/05 职场文书
企业办公室主任岗位职责
2014/02/19 职场文书
幸福家庭事迹材料
2014/12/20 职场文书
六一儿童节新闻稿
2015/07/17 职场文书
《堡垒之夜》联动《刺客信条》 4月7日正式上线
2022/04/06 其他游戏