关于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>  </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是什么? 是一种高吞吐量的、分布式、发布、订阅、消息系统 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系统框架模型
一 技术架构 二 数据源 主数据 :组织|岗位|人员|大区|三大主数据(客户、物料、供应商)财务主数据(科目|成本中心|利润中心|资产)|工作中心|工艺路线 业务数据 :线索|业务机会|合同|订单|采购|生产|发…...
双向交错CCM图腾柱无桥单相PFC学习仿真与实现(3)硬件功能实现
前言 前面介绍了双向交错CCM图腾柱的系统设计仿真实现,仿真很理想 双向交错CCM图腾柱无桥单相PFC学习仿真与实现(1)系统问题分解_卡洛斯伊的博客-CSDN博客 然后又介绍了SOG锁相环仿真实现的原理 双向交错CCM图腾柱无桥单相PFC学习仿真与实…...
微软用 18 万行 Rust 重写了 Windows 内核
微软正在使用 Rust 编程语言重写其核心 Windows 库。 5 月 11 日——Azure 首席技术官 Mark Russinovich 表示,最新的 Windows 11 Insider Preview 版本是第一个包含内存安全编程语言 Rust 的版本。 “如果你参加了 Win11 Insider 环,你将在 Windows 内…...
word 调整列表缩进
word 调整列表缩进的一种方法,在试了其他方法无效后,按下图所示顺序处理,编号和文字之间的空白就没那么大了。 即右键word上方样式->点击修改格式->定义新编号格式->字体->取消勾选 “……对齐到网格”->确定...
nginx学习
一、nginx常用版本 Nginx开源版: http://nginx.org/ nginx plus商业版本(好像功能支持更多) https://www.nginx.com/ openresty (免费,用的也是这个) https://openresty.org/cn/ Tengine https://tengine.…...
python+TensorFlow实现人脸识别智能小程序的项目(包含TensorFlow版本与Pytorch版本)(一)
pythonTensorFlow实现人脸识别智能小程序的项目(包含TensorFlow版本与Pytorch版本)(一) 一:TensorFlow基础知识内容部分(简明扼要,快速适应)1、下载Cifar10数据集,并进行…...
ChatGPT怎么用于政府和公共服务?
将ChatGPT用于政府和公共服务领域是一种创新的应用方式,可以改善政府与公众之间的互动,提升公共服务的效率和质量。ChatGPT作为一个自然语言处理模型,可以在政府信息传递、公共参与、服务支持等方面发挥积极作用。以下将详细探讨ChatGPT如何用…...
dvwa文件上传通关及代码分析
文章目录 low等级medium等级high等级Impossible等级 low等级 查看源码: <?phpif( isset( $_POST[ Upload ] ) ) {// Where are we going to be writing to?$target_path DVWA_WEB_PAGE_TO_ROOT . "hackable/uploads/";$target_path . basename( …...
数字孪生:重塑政府决策与公共服务
在之前的文章中为大家分享了数字孪生在很多行业的应用场景,本文和大家一起探讨一下数字孪生在政务管理方面能有哪些应用,以及其对公共服务提供的积极影响。 1)城市规划方面 数字孪生技术可用于模拟城市的发展和规划。政府可以建立城市的虚拟…...
Leetcode:【448. 找到所有数组中消失的数字】题解
题目 给你一个含 n 个整数的数组 nums ,其中 nums[i] 在区间 [1, n] 内。请你找出所有在 [1, n] 范围内但没有出现在 nums 中的数字,并以数组的形式返回结果。 难度:简单 题目链接:448. 找到所有数组中消失的数字 示例1 输入&…...
2023年中,量子计算产业现状——
2023年上半年,量子计算(QC)领域取得了一系列重要进展和突破,显示出量子计算技术的快速发展和商业应用的不断拓展。在iCV TAnk近期发表的一篇报告中,团队从制度进步、产业生态、投融资形势、总结与展望四个方面对量子计…...
微信小程序智慧流调微信小程序设计与实现
摘 要 自从2020年新冠疫情爆发以来,对全国人民的健康和全国各地区的经济发展都带来了很大的影响,并且新冠肺炎对各个领域带来的影响还未完全消除。近三年以来,全国各地区多次爆发新的疫情,导致许多人被隔离,也导致全国…...
分布式集群框架——有关zookeeper的面试考点
3.掌握Zookeeper的概念 当涉及到大规模分布式系统的协调和管理时,Zookeeper是一个非常重要的工具。 1. 分布式协调服务:Zookeeper是一个分布式协调服务,它提供了一个高可用和高性能的环境,用于协调和同步分布式系统中的各个节点…...
Spring Cloud Gateway的快速使用
环境前置搭建Nacos:点击跳转 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:总结 前言 python实现网络爬虫非常简单,只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点,方便以后复习。 申明 本系列所涉及的代码仅用于个人研究与讨论,并不会对网站产生不好…...
扩散模型实战(八):微调扩散模型
推荐阅读列表: 扩散模型实战(一):基本原理介绍 扩散模型实战(二):扩散模型的发展 扩散模型实战(三):扩散模型的应用 扩散模型实战(四…...
XML Group端口详解
在XML数据映射过程中,经常需要对数据进行分组聚合操作。例如,当处理包含多个物料明细的XML文件时,可能需要将相同物料号的明细归为一组,或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码,增加了开…...
19c补丁后oracle属主变化,导致不能识别磁盘组
补丁后服务器重启,数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后,存在与用户组权限相关的问题。具体表现为,Oracle 实例的运行用户(oracle)和集…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
什么是EULA和DPA
文章目录 EULA(End User License Agreement)DPA(Data Protection Agreement)一、定义与背景二、核心内容三、法律效力与责任四、实际应用与意义 EULA(End User License Agreement) 定义: EULA即…...
涂鸦T5AI手搓语音、emoji、otto机器人从入门到实战
“🤖手搓TuyaAI语音指令 😍秒变表情包大师,让萌系Otto机器人🔥玩出智能新花样!开整!” 🤖 Otto机器人 → 直接点明主体 手搓TuyaAI语音 → 强调 自主编程/自定义 语音控制(TuyaAI…...
多种风格导航菜单 HTML 实现(附源码)
下面我将为您展示 6 种不同风格的导航菜单实现,每种都包含完整 HTML、CSS 和 JavaScript 代码。 1. 简约水平导航栏 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta name"viewport&qu…...
Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)
目录 一、👋🏻前言 二、😈sinx波动的基本原理 三、😈波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、🌊波动优化…...
10-Oracle 23 ai Vector Search 概述和参数
一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI,使用客户端或是内部自己搭建集成大模型的终端,加速与大型语言模型(LLM)的结合,同时使用检索增强生成(Retrieval Augmented Generation &#…...
安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖
在Vuzix M400 AR智能眼镜的助力下,卢森堡罗伯特舒曼医院(the Robert Schuman Hospitals, HRS)凭借在无菌制剂生产流程中引入增强现实技术(AR)创新项目,荣获了2024年6月7日由卢森堡医院药剂师协会࿰…...
OD 算法题 B卷【正整数到Excel编号之间的转换】
文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的:a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...
