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中ajax学习笔记一
Oct 16 Javascript
js原生appendChild的bug解决心得分享
Jul 01 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
JS实现模拟风力的雪花飘落效果
May 13 Javascript
javascript控制图片播放的实现代码
Jul 29 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
jquery实现左右滑动式轮播图
Mar 02 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
Vue项目中使用better-scroll实现一个轮播图自动播放功能
Dec 03 Javascript
js实现图片放大并跟随鼠标移动特效
Jan 18 Javascript
解决layer图标icon不加载的问题
Sep 04 Javascript
vue打开其他项目页面并传入数据详解
Nov 25 Vue.js
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 表单数据的获取代码
2009/03/10 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
php 基础函数
2017/02/10 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
jquery中实现标签切换效果的代码
2011/03/01 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
String.prototype实现的一些javascript函数介绍
2013/11/22 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
JS二维数组的定义说明
2014/03/03 Javascript
一个奇葩的最短的 IE 版本判断JS脚本
2014/05/28 Javascript
javascript特殊文本输入框网页特效
2016/09/13 Javascript
jQuery版AJAX简易封装代码
2016/09/14 Javascript
利用fecha进行JS日期处理
2016/11/21 Javascript
vue路由跳转时判断用户是否登录功能的实现
2017/10/26 Javascript
使用 Node.js 开发资讯爬虫流程
2018/01/07 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
Vue CLI3搭建的项目中路径相关问题的解决
2018/09/17 Javascript
javascript实现蒙版与禁止页面滚动
2020/01/11 Javascript
10种检测Python程序运行时间、CPU和内存占用的方法
2015/04/01 Python
python中字典dict常用操作方法实例总结
2015/04/04 Python
Python 实现网课实时监控自动签到、打卡功能
2020/03/12 Python
python实时监控logstash日志代码
2020/04/27 Python
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
教育学专业实习生的自我鉴定
2013/11/26 职场文书
书法培训心得体会
2014/01/05 职场文书
中层竞聘演讲稿
2014/01/09 职场文书
小学英语教学反思案例
2014/02/04 职场文书
机械制造毕业生求职信
2014/03/03 职场文书
纪检干部现实表现材料
2014/08/21 职场文书
企业委托书范本
2014/09/13 职场文书
公司收款委托书范本
2014/09/20 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
2014年测量员工作总结
2014/12/12 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
redis数据一致性的实现示例
2022/03/18 Redis