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 篱式条件判断
Aug 22 Javascript
腾讯的ip接口 方便获取当前用户的ip地理位置
Nov 25 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
jQuery实现表单步骤流程导航代码分享
Aug 28 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
前端实现文件的断点续传(前端文件提交+后端PHP文件接收)
Nov 04 Javascript
JS中的Replace()传入函数时的用法详解
Sep 11 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
关于layui flow loading占位图的实现方法
Sep 21 Javascript
vue使用swiper实现中间大两边小的轮播图效果
Nov 24 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
npm qs模块使用详解
Feb 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
深入mysql_fetch_row()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP Curl多线程原理实例详解
2013/11/06 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
js使用递归解析xml
2014/12/12 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
详解Matlab中 sort 函数用法
2016/03/20 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
2016/05/03 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
AngularJS中指令的四种基本形式实例分析
2016/11/22 Javascript
利用js+css+html实现固定table的列头不动
2016/12/08 Javascript
jQuery实现对象转为url参数的方法
2017/01/11 Javascript
JS中的BOM应用
2018/02/02 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
Vue前端判断数据对象是否为空的实例
2020/09/02 Javascript
python encode和decode的妙用
2009/09/02 Python
python根据距离和时长计算配速示例
2014/02/16 Python
跟老齐学Python之有容乃大的list(3)
2014/09/15 Python
python常见排序算法基础教程
2017/04/13 Python
tensorflow输出权重值和偏差的方法
2018/02/10 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
如何在Python中实现goto语句的方法
2019/05/18 Python
解决Jupyter NoteBook输出的图表太小看不清问题
2020/04/16 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
Python装饰器如何实现修复过程解析
2020/09/05 Python
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
html5唤醒APP小记
2019/03/27 HTML / CSS
使用html5 canvas绘制圆环动效
2019/06/03 HTML / CSS
Qoo10台湾站:亚洲领先的在线市场
2018/05/15 全球购物
致铅球运动员广播稿精选
2014/01/12 职场文书
八一建军节活动方案
2014/02/10 职场文书
体育课外活动总结
2014/07/08 职场文书
征用土地赔偿协议书
2014/09/26 职场文书
大学生暑期社会实践证明范本
2014/10/24 职场文书
大连星海广场导游词
2015/02/10 职场文书
Python如何使用logging为Flask增加logid
2021/03/30 Python