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 相关文章推荐
网页自动跳转代码收集
Sep 27 Javascript
Js 代码中,ajax请求地址后加随机数防止浏览器缓存的原因
May 07 Javascript
jquery的live使用注意事项
Feb 18 Javascript
js自动查找select下拉的菜单并选择(示例代码)
Feb 26 Javascript
javascript中局部变量和全局变量的区别详解
Feb 27 Javascript
JavaScript简单修改窗口大小的方法
Aug 03 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
jquery中ajax处理跨域的三大方式
Jan 05 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
自定义事件解决重复请求BUG的问题
Jul 11 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 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安全防范技巧分享
2011/11/03 PHP
利用ThinkPHP内置的ThinkAjax实现异步传输技术的实现方法
2011/12/19 PHP
php缓冲 output_buffering和ob_start使用介绍
2014/01/30 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
PHP实现加密文本文件并限制特定页面的存取的效果
2016/10/21 PHP
PHP基于GD2函数库实现验证码功能示例
2019/01/27 PHP
PHP编程一定要改掉的5个不良习惯
2020/09/18 PHP
基于jquery的内容循环滚动小模块(仿新浪微博未登录首页滚动微博显示)
2011/03/28 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
一个JavaScript变量声明的知识点
2013/10/28 Javascript
jquery捕捉回车键及获取checkbox值与异步请求的方法
2015/12/24 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
Node.js 获取微信JS-SDK CONFIG的方法示例
2019/05/21 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
2019/07/29 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
python 读取txt,json和hdf5文件的实例
2018/06/05 Python
python使用time、datetime返回工作日列表实例代码
2019/05/09 Python
Python微信操控itchat的方法
2019/05/31 Python
使用python分析统计自己微信朋友的信息
2019/07/19 Python
python join方法使用详解
2019/07/30 Python
python sqlite的Row对象操作示例
2019/09/11 Python
使用 Python 合并多个格式一致的 Excel 文件(推荐)
2019/12/09 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
python3列表删除大量重复元素remove()方法的问题详解
2021/01/04 Python
CSS3制作气泡对话框的实例教程
2016/05/10 HTML / CSS
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
Russell Stover巧克力官方网站:美国领先的精美巧克力制造商
2016/11/27 全球购物
个人找工作自荐信格式
2013/09/21 职场文书
幼儿园教师教学反思
2014/02/06 职场文书
小班秋游活动方案
2014/02/22 职场文书
授权委托书范本
2014/04/03 职场文书
霸气队列口号
2014/06/18 职场文书
环境工程专业自荐信范文
2014/06/24 职场文书
领导班子作风建设剖析材料
2014/10/11 职场文书