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 相关文章推荐
jQuery 1.7.2中getAll方法的疑惑分析
May 23 Javascript
Jquery 选中表格一列并对表格排序实现原理
Dec 15 Javascript
javascript处理a标签超链接默认事件的方法
Jun 29 Javascript
javascript文本模板用法实例
Jul 31 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
使用JavaScript实现弹出层效果的简单实例
May 31 Javascript
EasyUI学习之Combobox下拉列表(1)
Dec 29 Javascript
动态加载css方法实现和深入解析
Jan 18 Javascript
Three.js利用dat.GUI如何简化试验流程详解
Sep 26 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 Javascript
Ajax请求超时与网络异常处理图文详解
May 23 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截取中文字符串的问题
2006/07/12 PHP
php版微信公众平台接口参数调试实现判断用户行为的方法
2016/09/23 PHP
使用phpQuery获取数组的实例
2017/03/13 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
PHP+ajax实现二级联动菜单功能示例
2018/08/10 PHP
Mac系统下搭建Nginx+php-fpm实例讲解
2020/12/15 PHP
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
通过复制Table生成word和excel的javascript代码
2014/01/20 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
js仿小米官网图片轮播特效
2016/09/29 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
微信头像地址失效踩坑记附带解决方案
2019/09/23 Javascript
javascript sort()对数组中的元素进行排序详解
2019/10/13 Javascript
[02:28]DOTA2 2015国际邀请赛中国区预选赛首日现场百态
2015/05/26 DOTA
Python解析命令行读取参数--argparse模块使用方法
2018/01/23 Python
浅谈Python反射 &amp; 单例模式
2019/03/21 Python
python爬虫 基于requests模块的get请求实现详解
2019/08/20 Python
tensorflow实现二维平面模拟三维数据教程
2020/02/11 Python
python实现批量转换图片为黑白
2020/06/16 Python
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
The Body Shop美体小铺西班牙官网:天然化妆品
2019/06/21 全球购物
积极分子思想汇报
2014/01/04 职场文书
优秀女职工事迹材料
2014/02/06 职场文书
感恩的演讲稿
2014/05/06 职场文书
广播节目策划方案
2014/05/23 职场文书
社区两委对照检查材料
2014/08/23 职场文书
2014年会计工作总结
2014/11/27 职场文书
2014年质量管理工作总结
2014/12/01 职场文书
先进事迹材料怎么写
2014/12/30 职场文书
武侯祠导游词
2015/02/04 职场文书
《亲亲我的妈妈》观后感(3篇)
2019/09/26 职场文书
使用CSS自定义属性实现骨架屏效果
2022/06/21 HTML / CSS