jqGrid翻页时数据选中丢失问题的解决办法

 更新时间:2017年02月13日 17:20:47   作者:益达还有么  
我在项目中使用jqGrid时,采用异步加载服务器数据,例如点击翻页、搜索时都重新加载数据。这篇文章主要介绍了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翻页时数据选中丢失问题的解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • 浅析JQuery获取和设置Select选项的常用方法总结

    浅析JQuery获取和设置Select选项的常用方法总结

    本篇文章是对JQuery获取和设置Select选项的一些常用方法进行了汇总介绍,有需要的朋友可以参考一下
    2013-07-07
  • 利用jquery获取select下拉框的值

    利用jquery获取select下拉框的值

    本篇文章主要介绍了利用jquery获取select下拉框的值,如果你jquery不是特别熟练,每次使用不常用的就要百度。那么这篇文章应该会有所帮助,需要的朋友可以过来参考下
    2016-11-11
  • jquery操作HTML5 的data-*的用法实例分享

    jquery操作HTML5 的data-*的用法实例分享

    从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。也就是说虽然 data-* 是在html5 中的元素, 但是如果使用 jquery 1.4.3库以上的.还是可以 在非HTML5的页面或浏览器里, 仍然可以使用.data(obj)方法来操作"data-*" 数据.
    2014-08-08
  • ajax请求data遇到的问题分析

    ajax请求data遇到的问题分析

    本篇文章为大家分析了在ajax进行数据请求的时候遇到的问题以及解决办法,一起参考学习下。
    2018-01-01
  • jQuery处理图片加载失败的常用方法

    jQuery处理图片加载失败的常用方法

    这篇文章主要介绍了jQuery处理图片加载失败的常用方法,实例演示了jQuery处理图片加载失败时提示加载失败及隐藏加载失败信息的方法,需要的朋友可以参考下
    2015-06-06
  • jQuery 三击事件实现代码

    jQuery 三击事件实现代码

    jQuery 中自带有双击事件,那么当需要三击某对象执行某个事件时怎么办呢?今天就让我们看看一段 jQuery 三击事件代码
    2013-09-09
  • AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法

    AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法

    这篇文章主要介绍了AMD异步模块定义介绍和Require.js中使用jQuery及jQuery插件的方法,需要的朋友可以参考下
    2014-06-06
  • jQuery简单入门示例之用户校验demo示例

    jQuery简单入门示例之用户校验demo示例

    这篇文章主要介绍了jQuery简单入门示例之用户校验demo示例,分析了基于jQuery的简单用户校验功能相关实现技巧,需要的朋友可以参考下
    2016-07-07
  • 60个很实用的jQuery代码开发技巧收集

    60个很实用的jQuery代码开发技巧收集

    这篇文章主要介绍了60个很实用的jQuery代码开发技巧收集,使用jquery的朋友可以参考下核心代码的使用,需要的朋友可以参考下
    2014-12-12
  • jQuery中eq()方法用法实例

    jQuery中eq()方法用法实例

    本篇文章为大家展示了如何在jquery中使用eq()方法,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获
    2015-01-01

最新评论