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 白痴级入门教程
Nov 11 Javascript
javascript跨域方法、原理以及出现问题解决方法(详解)
Aug 06 Javascript
原生JS实现的放大镜效果实例代码
Oct 15 Javascript
基于JS实现横线提示输入验证码随验证码输入消失(js验证码的实现)
Oct 27 Javascript
jQuery纵向导航菜单效果实现方法
Dec 19 Javascript
Vue.js鼠标悬浮更换图片功能
May 17 Javascript
捕获未处理的Promise错误方法
Oct 13 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
JS实现非首屏图片延迟加载的示例
Jan 06 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 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和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
JavaScript事件处理器中的event参数使用介绍
2013/05/24 Javascript
Nodejs使用mysql模块之获得更新和删除影响的行数的方法
2014/03/18 NodeJs
JavaScript数据类型学习笔记
2016/01/25 Javascript
基于Node.js的JavaScript项目构建工具gulp的使用教程
2016/05/20 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
js禁止浏览器的回退事件
2017/04/20 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
Angular路由ui-router配置详解
2018/08/01 Javascript
layer弹出子iframe层父子页面传值的实现方法
2018/11/22 Javascript
详解vue-router导航守卫
2019/01/19 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
Vue仿Bibibili首页的问题
2021/01/21 Vue.js
[02:44]DOTA2英雄基础教程 克林克兹
2014/01/15 DOTA
Python 返回汉字的汉语拼音
2009/02/27 Python
python实现统计代码行数的方法
2015/05/22 Python
Python编程实现使用线性回归预测数据
2017/12/07 Python
详解Django之auth模块(用户认证)
2018/04/17 Python
Flask框架 CSRF 保护实现方法详解
2019/10/30 Python
Flask模板引擎Jinja2使用实例
2020/04/23 Python
python中numpy.empty()函数实例讲解
2021/02/05 Python
Expedia挪威官网:酒店、机票和租车
2018/03/03 全球购物
英国在线药房和在线药剂师:Chemist 4 U
2020/01/05 全球购物
社团活动总结
2014/04/28 职场文书
2014年酒店服务员工作总结
2014/12/08 职场文书
安全先进个人材料
2014/12/29 职场文书
事业单位聘任报告
2015/03/02 职场文书
2015年药店店长工作总结
2015/04/29 职场文书
家庭教育培训学习心得体会
2016/01/14 职场文书
python3实现无权最短路径的方法
2021/05/12 Python
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python
CSS使用Flex和Grid布局实现3D骰子
2022/08/05 HTML / CSS