当前位置: 首页 > news >正文

【Jqgrid分页勾选保存】三步实现表格分页勾选(取消勾选)保存(附源码)

目录

  • 1、创建临时存储数组,初始化赋值
  • 2、单行选中与取消,调整数组
  • 3、全选与取消全选,调整数组
  • 4、输出数组保存
  • 5、片尾彩蛋

【写在前面】表格可以说是在我们的web页面中是最常见的,之前我们介绍过layui表格翻页勾选的实现过程,今天我们介绍另一个表格组件Jqgrid如何实现选中行、翻页勾选、翻页全选,取消选中,选中数据的回显等功能。
涉及知识点:数组去重、数组赋值、jqgrid的onSelectAll、onSelectRow、gridComplete;jqgrid的setSelection。

1、创建临时存储数组,初始化赋值

实现过程:
在最开始的地方我们先定义一个_selectDataIndex 变量,用于存放我们所勾选的数据的key值,当然我们需要对该对象进行初始化赋值,初始化可以分为父页面传值与页面加载完成后(gridComplete)赋值。
从下代码可以知道我们做了选中数据的回显(setSelection属性设置)

//定义一个临时存储变量
var _selectDataIndex = [];
gridComplete: function(){//做一个数据的回显展示var ids = $("#jqGridListIndexData").getDataIDs();var rowDatas = $("#jqGridListIndexData").jqGrid('getRowData');for(var i=0;i<ids.length;i++){var cl = ids[i];var _order = rowDatas[i].order;//对当前页数据进行赋值if(_order==1){//临时存储变量赋值_selectDataIndex.push(cl);jQuery("#jqGridListIndexData").jqGrid('setSelection',cl);}}
}

2、单行选中与取消,调整数组

实现过程:
主要是通过运用jqgrid本身封装的onSelectRow函数,其中核心还是去通过单行勾选和单行取消操作来调整临时存储变量(_selectDataIndex)的值,具体使用方式如下:

//单行选中或取消
onSelectRow: function (rowId, status, e) {//在选中模式下if(status){//选中_selectDataIndex.push(rowId);}else{//取消选中var _selectNewData = [];if(_selectDataIndex.length==1){_selectDataIndex = [];}else{for(var k=0;k<_selectDataIndex.length;k++){if(_selectDataIndex[k]!=rowId){_selectNewData.push(_selectDataIndex[k]);}}_selectDataIndex = _selectNewData;}}
},

实现效果如下:
在这里插入图片描述

3、全选与取消全选,调整数组

实现过程:
主要通过运用jqgrid的onSelectAll属性,这个里面我主要强调的是当前页的全部勾选与取消选择,因为我们查询接口是基于后端分页的,并没有把所有数据都一次推给前端,所以会局限在当前页的全部选择,而不是所有的数据,通过对当前页全选和取消全选的状态值来调整临时存储数组(_selectDataIndex)的值。具体实现代码如下:

//当前页全选或取消
onSelectAll:function(rowids,status){debugger;var _currentPageData = [];_currentPageData = rowids;if(status){//表示选中模式if($.isNotNull(_currentPageData)){for(var k=0;k<_currentPageData.length;k++){//全部赋值后去重_selectDataIndex.push(_currentPageData[k]);}//调用数组去重_selectDataIndex = removeArr(_selectDataIndex);}}else{//表示取消全选var hasSame = true;var _selectNewData = [];for(var k=0;k<_selectDataIndex.length;k++){//存在的则去除数据hasSame = true;for(var j=0;j<_currentPageData.length;j++){if(_selectDataIndex[k]==_currentPageData[j]){hasSame = false;break;}}if(hasSame){_selectNewData.push(_selectDataIndex[k]);}}_selectDataIndex = _selectNewData;}
},

此处有个removeArr方法,主要用于数组本身的去重操作,具体方法如下。

//数组去重函数
function removeArr(arr) {return arr.filter(function (element, index, self) {return self.indexOf(element) === index;});
}

实现效果如下:
在这里插入图片描述

4、输出数组保存

在这里肯定有人问我,你整的这么复杂无非不就是做已勾选的数据保存么?为啥不直接用jqgrid的本身自带的获取勾选数据方法呢?

$('#jqGridListIndexData').jqGrid('getGridParam','selarrrow');

主要原因是原生的不支持分页勾选,当你翻到第二页再去选择一个数据的时候,你会发现上一页曾选择的数据就没了,这样的话保存就会存在数据丢失的现象了,所以说还是老老实实的用我给的方法吧,当然之前2018年的时候我也整理过一次,但是是基于别人封装的一个组件来做的,此时回头看真的觉得没必要。

5、片尾彩蛋

如果觉得这篇文章对您有帮助的话,想支持博主的可以上皇榜看看哟,皇榜点击此处进入

相关文章:

【Jqgrid分页勾选保存】三步实现表格分页勾选(取消勾选)保存(附源码)

目录1、创建临时存储数组&#xff0c;初始化赋值2、单行选中与取消&#xff0c;调整数组3、全选与取消全选&#xff0c;调整数组4、输出数组保存5、片尾彩蛋【写在前面】表格可以说是在我们的web页面中是最常见的&#xff0c;之前我们介绍过layui表格翻页勾选的实现过程&#x…...

Appium移动自动化测试——app控件获取之uiautomatorviewer

下载手机YY http://yydl.duowan.com/mobile/yymobile_client-android/5.4.2/yymobile_client-5.4.2-881.apk 若链接失效&#xff0c;请自行百度 新建maven空白工程 前置条件&#xff1a;安装eclipse&#xff0c;及其maven插件&#xff0c;请自行百度 新建的工程如下&#xf…...

webpack、vite、vue-cli、create-vue 的区别

webpack、vite、vue-cli、create-vue 的区别 首先说结论 Rollup更适合打包库&#xff0c;webpack更适合打包项目应用&#xff0c;vite基于rollup实现了热更新也适合打包项目。 功能工具工具脚手架vue-clicreate-vue构建项目vite打包代码webpackrollup 脚手架:用于初始化&#…...

数据结构——TreeMap、TreeSet与HashMap、HashSet

目录 一、Map 1、定义 2、常用方法 3、注意 二、TreeMap 三、HashMap 1、定义 2、冲突定义 3、冲突避免方法——哈希函数设计 &#xff08;1&#xff09;、直接定制法(常用) &#xff08;2&#xff09;、除留余数法(常用) &#xff08;3&#xff09;、平方取中法 &…...

Spring Boot学习篇(十三)

Spring Boot学习篇(十三) shiro安全框架使用篇(五) 1 准备工作 1.1 在SysUserMapper.xml中书写自定义标签 <select id"findRoles" resultType"string">select name from sys_role where id (select roleid from sys_user_role where userid (S…...

微软Bing的AI人工只能对话体验名额申请教程

微软Bing 免费体验名额申请教程流程ChatGPT这东西可太过火了。国外国内&#xff0c;圈里圈外都是人声鼎沸。微软&#xff0c;谷歌&#xff0c;百度这些大佬纷纷出手。连看个同花顺都有GPT概念了&#xff0c;搞技术&#xff0c;做生意的看来都盯上了 流程 下面就讲一下如何申…...

怎么打造WhatsApp Team?SaleSmartly(ss客服)告诉你

关键词&#xff1a;WhatsApp Team SaleSmartly&#xff08;ss客服&#xff09; 您是否正在寻找一种让您的团队能够在 WhatsApp协作消息传递的解决方案?拥有了 WhatsApp Team&#xff0c;不仅效率提升&#xff0c;还可以在智能聊天工具中比如SaleSmartly&#xff08;ss客服&…...

IPV4地址的原理和配置

第三章&#xff1a;IP地址的配置 IPv4&#xff08;Internet Protocol Version 4&#xff09;协议族是TCP/IP协议族中最为核心的协议族。它工作在TCP/IP协议栈的网络层&#xff0c;该层与OSI参考模型的网络层相对应。网络层提供了无连接数据传输服务&#xff0c;即网络在发送分…...

软件测试面试准备——(一)Selenium(1)基础问题及自动化测试

滴滴面试&#xff1a;1. 自己负责哪部分功能&#xff1f;农餐对接系统分为了两大子系统&#xff0c;一个是个人订餐系统&#xff0c;二是餐馆、个人与农产品供应商进行农产品交易系统。我主要负责组织测试人员对该系统进行测试。我们测试分为两个阶段&#xff1a;一、功能测试阶…...

AcWing 1230.K倍区间

AcWing 1230. K倍区间 题目描述 给定一个长度为 NNN 的数列&#xff0c;A1,A2,…ANA_1, A_2, … A_NA1​,A2​,…AN​ &#xff0c;如果其中一段连续的子序列 Ai,Ai1,…AjA_i, A_{i1}, … A_jAi​,Ai1​,…Aj​ 之和是 KKK 的倍数&#xff0c;我们就称这个区间 [i,j][i,j][i,…...

kubernetes集群部署springcloud项目【AL】【未写完】

kubernetes集群部署springcloud项目【AL】 &#xff08;先手工做&#xff0c;非自动化&#xff09; #环境&#xff1a; 192.168.73.138 master 192.168.73.139 node1 192.168.73.140 node2 192.168.73.137 harbor、mysqlgit clone https://github.com/lizhenliang/simple-…...

各种音频接口比较

时间 参考&#xff1a;https://www.bilibili.com/video/BV1SL4y1q7GZ/?spm_id_from333.337.search-card.all.click&vd_source00bd76f9d6dc090461cddd9f0deb2d51&#xff0c; https://blog.csdn.net/weixin_43794311/article/details/128941346 接口名字时间公司支持格式…...

软件测试面试理论(超详细)

【面试理论知识】1、你的测试职业发展是什么? 测试经验越多&#xff0c;测试能力越高。所以我的职业发展是需要时间积累的&#xff0c;一步步向着高级测试工程师奔去。而且我也有初步的职业规划&#xff0c;前3年积累测试经验&#xff0c;按如何做好测试工程师的要点去要求自己…...

c++学习笔记-二进制文件操作(哔站-黑马程序员c++教学视频)

一、基本概念 以二进制的方式对文件进行读写操作 打开方式指定为 ios::binary 优点&#xff1a;可以写入自己定义的数据类型 1、写文件 二进制方式写文件&#xff1a;流对象调用成员write 函数原型&#xff1a;ostream& write(const char * buffer,int len);参数解释…...

内网渗透(二十三)之Windows协议认证和密码抓取-Mimikatz介绍和各种模块使用方法

系列文章第一章节之基础知识篇 内网渗透(一)之基础知识-内网渗透介绍和概述 内网渗透(二)之基础知识-工作组介绍 内网渗透(三)之基础知识-域环境的介绍和优点 内网渗透(四)之基础知识-搭建域环境 内网渗透(五)之基础知识-Active Directory活动目录介绍和使用 内网渗透(六)之基…...

Nginx if的使用教程

if指令该指令用来支持条件判断&#xff0c;并根据条件判断结果选择不同的Nginx配置。语法if (condition){...}默认值—位置server、locationcondition为判定条件&#xff0c;可以支持以下写法&#xff1a;1. 变量名。如果变量名对应的值为空字符串或"0"&#xff0c;i…...

备考蓝桥杯【快速排序和归并排序】

&#x1f339;作者:云小逸 &#x1f4dd;个人主页:云小逸的主页 &#x1f4dd;Github:云小逸的Github &#x1f91f;motto:要敢于一个人默默的面对自己&#xff0c;强大自己才是核心。不要等到什么都没有了&#xff0c;才下定决心去做。种一颗树&#xff0c;最好的时间是十年前…...

Taro使用微信OCR插件无法调用onSuccess回调问题

Taro使用微信插件无法调用onSuccess回调问题小程序后台添加插件在开放社区购买相应的套餐详细步骤1.在app.config.js中添加如下代码2.在页面的page.config.js添加插件3.使用ocr-navigator识别身份证小程序后台添加插件 在开放社区购买相应的套餐 购买地址 详细步骤 1.在app.…...

【Java】代码块的细节你搞懂了吗(基础知识七)

希望像唠嗑一样&#xff0c;one step one futher。 目录 &#xff08;1&#xff09;代码块的应用场景 &#xff08;2&#xff09;代码块的细节 1.static 代码块只加载一次 2.当调用类的静态成员时&#xff0c;类会加载 3. 使用类的静态成员时&#xff0c;static代码块会被执…...

设计模式C++实现12:抽象工厂模式

参考大话设计模式&#xff1b; 详细内容参见大话设计模式一书第十五章&#xff0c;该书使用C#实现&#xff0c;本实验通过C语言实现。 抽象工厂模式&#xff08;Abstract Factory&#xff09;&#xff0c;提供一个创建一系列相关或相互依赖对象的接口&#xff0c;而无需指定它们…...

条件运算符

C中的三目运算符&#xff08;也称条件运算符&#xff0c;英文&#xff1a;ternary operator&#xff09;是一种简洁的条件选择语句&#xff0c;语法如下&#xff1a; 条件表达式 ? 表达式1 : 表达式2• 如果“条件表达式”为true&#xff0c;则整个表达式的结果为“表达式1”…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

【配置 YOLOX 用于按目录分类的图片数据集】

现在的图标点选越来越多&#xff0c;如何一步解决&#xff0c;采用 YOLOX 目标检测模式则可以轻松解决 要在 YOLOX 中使用按目录分类的图片数据集&#xff08;每个目录代表一个类别&#xff0c;目录下是该类别的所有图片&#xff09;&#xff0c;你需要进行以下配置步骤&#x…...

Android Bitmap治理全解析:从加载优化到泄漏防控的全生命周期管理

引言 Bitmap&#xff08;位图&#xff09;是Android应用内存占用的“头号杀手”。一张1080P&#xff08;1920x1080&#xff09;的图片以ARGB_8888格式加载时&#xff0c;内存占用高达8MB&#xff08;192010804字节&#xff09;。据统计&#xff0c;超过60%的应用OOM崩溃与Bitm…...

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

GitHub 趋势日报 (2025年06月06日)

&#x1f4ca; 由 TrendForge 系统生成 | &#x1f310; https://trendforge.devlive.org/ &#x1f310; 本日报中的项目描述已自动翻译为中文 &#x1f4c8; 今日获星趋势图 今日获星趋势图 590 cognee 551 onlook 399 project-based-learning 348 build-your-own-x 320 ne…...

NPOI操作EXCEL文件 ——CAD C# 二次开发

缺点:dll.版本容易加载错误。CAD加载插件时&#xff0c;没有加载所有类库。插件运行过程中用到某个类库&#xff0c;会从CAD的安装目录找&#xff0c;找不到就报错了。 【方案2】让CAD在加载过程中把类库加载到内存 【方案3】是发现缺少了哪个库&#xff0c;就用插件程序加载进…...

android13 app的触摸问题定位分析流程

一、知识点 一般来说,触摸问题都是app层面出问题,我们可以在ViewRootImpl.java添加log的方式定位;如果是touchableRegion的计算问题,就会相对比较麻烦了,需要通过adb shell dumpsys input > input.log指令,且通过打印堆栈的方式,逐步定位问题,并找到修改方案。 问题…...

鸿蒙(HarmonyOS5)实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...