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

关于layui table回显以及选择下一页时记住上一页数据的问题

代码如下

<div class="layui-form-item"><label class="layui-form-label">选择商品</label><div class="layui-input-inline"><input type="text" name="keyword" id="keyword" placeholder="请输入关键字" class="layui-input"></div><div class="layui-input-inline"><input type="button" class="layui-btn" id="searchBtn" value="搜索"></div>
</div>
<div class="layui-form-item"><table id="resultTable" lay-filter="resultTable"></table>
</div>
<div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" onclick="add()">确定</button></div>
</div>
<input type="hidden" name="id" id="id" value="{$info.id}">
<input type="hidden" name="ids" id="ids" value="{$info.ids}"><script>let selectedData = []; //用于存储选中的数据let pageData = []; //后台返回的数据layui.use(['form', 'table'], function () {let form = layui.form,table = layui.table;//搜索按钮点击事件$('#searchBtn').on('click', function () {let keyword = $('#keyword').val();table.reload('#resultTable', {where: {keyword: keyword},page: {curr: 1}});});//之前选中的idlet ids = $('#ids').val();let beforeData = ids.split(",");beforeData.forEach(item => {selectedData.push(Number(item))})//渲染完成回调let myDone = function (res) {//找到框架渲染的表格let tbl = $('#resultTable').next('.layui-table-view');//记下当前页数据,Ajax 请求的数据集,对应你后端返回的数据字段pageData = res.data;let len = pageData.length;//遍历当前页数据,对比已选中项中的 idfor (let i = 0; i < len; i++) {if (selectedData.indexOf(pageData[i]['data_id']) !== -1) {//目前版本没有任何与数据或表格 id 相关的标识,不太好搞,土办法选择它吧tbl.find('table>tbody>tr').eq(i).find('td').eq(0).find('input[type=checkbox]').prop('checked', true);}}//去掉全选按钮-(全选时 数据判断有问题 懒得搞 也不会存在全选的情况)$('th[data-field=0] div').replaceWith('<div class="layui-table-cell laytable-cell-5-0-0"><span>&nbsp;&nbsp;&nbsp;&ensp;</span></div>');//PS:table 中点击选择后会记录到 table.cache,没暴露出来,也不能 mytbl.renderForm('checkbox');//暂时只能这样渲染表单form.render('checkbox');};// 渲染表格table.render({elem: '#resultTable',id: '#resultTable',url: '',method: 'get',where: {keyword: ''}, //初始为空done: myDone,cols: [[{type: 'checkbox', width: '10%', align: 'center'},{field: 'data_id', title: 'ID', width: '30%', align: 'center'},{field: 'sku', title: 'SKU', width: '30%', align: 'center'},{field: 'name', title: '商品名称', width: '30%', align: 'center'},{field: 'customer_price', title: '商品价格', width: '30%', align: 'center'}]],page: true,limit: 10,limits: [10, 20, 30],});//监听复选框点击事件table.on('checkbox(resultTable)', function (obj) {//全选或单选数据集不一样//(目前不存在全选的情况-全选按钮被我去掉了-可以自己加上。全选的话,obj.type='all')let data = obj.type === 'one' ? [obj.data] : pageData;//遍历数据$.each(data, function (k, v) {if (obj.checked) {selectedData.push(obj.data.data_id);} else {selectedData = selectedData.filter(function (item) {return item !== obj.data.data_id;});}});});//表单提交window.add = function () {let id = $('#id').val();let name = $('#name').val();let brand_name = $('#brand_name').val();let image = $('#image').val();let begin_time = $('#begin_time').val();let end_time = $('#end_time').val();let num = $('#num').val();let remark = $('#remark').val();let selectedIds = selectedData.map(function (item) {return item;}).join(',');if (selectedIds === '') {layer.msg('请选择商品');return}layer.confirm('已选中的材料ID为:[' + selectedIds + '], 确定提交吗?', function () {$.post('/your_url', {id: id,name: name,brand_name: brand_name,image: image,begin_time: begin_time,end_time: end_time,num: num,remark: remark,ids: selectedIds}, function (res) {if (res.code === 200) {layer.alert(res.msg, {icon: 6}, function () {// 获得frame索引let index = parent.layer.getFrameIndex(window.name);//关闭当前frameparent.layer.close(index);parent.location.reload();});} else {layer.alert(res.msg, {icon: 5})}}, 'JSON');})}});
</script>

参考文章:Layui Table 分页记忆选中

相关文章:

关于layui table回显以及选择下一页时记住上一页数据的问题

代码如下 <div class"layui-form-item"><label class"layui-form-label">选择商品</label><div class"layui-input-inline"><input type"text" name"keyword" id"keyword" placehold…...

kafka消息系统实战

kafka是什么&#xff1f; 是一种高吞吐量的、分布式、发布、订阅、消息系统 1.导入maven坐标 <dependency><groupId>org.apache.kafka</groupId><artifactId>kafka-clients</artifactId><version>2.4.1</version></dependency&…...

Kafka3.0.0版本——Leader故障处理细节原理

目录 一、服务器信息二、服务器基本信息及相关概念2.1、服务器基本信息2.2、LEO的概念2.3、HW的概念 三、Leader故障处理细节 一、服务器信息 三台服务器 原始服务器名称原始服务器ip节点centos7虚拟机1192.168.136.27broker0centos7虚拟机2192.168.136.28broker1centos7虚拟机…...

BI系统框架模型

一 技术架构 二 数据源 主数据 &#xff1a;组织|岗位|人员|大区|三大主数据&#xff08;客户、物料、供应商&#xff09;财务主数据&#xff08;科目|成本中心|利润中心|资产&#xff09;|工作中心|工艺路线 业务数据 &#xff1a;线索|业务机会|合同|订单|采购|生产|发…...

双向交错CCM图腾柱无桥单相PFC学习仿真与实现(3)硬件功能实现

前言 前面介绍了双向交错CCM图腾柱的系统设计仿真实现&#xff0c;仿真很理想 双向交错CCM图腾柱无桥单相PFC学习仿真与实现&#xff08;1&#xff09;系统问题分解_卡洛斯伊的博客-CSDN博客 然后又介绍了SOG锁相环仿真实现的原理 双向交错CCM图腾柱无桥单相PFC学习仿真与实…...

微软用 18 万行 Rust 重写了 Windows 内核

微软正在使用 Rust 编程语言重写其核心 Windows 库。 5 月 11 日——Azure 首席技术官 Mark Russinovich 表示&#xff0c;最新的 Windows 11 Insider Preview 版本是第一个包含内存安全编程语言 Rust 的版本。 “如果你参加了 Win11 Insider 环&#xff0c;你将在 Windows 内…...

word 调整列表缩进

word 调整列表缩进的一种方法&#xff0c;在试了其他方法无效后&#xff0c;按下图所示顺序处理&#xff0c;编号和文字之间的空白就没那么大了。 即右键word上方样式->点击修改格式->定义新编号格式->字体->取消勾选 “……对齐到网格”->确定...

nginx学习

一、nginx常用版本 Nginx开源版&#xff1a; http://nginx.org/ nginx plus商业版本&#xff08;好像功能支持更多&#xff09; https://www.nginx.com/ openresty &#xff08;免费&#xff0c;用的也是这个&#xff09; https://openresty.org/cn/ Tengine https://tengine.…...

python+TensorFlow实现人脸识别智能小程序的项目(包含TensorFlow版本与Pytorch版本)(一)

pythonTensorFlow实现人脸识别智能小程序的项目&#xff08;包含TensorFlow版本与Pytorch版本&#xff09;&#xff08;一&#xff09; 一&#xff1a;TensorFlow基础知识内容部分&#xff08;简明扼要&#xff0c;快速适应&#xff09;1、下载Cifar10数据集&#xff0c;并进行…...

ChatGPT怎么用于政府和公共服务?

将ChatGPT用于政府和公共服务领域是一种创新的应用方式&#xff0c;可以改善政府与公众之间的互动&#xff0c;提升公共服务的效率和质量。ChatGPT作为一个自然语言处理模型&#xff0c;可以在政府信息传递、公共参与、服务支持等方面发挥积极作用。以下将详细探讨ChatGPT如何用…...

dvwa文件上传通关及代码分析

文章目录 low等级medium等级high等级Impossible等级 low等级 查看源码&#xff1a; <?phpif( isset( $_POST[ Upload ] ) ) {// Where are we going to be writing to?$target_path DVWA_WEB_PAGE_TO_ROOT . "hackable/uploads/";$target_path . basename( …...

数字孪生:重塑政府决策与公共服务

在之前的文章中为大家分享了数字孪生在很多行业的应用场景&#xff0c;本文和大家一起探讨一下数字孪生在政务管理方面能有哪些应用&#xff0c;以及其对公共服务提供的积极影响。 1&#xff09;城市规划方面 数字孪生技术可用于模拟城市的发展和规划。政府可以建立城市的虚拟…...

Leetcode:【448. 找到所有数组中消失的数字】题解

题目 给你一个含 n 个整数的数组 nums &#xff0c;其中 nums[i] 在区间 [1, n] 内。请你找出所有在 [1, n] 范围内但没有出现在 nums 中的数字&#xff0c;并以数组的形式返回结果。 难度&#xff1a;简单 题目链接&#xff1a;448. 找到所有数组中消失的数字 示例1 输入&…...

2023年中,量子计算产业现状——

2023年上半年&#xff0c;量子计算&#xff08;QC&#xff09;领域取得了一系列重要进展和突破&#xff0c;显示出量子计算技术的快速发展和商业应用的不断拓展。在iCV TAnk近期发表的一篇报告中&#xff0c;团队从制度进步、产业生态、投融资形势、总结与展望四个方面对量子计…...

微信小程序智慧流调微信小程序设计与实现

摘 要 自从2020年新冠疫情爆发以来&#xff0c;对全国人民的健康和全国各地区的经济发展都带来了很大的影响&#xff0c;并且新冠肺炎对各个领域带来的影响还未完全消除。近三年以来&#xff0c;全国各地区多次爆发新的疫情&#xff0c;导致许多人被隔离&#xff0c;也导致全国…...

分布式集群框架——有关zookeeper的面试考点

3.掌握Zookeeper的概念 当涉及到大规模分布式系统的协调和管理时&#xff0c;Zookeeper是一个非常重要的工具。 1. 分布式协调服务&#xff1a;Zookeeper是一个分布式协调服务&#xff0c;它提供了一个高可用和高性能的环境&#xff0c;用于协调和同步分布式系统中的各个节点…...

Spring Cloud Gateway的快速使用

环境前置搭建Nacos&#xff1a;点击跳转 Spring Cloud Gateway Docs 新建gateway网关模块 pom.xml导入依赖 <!-- 网关 --> <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifact…...

VSCode-C++环境配置+Cmake

文章目录 一、环境配置二、Win10 Cmake 一、环境配置 转载链接 二、Win10 Cmake 创建CMakeLists.txt cmake_minimum_required(VERSION 3.26) project(graph_algorithm)set(CMAKE_CXX_STANDARD 17)add_executable(main main.cppshared_variable.cpp )cmake . -G "MinGW…...

python爬虫14:总结

python爬虫14&#xff1a;总结 前言 ​ python实现网络爬虫非常简单&#xff0c;只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点&#xff0c;方便以后复习。 申明 ​ 本系列所涉及的代码仅用于个人研究与讨论&#xff0c;并不会对网站产生不好…...

扩散模型实战(八):微调扩散模型

推荐阅读列表&#xff1a; 扩散模型实战&#xff08;一&#xff09;&#xff1a;基本原理介绍 扩散模型实战&#xff08;二&#xff09;&#xff1a;扩散模型的发展 扩散模型实战&#xff08;三&#xff09;&#xff1a;扩散模型的应用 扩散模型实战&#xff08;四&#xf…...

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现,玩家控制一个角色(龙)躲避障碍物(仙人掌和乌鸦)。以下是代码的详细介绍:…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

【数据分析】R版IntelliGenes用于生物标志物发现的可解释机器学习

禁止商业或二改转载&#xff0c;仅供自学使用&#xff0c;侵权必究&#xff0c;如需截取部分内容请后台联系作者! 文章目录 介绍流程步骤1. 输入数据2. 特征选择3. 模型训练4. I-Genes 评分计算5. 输出结果 IntelliGenesR 安装包1. 特征选择2. 模型训练和评估3. I-Genes 评分计…...

2025季度云服务器排行榜

在全球云服务器市场&#xff0c;各厂商的排名和地位并非一成不变&#xff0c;而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势&#xff0c;对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析&#xff1a; 一、全球“三巨头”…...

【Go语言基础【13】】函数、闭包、方法

文章目录 零、概述一、函数基础1、函数基础概念2、参数传递机制3、返回值特性3.1. 多返回值3.2. 命名返回值3.3. 错误处理 二、函数类型与高阶函数1. 函数类型定义2. 高阶函数&#xff08;函数作为参数、返回值&#xff09; 三、匿名函数与闭包1. 匿名函数&#xff08;Lambda函…...