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翻页时数据选中丢失问题的解决办法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • jqgrid 表格数据导出实例

    首先,是一段javascript脚本: 复制代码 代码如下: /**  *   *   * @param table_id 表格的id  * @param container_id 容器的id  * @param form_id 提交表单的id  * @param title 文件名  * @param rownumbers  */  function getXlsFromTbl(table_id, container_id ,form_id, title, rownumbers) {     

  • 基于PHP和Mysql相结合使用jqGrid读取数据并显示

    jqGrid可以动态读取和加载外部数据,本文将结合PHP和Mysql给大家讲解如何使用jqGrid读取数据并显示,以及可以通过输入关键字查询数据的ajax交互过程. 下面给大家展示效果图,喜欢的朋友可以阅读全文哦. jqGrid本身带有search和edit表格模块,但是这些模块会使得整个插件体积显得有点庞大,而且笔者认为jqGrid的搜索查询和编辑/添加功能不好用,所以笔者放弃jqGrid自有的search和edit表格模块,借助jquery利器来完成相关功能,符合项目的实际应用. XHTML

  • 给jqGrid数据行添加修改和删除操作链接(之一)

    我这里用的不是jqGrid的自带的编辑和删除操作,我已经把分页导航栏下的编辑,删除,搜索都取消掉了,就是这句$("#list1").navGrid("#pager1",{edit:false,del:false, search:false}), 然后在数据加载完成后,给每行添加了 修改和删除链接 jqGrid完成的事件是gridComplete:function(){}(可以理解为数据都准备好了), 因为从数据库获取到的json数据没有带修改和删除两项,所以在之后的

  • jqGrid表格应用之新增与删除数据附源码下载

    jqGrid可以结合fancybox等插件完成超酷的弹出层效果,通过与php后台交互,可以轻松完成数据的添加与详情查看,而这个过程完全是一个ajax异步通信过程,是一个非常友好的富客户端应用. 下面给大家展示了效果图,喜欢的朋友可以直接下载源码哦. 效果展示    源码下载 在上一篇文章中,我们提到过jqGrid自身有强大的单元格操作模块,但是这些模块操作起来不太适合用户的习惯,在本文中,我们使用fancybox,以及表单插件来完成jqGrid数据的添加以及删除操作. XHTML 首先需要在he

  • jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法

    看到很多网上对含特殊字符 json 数据处理,都是逐个判断是哪个特殊字符,比如回车如何处理,引号如何处理.其实有现成的代码库可以做这件事情,下载 json-lib-2.3-jdk15.jar : 复制代码 代码如下: import net.sf.json.util.JSONUtils; String str = (String) value; String s1 = JSONUtils.quote(str);//首尾带引号 String s3 = JSONUtils.stripQuotes(s1

  • 获取jqGrid中选择的行的数据

    下面可以获取选择一行的id,如果你选择多行,那下面的id是最后选择的行的id: var id=$('#gridTable').jqGrid('getGridParam','selrow'); 如果想要获取选择多行的id,那这些id便封装成一个id数组,那可以使用以下: var ids=$('#gridTable').jqGrid('getGridParam','selarrrow'); 如果想获取选择的行的数据,只要传入rowId即可,如下: var rowData = $("#gridTabl

  • 通过点击jqgrid表格弹出需要的表格数据

    首先对Jqgrid网格插件做个简要的说明.在众多的表格插件中,Jqgrid的特点是非常鲜明的. 特点如下: 完整的表格呈现与运算功能,包含换页.栏位排序.grouping.新增.修改及删除资料等功能. 自定义的工具列 预设的Navigator工具列,可以很容易的使用新增.删除.编辑.检视及搜寻等功能. 完整的分页功能 按下任一栏位的标头,皆可以该栏位为排序项目.无论是升序或降序皆可. 预设的action formatter,可以快速而直觉地对每笔资料做运算. 支持多种数据格式.比如json.xm

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

    我在项目中使用jqGrid时,采用异步加载服务器数据,例如点击翻页.搜索时都重新加载数据.这样就会产生一个问题. 问题描述: 当对列表批量删除时,可以选择多个记录信息,选择当前页的第一条,如图: 点击下一页再选择一些记录,点击删除时,则无法删除前面页所选择的记录. 解决办法:jqGrid貌似没有解决这个问题的方法,所以只能自己写代码保存所选择的记录.需要借助jqGrid的两个事件方法: /** multiselect为ture,且点击头部的checkbox时才会触发此事件.aRowids:所有选

  • jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法

    序列化中文时之所以乱码是因为.serialize()调用了encodeURLComponent方法将数据编码了 解决方法就是进行解码 原因:.serialize()自动调用了encodeURIComponent方法将数据编码了 解决方法:调用decodeURIComponent(XXX,true);将数据解码 例如: var params = jQuery("#formId").serialize(); // http request parameters. params = deco

  • Linux下Oracle中SqlPlus时上下左右键乱码问题的解决办法

    window下的sqlplus可以通过箭头键,来回看历史命令,用起来非常的方便. 但是在Linux下,会出现各种乱码,非常不方便,如下图所示,每次打错一个字符就需要重新打一遍. 解决办法:rlwrap 可以用来支持Oracle下sqlplus历史命令的回调功能,提高效率. 解决过程: 1.首先下载rlwrap和readline: readline-6.3.tar.gz rlwrap-0.30.tar.gz 2.安装readline包 tar -zxvf readline-6.3.tar.gz c

  • Android Fragment中使用SurfaceView切换时闪一下黑屏的解决办法

    重构了下之前自己的一个新闻客户端,全部使用了Fragment来进行页面切换,只有一个入口Activity作为程序的启动Activity,其中有一个界面需要调用摄像头识别二维码,于是就会用到SurfaceView进行预览,那么问题来了,当切换到对应的Fragment时,屏幕会黑一下,黑了1秒左右就显示出正常的界面,而且这种现象只有第一次进入该Fragment才会出现,之后进入都不会出现,解决方法是无意在github上看到了,试了一下,可以行的通,下面贴出解决方法. 方法一.在Activity的on

  • Vue路由传参页面刷新后参数丢失原因和解决办法

    目录 vue路由传参方法 原因分析: 解决方案: 总结 vue路由传参方法 在编写vue项目时,时常会使用路由在不同页面中传递参数,常见使用方式如下: this.$router.push({ path: "/test", query: { a: 1, b: 2 } }) 这样我们就传递了两个参数,在 /test  页面 就可以接收这两个参数 let a = this.$route.query.a; let b = this.$route.query.b; 可以看到浏览器进行了url参数

  • Ubuntu VPS中wordpress网站打开时提示”建立数据库连接错误”的解决办法

    一.发现问题 在尝试编辑博客站点的Wordpress主题时,突然发现博客站点无法连接:刷新后提示"建立数据库连接错误"之类的错误.自然想到是mysql可能出错了,所以就登陆了VPS主机,尝试启动mysql服务,但是提示failed. 二.解决方法 1.打开/var/log/mysql/error.log文件,查看出错日志.在阅读日志时发现第一条错误提示是:[ERROR] Can't open the mysql.plugin table. Please run mysql_upgrad

  • 连接MySQL时出现1449与1045异常解决办法

    连接MySQL时出现1449与1045异常解决办法 mysql 1449 : The user specified as a definer ('root'@'%') does not exist 解决方法 把sql导到本地,执行存储过程 或者 查看视频报错: mysql 1449 : The user specified as a definer ('root'@'%') does not exist 解决方法 权限问题,授权 给 root  所有sql 权限 mysql> grant all

  • idea在用Mybatis时xml文件sql不提示解决办法(提示后背景颜色去除)

    目录 1.mapper.xml文件中的sql语句不提示 1.1 首先,alt+enter,出现如下窗口 1.2 其次是,本身为什么没有提示 2 .背景颜色去除 总结 1.mapper.xml文件中的sql语句不提示 1.1 首先,alt+enter,出现如下窗口 随后的窗口选择 这样在如下窗口中会增加一个update 双击点开后如下,一定注意这个地址是https 这样你就可以在update中有提示了,但是在其他标签中依然没有提示,如法炮制即可 有一个简单的方法,就是在local name中写sq

  • MyBatis查询数据,赋值给List集合时,数据缺少的问题及解决

    目录 MyBatis查询数据赋值给List集合数据缺少 解决办法 Mybatis查询时数据丢失的问题 经过排查得出结论 解决办法 MyBatis查询数据赋值给List集合数据缺少 今天在使用MyBatis查询数据时,发现查出来的数据和List集合的大小不一致,如下图所示,Total为3,但是list集合size为2.   List<ArticleCommentToShow> commentsByArticleId = articleCommentService.getCommentsByArt

  • 关于vuex状态刷新网页时数据被清空问题及解决

    目录 vuex状态刷新网页时数据被清空 vuex状态在页面刷新时,会清空状态 vuex状态刷新网页时数据被清空 vuex状态管理,在网页刷新数据被清空的解决方法. 在main.js中写入下面的代码段(亲测有效) //刷新保存状态 if (sessionStorage.getItem("store")) { store.replaceState( Object.assign( {}, store.state, JSON.parse(sessionStorage.getItem("

随机推荐