layui监听复选框checkbox选中,分页选中处理

具体实现代码如下(需要关注三个位置:done表格加载完毕方法,cols中复选框栏定义,table.on中对复选框选中或取消的状态定义)这三个地方的代码直接复制去用就行了

最终选中的数据id为:ids

<script>layui.use(['table', 'form', 'upload','laydate'], function () {// 设置全局变量以保存选中行信息(仅需要id的话在你的业务位置调用ids即可,数据格式是int数组)let ids = new Array();// 存储所有选中的数据(需要行内全量数据在你的业务位置调用lists即可,数据格式是对象集合)var lists = new Array();// 保存当前页全部数据id,点击全选时使用let tableIds = new Array();//第一个实例table.render({elem: '#currentTableId', method: "post", dataType: "Json", id: 'layuiReload', url: '/page/severalquality/getshipPlan' //数据接口, toolbar: '#toolbarTem', page: true //开启分页, done: function (res, curr, count) {// 设置当前页全部数据id到全局变量tableIds = res.data.map(function (value) {return value.id;});// 设置当前页选中项$.each(res.data, function (idx, val) {if (ids.indexOf(val.id) > -1) {val["LAY_CHECKED"] = 'true';//找到对应数据改变勾选样式,呈现出选中效果let index = val['LAY_TABLE_INDEX'];$('tr[data-index=' + index + '] input[type="checkbox"]').click();form.render('checkbox'); //刷新checkbox选择框渲染}});// 获取表格勾选状态,全选中时设置全选框选中let checkStatus = table.checkStatus('test');if (checkStatus.isAll) {$('.layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);form.render('checkbox'); //刷新checkbox选择框渲染}}, cols: [[ //表头{ field: 'id', title: '数据编号', sort: true, hide: true }, { field: 'id', sort: true, type: 'checkbox' }//在此声明表格复选框, { field: 'DataNumber', align: 'center', title: '序号', width: 60, type: 'numbers' }, { field: 'shiptitle', align: 'center', title: '船名' }, { field: 'carrierstitle', align: 'center', title: '承运商' }, { field: 'startPortName', align: 'center', title: '始发港' }, { field: 'destPortName', align: 'center', title: '到港' }, { field: 'arrivalTime', align: 'center', title: '运达时间' }, { field: 'shipmentTon', align: 'center', title: '装油量' }, { field: 'realTon', align: 'center', title: '卸油量' }, {field: 'superConsumption', align: 'center', title: '是否超耗索赔', hide: true, templet: function (res) {if (res.superConsumption == true) {return "是";} else {return "否";}}}, { field: 'claimSum', align: 'center', title: '索赔量' }, { field: 'practicalprice', align: 'center', title: '实际索赔金额' }, { field: 'claimcompensationInfostateName', align: 'center', title: '索赔状态' }, { field: 'auditremark', align: 'center', title: '审核备注', hide: true }]]});//使用on监听checkbox选中状态并进行处理(tableFilter为table的lay-filter值)table.on('checkbox(tableFilter)', function (obj) {if (obj.checked == true) {if (obj.type == 'one') {ids.push(obj.data.id);lists.push(obj.data);} else {for (let i = 0; i < tableIds.length; i++) {//当全选之前选中了部分行进行判断,避免重复if (ids.indexOf(tableIds[i]) == -1) {ids.push(tableIds[i]);var checkStatus = table.checkStatus('layuiReload'); //layuiReload 为table声明的idlists.push(checkStatus.data[i]);}}}} else {if (obj.type == 'one') {let i = ids.length;while (i--) {if (ids[i] == obj.data.id) {ids.splice(i, 1);lists.splice(i, 1);}}} else {let i = ids.length;while (i--) {if (tableIds.indexOf(ids[i]) != -1) {ids.splice(i, 1);lists.splice(i, 1);}}}}});</script>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/239052.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

为实体服务器配置Ubuntu

简介 我们在使用虚拟机时&#xff0c;直接在网上找到镜像然后下载到本地&#xff0c;在VMware创建实例时将该iso文件作为镜像源然后进行基础配置就可以轻松安装配置好Linux虚拟机。 在为实体服务器安装Linux系统&#xff0c;同样的&#xff0c;我们也需要镜像源&#xff08;即…

Jmeter多种定时器实现方法解析

1、固定定时器&#xff08;Constant Timer&#xff09; 用法(场景)&#xff1a;更真实的模拟用户场景&#xff0c;需要设置等待时间&#xff0c;或是等待上一个请求的时间才执行&#xff0c;给 sampler 之间的思考时间 备注&#xff1a;如果需要每个步骤均延迟&#xff0c;则…

Python实现AR协方差结构线性回归模型(GLSAR算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 GLSAR是具有AR协方差结构的广义最小二乘法线性回归模型。 本项目通过GLSAR回归算法来构建AR协方差结构…

搭建 ElasticSearch 集群环境

安装基础环境 我们用虚拟机创建出3台机器&#xff0c;修改主机名为s1&#xff0c;s2和s3 # 打开如下文件&#xff0c;修改主机名 vim /etc/hostname # 重启机器 reboot查看centos版本为7.9 [roots1 ~]# cat /etc/centos-release CentOS Linux release 7.9.2009 (AltArch)下载…

常用的Makefile

文章目录 Makefile 单文件编译Makefile 多.c, .h文件编译 Makefile 单文件编译 # 定义变量 CC gcc CFLAGS -Wall -g# 默认目标 all: main# main 目标的依赖为 main.c main: main.o$(CC) $(CFLAGS) -o main main.o# 根据 main.c 文件生成 main.o 目标 main.o: main.c$(CC) $(…

【C语言】记录一次自己犯下的低级错误 o(╯□╰)o(局部数组与指针数组的传参、赋值)

在这里分享一下本人犯下的低级错误&#xff0c;希望大家别掉同样的坑 o(╥﹏╥)o 文章目录 事情原委错误分析及解救办法错误一&#xff1a; 使用局部数组arr并将其作为返回值解决方法&#xff1a;使用动态内存分配来创建数组&#xff0c;并在函数结束前手动释放内存。 错误二&…

在nodejs中使用讯飞星火大模型3.0的demo

需求&#xff1a; 在nodejs引入讯飞星火大模型的api接口, 思路 看了一下官方文档 api连接为一个WebSocket Secure&#xff08;WSS&#xff09;连接&#xff0c;具体思路如下&#xff1a; 引入 crypto 和 ws 模块&#xff0c;分别用于生成加密签名和创建 WebSocket 连接。&am…

力扣每日一题day37[113.路径总和ii]

给你二叉树的根节点 root 和一个整数目标和 targetSum &#xff0c;找出所有 从根节点到叶子节点 路径总和等于给定目标和的路径。 叶子节点 是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a;root [5,4,8,11,null,13,4,7,2,null,null,5,1], targetSum 22 输出&a…

Maven高级篇

Maven依赖管理原则; 可选依赖&#xff1a;隐藏当前项目中的指定的包&#xff0c;如此&#xff0c;别的包引用当前包时&#xff0c;当前包中的指定包就被隐藏了&#xff0c;在别的包中无法看到隐藏的包 排除依赖&#xff1a;指定排除引用包中所包含的依赖&#xff0c;防止与当…

基于Docker环境下的Jenkins搭建及使用

&#x1f4e2;专注于分享软件测试干货内容&#xff0c;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1f4dd; 如有错误敬请指正&#xff01;&#x1f4e2;交流讨论&#xff1a;欢迎加入我们一起学习&#xff01;&#x1f4e2;资源分享&#xff1a;耗时200小时精选的「软件测试」资…

2023年12月21日开发正式版v1.2.3更新·本次更新30多个细节优化·完善丰富后台功能·加入演员关联机制

2023年12月21日开发正式版v1.2.3更新本次更新30多个细节优化完善丰富后台功能加入演员关联机制 产品简介 安卓苹果PCH5四端&#xff0c;蜻蜓z暗影版的衍生级版本&#xff0c;2023年优雅草蜻蜓z冬季雪花限定版&#xff0c;不仅继承了蜻蜓z的精良功能&#xff0c;还特色增加了弹…

Python生成器

一、Python生成器介绍 1.什么是生成器 在Python中&#xff0c;使用了 yield 的函数被称为生成器&#xff08;generator&#xff09;。 跟普通函数不同的是&#xff0c;生成器是一个返回迭代器的函数(一次一个值)&#xff0c;只能用于迭代操作&#xff0c;更简单点理解生成器…

飞天使-k8s知识点8-kubernetes资源对象-编写中

文章目录 资源对象是k8s核心概念 资源对象是k8s核心概念 查看防火墙规则 32002 端口的去向 [rootkubeadm-master1 ~]# iptables -t nat -vnL |grep 32000 0 KUBE-MARK-MASQ tcp -- * * 0.0.0.0/0 0.0.0.0/0 /* kubernetes-dashboard/…

Win系统修改Nginx配置结合内网穿透实现远程访问多个Web站点

文章目录 1. 下载windows版Nginx2. 配置Nginx3. 测试局域网访问4. cpolar内网穿透5. 测试公网访问6. 配置固定二级子域名7. 测试访问公网固定二级子域名 1. 下载windows版Nginx 进入官方网站(http://nginx.org/en/download.html)下载windows版的nginx 下载好后解压进入nginx目…

使用TypeScript范型提升代码复用性和安全性

什么是TypeScript范型 TypeScript 的范型&#xff08;Generics&#xff09;是一种创建可重复使用的组件的方式&#xff0c;这种组件可以对多种数据类型进行操作。 范型本质上是为参数化的类型系统提供了工具&#xff0c;它提供了一种方法&#xff0c;能让你在定义函数、接口或…

找不到msvcp120dll,无法继续执行代码的解决方法大全

当你尝试启动一个应用程序或游戏&#xff0c;并且遭遇到一个错误信息&#xff0c;告诉你“找不到msvcp120dll,无法继续执行代码”或者收到类似的提示&#xff0c;这说明你的操作系统中缺失了一个关键的动态链接库文件&#xff0c;即 msvcp120.dll。这种情况其实并不罕见&#x…

一文解析子网掩码和默认网关,成为网络设置达人

随着互联网的普及&#xff0c;越来越多的人开始接触并使用电脑和网络。然而&#xff0c;对于很多初学者来说&#xff0c;网络设置中的子网掩码和默认网关是两个相对陌生的概念。今天&#xff0c;我们就来深入解析这两个概念&#xff0c;让你轻松掌握网络设置技巧&#xff01; …

从功能测试到测试开发,薪资翻倍,我整理的全网最全学习指南!

在这个吃技术的IT行业来说&#xff0c;我刚入行的时候每天做的也是最基础的工作&#xff0c;但是随着时间的消磨&#xff0c;我产生了对自我和岗位价值和意义的困惑。 一是感觉自己在浪费时间&#xff0c;另一个就是做了快2年的测试&#xff0c;感觉每天过得浑浑噩噩&#xff…

【快速应用开发】Blitz.js简介:Next.js的全栈框架

自我介绍 做一个简单介绍&#xff0c;酒架年近48 &#xff0c;有20多年IT工作经历&#xff0c;目前在一家500强做企业架构&#xff0e;因为工作需要&#xff0c;另外也因为兴趣涉猎比较广&#xff0c;为了自己学习建立了三个博客&#xff0c;分别是【全球IT瞭望】&#xff0c;【…

Swift 周报 第四十一期

文章目录 前言新闻和社区2024 年 Swift Student Challenge 公布现推出超过 30 个新的开发者活动 提案正在审查的提案 Swift论坛话题讨论推荐博文关于我们 前言 本期是 Swift 编辑组整理周报的第四十一期&#xff0c;每个模块已初步成型。各位读者如果有好的提议&#xff0c;欢…