layui实现表格根据数据来勾选已保存的数据

news2024/11/18 6:01:59

示例图

勾选一次保存后,每次进到查询都会看到被勾选的数据,代码如下:

done: function(res, curr, count) {
                    var groupId = "[[${groupId}]]";
                    $.ajax({
                        url: //写后端获取数据的接口
                        type: 'GET',
                        success: function(data) {
                            console.log(data);
                            var siteIdsFromAPI = data.list.map(function(item) {
                                return item.siteId;//这个是获取的数据对应的字段,我这里对应的是id
                            });
                            // 遍历表格中的每一行
                            var $table = $('#layuitable').next().find('.layui-table tbody');
                            var rows = $table.children('tr');
                            rows.each(function() {
                                var $row = $(this);
                                var rowData = table.cache.layuitable[$row.data('index')];
                                if (siteIdsFromAPI.includes(rowData.siteid)) {
                                    $row.find('.layui-form-checkbox').addClass('layui-form-checked');
                                }
                            });
                        },
                        error: function(xhr, status, error) {
                            console.error("Failed to fetch siteIdFromAPI: " + error);
                        }
                    });
                    // 保留原有的代码
                    $("table").css("width", "100%");
                    var obj = this;
                    $("#orderList").on("click" ,function () {
                        soulTable.render(obj);
                        $("#order").html("<button class=\"layui-btn layui-btn-sm\" onclick='yorder()' style=\"margin-bottom: 20px\">确定</button>\n" +
                            "<button class=\"layui-btn layui-btn-sm\" onclick='norder()' style=\"margin-bottom: 20px\">取消</button>")
                    });
                }
table.on('renderComplete', function() {
                // 遍历表格中的每一行
                table.checkStatus('layuitable').data.forEach(function(row) {
                    console.log("table----",table.checkStatus('layuitable').data);
                    var rowUserID = row.siteid;//这些是对照的id
                    console.log("row.siteId",row.siteid)
                    if (rowUserID === backendUserID) {
                        // 获取当前行的索引
                        var rowIndex = row.LAY_TABLE_INDEX;
                        // 勾选当前行的复选框
                        tableIns.setChecked('layuitable', rowIndex, true);
                    }
                });
            });

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

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

相关文章

登录安全分析报告:小米官网注册

前言 由于网站注册入口容易被黑客攻击&#xff0c;存在如下安全问题&#xff1a; 暴力破解密码&#xff0c;造成用户信息泄露短信盗刷的安全问题&#xff0c;影响业务及导致用户投诉带来经济损失&#xff0c;尤其是后付费客户&#xff0c;风险巨大&#xff0c;造成亏损无底洞 …

创建特定结构的二维数组:技巧与示例

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言&#xff1a;二维数组的奇妙世界 二、方法一&#xff1a;直接初始化 1. 初始化一个…

Chromium源码学习(1)—— 拉取源码,编译

阅读建议&#xff1a;先简单过一下整个文章目录结构&#xff0c;大致了解一下各个步骤在干什么&#xff0c;然后在上手操作可能会事半功倍。也许你遇到的有些问题文章中已经提及到了&#xff0c;但是由于你没有往下看导致卡进度。 Chromium简介 Chromium项目于2008年发布&…

CSS学习笔记:vw、vh实现移动端适配

移动端适配 移动端即手机端&#xff0c;也称M端 移动端适配&#xff1a;同一套移动端页面在不同屏幕尺寸的手机上可以实现宽度和高度的自适应&#xff0c;也就是页面中元素的宽度和高度可以根据屏幕尺寸的变化等比缩放 之前我在一篇博客中介绍了rem实现移动端适配&#xff0…

Linux内核编译流程3.10

一、内核源代码编译流程 编译环境&#xff1a; cat /etc/redhat-release CentOS Linux release 7.4.1708 (Core) Linux内核版本&#xff1a; uname -r 3.10.0-693.el7.x86_64 编译内核源代码版本&#xff1a;linux-4.19.90-all-arch-master cp /boot/config-xxx到内核源…

九章云极DataCanvas公司DingoDB完成中国信通院权威多模数据库测试

2024年5月16日&#xff0c;九章云极DataCanvas公司自主研发和设计的开源多模向量数据库DingoDB顺利完成中国信息通信研究院&#xff08;以下简称中国信通院&#xff09;多模数据库产品测试。本次测试的成功标志着DingoDB在技术能力、性能表现和产品稳定性方面得到了权威机构的高…

交互设计如何助力传统技艺在当代复兴?

背景介绍 榫卯是中国传统木工中一种独特的接合技术&#xff0c;它通过构件间的凸凹部分相互配合来实现两个或多个构件的紧密结合。这种结构方式不依赖于钉子或其他金属连接件&#xff0c;而是利用木材自身的特性&#xff0c;通过精巧的设计和工艺&#xff0c;实现构件间的稳定…

数据大屏方案 : 实现数据可视化的关键一环_光点科技

在数字时代的浪潮中&#xff0c;数据已经成为企业决策和操作的重要基础。因此&#xff0c;“数据大屏方案”逐渐成为业界关注的焦点。这类方案通过将复杂的数据集合以直观的形式展现出来&#xff0c;帮助决策者快速把握信息&#xff0c;做出更加明智的决策。 数据大屏的定义及作…

一年收入大几十个的副业兼职,闲鱼新玩法,新手小白可做,无门槛

在开始分享之前&#xff0c;我想先了解一下&#xff0c;大家是否曾在各大公众号上参与过各种打卡活动&#xff1f;比如减肥打卡、英语阅读打卡、考研考公打卡等等。如今&#xff0c;打卡已经成为现代人生活中不可或缺的一部分。无论是学习、健身还是工作&#xff0c;打卡都能有…

socks5 如何让dns不被污染

问题 发现firefox浏览器代理设置成socks5后&#xff0c;查看ip是成功了&#xff0c;但是谷歌等海外的还是无法正常访问。 原因 主要原因是socks5连接虽然是成功了&#xff0c;但是dns还是走国内的&#xff0c;国内的dns解析都被污染了导致没法正常访问 解决 把设置里的 使…

香橙派Kunpeng Pro评测

有幸受邀评测香橙派与华为鲲鹏在2024年5月12刚刚联合发布的新品香橙派Kunpeng Pro。 本文将从软硬件、AI算法测试等角度简单分享一下博主拿到板子以来感受与所做的评测。 一、硬件 香橙派Kunpeng Pro实物图 处理器方面&#xff0c;香橙派Kunpeng Pro采用了4核64位armv8架构处…

EthernetiP转modbusTCP网关在加氢催化中的应用

在现代工业控制系统中&#xff0c;Ethernet/IP和ModbusTCP是两种常见的通信协议。它们在各种设备和系统间传输数据&#xff0c;实现设备的监控和控制&#xff0c;尤其在催化加氢装置这类关键工业过程中发挥着不可或缺的作用。本文将深入探讨开疆智能KJ-EIP-206型Ethernet/IP转M…

探寻数据处理的高效之道:从Python内置方法到NumPy的飞跃

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言&#xff1a;为什么要学习NumPy&#xff1f; 二、案例展示&#xff1a;创建整数序列…

【Java】/*继承和组合*/

目录 一、继承 1.1 为什么需要继承 1.2 继承的概念 1.3 继承的语法 1.4 访问父类的成员 1.4.1 在子类方法中访问父类的成员 1.4.2 在子类外的方法中访问父类的成员 1.5 super关键字 1.6 子类和父类的构造方法 1.7 super 和 this异同点&#xff08;待改进&#xff09;…

常见webshell工具及特征分析

前言 在工作中经常会遇到各种websehll&#xff0c;黑客通常要通过各种方式获取 webshell&#xff0c;从而获得企业网站的控制权&#xff0c;识别出webshell文件或通信流量可以有效地阻止黑客进一步的攻击行为&#xff0c;下面以常见的四款webshell进行分析&#xff0c;对工具连…

深度学习之语义分割概念

深度学习之语义分割概念 文章目录 深度学习之语义分割概念前言一、语义分割任务常见数据集格式1.PASCAL VOC2.MS COCO 二、语义分割结果的具体形式三、语义分割常见的评价指标四、语义分割标注工具1.Labelme2.EISeg3.X-Anylabeling 总结 前言 常见的分割任务&#xff1a; 语义分…

大模型“1元购”?AI公司加速奔向应用端“大航海时代”

自字节跳动发布豆包大模型&#xff0c;互联网大厂纷纷就位&#xff0c;击穿“地板价”的打法从C端向B端拓展。这也成为今年“618”最亮眼的价格战。 5月15日&#xff0c;字节跳动率先宣布豆包大模型已通过火山引擎开放给企业客户&#xff0c;大模型定价降至0.0008元/千Tokens&…

Python os.path.isfile() 和 os.path.isdir() 函数

Python os.path.isfile 和 os.path.isdir 函数 正文 正文 在网上看到很多人对这两个函数的用法有过说明&#xff0c;然而感觉都没有说到它们的本质&#xff0c;这里特来记录一下。os.path.isfile() 用来判断所给参数是否一个文件。os.path.isdir() 用来判断所给的参数是否是一…

揭秘CISA:你不知道的信息安全认证,轻松掌握职场先机!

在当今的信息化时代&#xff0c;信息系统的安全和稳定是企业和组织的重要资产。信息系统审计是一项专业的工作&#xff0c;需要具备丰富的知识和经验&#xff0c;以及敏锐的洞察力和判断力。信息系统审计师是信息系统审计领域的专业人士&#xff0c;他们负责对信息系统的设计、…

mmu之TLB的来源与实现

TLB的由来 遇到的问题 对于两级页表(Page Table)的设计&#xff0c;需要访问两次物理内存才可以得到虚拟地址对应的物理地址(一次访问第一级页表&#xff0c;另一次访问第二级页表)&#xff0c;而物理内存的运行速度相对于处理器本身来说&#xff0c;有几十倍的差距; 因此在处…