当前位置: 首页 > 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|GIF 解析与构建(5):手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

手游刚开服就被攻击怎么办?如何防御DDoS?

开服初期是手游最脆弱的阶段&#xff0c;极易成为DDoS攻击的目标。一旦遭遇攻击&#xff0c;可能导致服务器瘫痪、玩家流失&#xff0c;甚至造成巨大经济损失。本文为开发者提供一套简洁有效的应急与防御方案&#xff0c;帮助快速应对并构建长期防护体系。 一、遭遇攻击的紧急应…...

synchronized 学习

学习源&#xff1a; https://www.bilibili.com/video/BV1aJ411V763?spm_id_from333.788.videopod.episodes&vd_source32e1c41a9370911ab06d12fbc36c4ebc 1.应用场景 不超卖&#xff0c;也要考虑性能问题&#xff08;场景&#xff09; 2.常见面试问题&#xff1a; sync出…...

Qt/C++开发监控GB28181系统/取流协议/同时支持udp/tcp被动/tcp主动

一、前言说明 在2011版本的gb28181协议中&#xff0c;拉取视频流只要求udp方式&#xff0c;从2016开始要求新增支持tcp被动和tcp主动两种方式&#xff0c;udp理论上会丢包的&#xff0c;所以实际使用过程可能会出现画面花屏的情况&#xff0c;而tcp肯定不丢包&#xff0c;起码…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

python如何将word的doc另存为docx

将 DOCX 文件另存为 DOCX 格式&#xff08;Python 实现&#xff09; 在 Python 中&#xff0c;你可以使用 python-docx 库来操作 Word 文档。不过需要注意的是&#xff0c;.doc 是旧的 Word 格式&#xff0c;而 .docx 是新的基于 XML 的格式。python-docx 只能处理 .docx 格式…...

MySQL账号权限管理指南:安全创建账户与精细授权技巧

在MySQL数据库管理中&#xff0c;合理创建用户账号并分配精确权限是保障数据安全的核心环节。直接使用root账号进行所有操作不仅危险且难以审计操作行为。今天我们来全面解析MySQL账号创建与权限分配的专业方法。 一、为何需要创建独立账号&#xff1f; 最小权限原则&#xf…...

视觉slam十四讲实践部分记录——ch2、ch3

ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件,或者在构建过程中仍然引用了旧的路…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...