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 25 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
聊一聊JavaScript作用域和作用域链
May 03 Javascript
如何用JS判断两个数字的大小
Jul 21 Javascript
jquery点击切换背景色的简单实例
Aug 25 Javascript
JQ选择器_选择同类元素的第N个子元素的实现方法
Sep 08 Javascript
浅谈js控制li标签排序问题 js调用php函数的方法
Oct 16 Javascript
如何在AngularJs中调用第三方插件库
May 21 Javascript
vue2.0项目中使用Ueditor富文本编辑器示例代码
Aug 14 Javascript
vue发送ajax请求详解
Oct 09 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 26 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 CodeIgniter框架的工作原理研究
2015/03/30 PHP
CI分页类首页、尾页不显示的解决方法
2016/03/28 PHP
遍历echsop的region表形成缓存的程序实例代码
2016/11/01 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
js 学习笔记(三)
2009/12/29 Javascript
jquery 页面滚动到底部自动加载插件集合
2014/01/31 Javascript
Javascript图片上传前的本地预览实例
2014/06/16 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
JS如何设置iOS中微信浏览器的title
2016/11/22 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
详解ionic本地相册、拍照、裁剪、上传(单图完全版)
2017/10/10 Javascript
vue 组件中添加样式不生效的解决方法
2018/07/06 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
详解Vue的七种传值方式
2021/02/08 Vue.js
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
解析Python中的二进制位运算符
2015/05/13 Python
浅谈Python类的__getitem__和__setitem__特殊方法
2016/12/25 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
python简单商城购物车实例代码
2018/03/15 Python
python psutil库安装教程
2018/03/19 Python
对pandas中to_dict的用法详解
2018/06/05 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
使用python实现抓取腾讯视频所有电影的爬虫
2019/04/15 Python
浅谈Python 参数与变量
2020/06/20 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
python中字符串的编码与解码详析
2020/12/03 Python
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
什么时候用assert
2015/05/08 面试题
个人委托书怎么写
2014/09/17 职场文书
领导干部作风建设剖析材料
2014/10/11 职场文书
给老师的感谢信
2015/01/20 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
一篇文章带你搞懂Python类的相关知识
2021/05/20 Python