layui实现数据列表的复选框回显

news2024/11/15 3:32:50

layui版本2.8以上

实现效果如图:

<input type="hidden" name="id" id="id" value="{:g_val( 'id',0)}">
<div id="tableDiv">
    <table class="layui-hide" id="table_list" lay-filter="table_list"></table>
</div>

<script src="layui/layui.js"></script>
//方法级渲染
       table.render({
            elem: '#table_list'
            , url: "/admin/****/****_search"
            , cols: [[
                {type:'checkbox'}
                ,{field: 'name', title: '设备名称', width: 200}
                , {field: 'model_number', title: '设备型号', width: 200}
                , {field: 'merchant_name', title: '所属商户', width: 200}
                , {field: 'status', title: '设备状态', width: 120}
                , {field: 'remark', title: '备注', width: 200}
                , {field: 'create_time', title: '创建时间', width: 250}
                , {field: 'update_time', title: '更新时间', width: 250}
            ]]
            // , page: true
            // , limit: 30
            // , height: document.documentElement.offsetHeight - 100
            , height:  'full-180'  // 表格高度根据浏览器自适应
            , page: false// 取消分页时使用
            , limit: Number.MAX_VALUE// 取消分页时使用
            , done: function (res, curr, count) {
                $("[data-field='status']").children().each(function () {
                    if ($(this).text() == '1') {
                        $(this).text("播放中")
                    } else if ($(this).text() == '2') {
                        $(this).text("休息中")
                    }
                });
                $("[data-field='deleted']").children().each(function () {
                    if ($(this).text() == '1') {
                        $(this).text("正常")
                    } else if ($(this).text() == '0') {
                        $(this).text("禁用")
                    }
                });

                $.ajax({
                    url: "/admin/****/get****",
                    type: "post",
                    data: { id: $('#id').val()},
                    success: function (data) {
                        //遍历ajax返回的结果
                        //打印出data的格式为数组实例:[1,2,3,6]
                        for (var i = 0; i < data.length; i++) {
                            //遍历数据表格
                            $.each(res.data, function (index, row) {
                                //判断ajax返回的id是否与数据行中的id相等
                                if (row.id == data[i]) {
                                    // console.log(row.LAY_INDEX);
                                    // console.log(row.LAY_TABLE_INDEX);
                                    $('#tableDiv tr[data-index=' + row.LAY_INDEX + '] input[type="checkbox"]').next().eq(0).click();
                                    $('#tableDiv tr[data-index=' + row.LAY_INDEX + '] input[type="checkbox"]').next().eq(1).click();
                                }
                            })
                        }
                    }
                });
            }
        });

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

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

相关文章

CPSC上月召回案例(2023年7月)

每年的夏末秋初为美国产品热销节日&#xff08;感恩节、万圣节、黑五&#xff09;的备货期&#xff0c;卖家在大量备货的同时&#xff0c;务必保障自身产品通过相关安全测试&#xff0c;以免造成不必要的损失&#xff01; 以下是五祥列举出的上月被CPSC召回产品&#xff0c;作…

技术分享 | LSM,Linux 内核的安全防护盾

计算机安全是一个非常重要的概念和主题&#xff0c;它不仅仅可以保护用户个人信息和资产的安全&#xff0c;还可以影响到用户在使用过程中的体验&#xff1b;但同时&#xff0c;它也是一个很抽象的概念&#xff0c;关于其相关文献和资料不计其数&#xff0c;但它究竟是什么、包…

相机成像原理【二】

文章目录 1、小孔成像的缺陷1.1 引入透镜 2、薄透镜成像原理2.1 薄透镜工作原理2.2 光线穿过透镜如何前进2.3 光线追踪 3、薄透镜成像公式3.1 高斯成像公式3.2 物距、像距、放大率之间特殊的关系 4、透镜成像特性4.1 对焦4.2 景深 1、小孔成像的缺陷 小孔尺寸过小&#xff0c;图…

iBooker 技术评论 20230831

一、轻资产项目的五类分类 轻资产项目不需要投资&#xff0c;但也不是所有人都做得了&#xff0c;取决于个人认知和能力水平限制。 就好比以前的各科题目&#xff0c;你也不是都能做吧&#xff1f; 我以前刷题的时候&#xff0c;喜欢把题目按照难易程度分五类。现在做项目和…

【python爬虫】11.让爬虫按时向你汇报

文章目录 前言定时与邮件明确目标分析过程爬虫发送邮件定时 代码组装复习 前言 上一关我们学习了selenium&#xff0c;它有可视模式与静默模式这两种浏览器的设置方法&#xff0c;二者各有优势。 然后学习了使用.get(‘URL’)获取数据&#xff0c;以及解析与提取数据的方法。…

【校招VIP】java语言考点之关键字static

考点介绍&#xff1a; static考点是面试的高频考点&#xff0c;一般从容易到难提问&#xff0c;比如从static的含义和理解、到JVM的存储或者到线程安全性&#xff0c;再到单例模式等。 java语言考点之关键字static 相关题目及解析内容可点击文章末尾链接查看&#xff01; 一…

Leetcode1090. 受标签影响的最大值

思路&#xff1a;根据值从大到小排序&#xff0c;然后在加的时候判断是否达到标签上限即可&#xff0c;一开始想用字典做&#xff0c;但是题目说是集合却连续出现两个8&#xff0c;因此使用元组SortedList进行解决 class Solution:def largestValsFromLabels(self, values: li…

Windows docker desktop 基于HyperV的镜像文件迁移到D盘

Docker desktop的HyperV镜像文件&#xff0c;默认是在C盘下 C:\ProgramData\DockerDesktop\vm-data\DockerDesktop.vhdx如果部署的软件较多&#xff0c;文件较大&#xff0c;或者产生日志&#xff0c;甚至数据等&#xff0c;这将会使此文件越来越大&#xff0c;容易导致C盘空间…

ChatGPT AIGC 完成二八分析柏拉图的制作案例

我们先让ChatGPT来总结一下二八分析柏拉图的好处与优点 同样ChatGPT 也可以帮我们来实现柏拉图的制作。 效果如下: 这样的按年份进行选择的柏拉图使用前端可视化的技术就可以实现。 如HTML,JS,Echarts等,但是代码可以让ChatGPT来做,生成。 在ChatGPT中给它一个Prompt …

Markdown Preview Plus Chrome插件使用

Markdown Preview Plus Chrome插件使用 1.插件说明2.插件下载3.插件配置4.文档样式4.1 网页显示4.2 导出PDF 系统&#xff1a;Win10 Chrome&#xff1a;113.0.5672.127 Markdown Preview Plus&#xff1a;0.7.3 1.插件说明 一般 markdown 工具自带的预览功能比较简单&#xff…

Java中支持分库分表的框架/组件/中间件简介

文章目录 1 sharding-jdbc2 TSharding3 Atlas4 Cobar5 MyCAT6 TDDL7 Vitess 列举一些比较常见的&#xff0c;简单介绍一下&#xff1a; sharding-jdbc&#xff08;当当&#xff09; TSharding&#xff08;蘑菇街&#xff09; Atlas&#xff08;奇虎360&#xff09; Cobar&#…

【C51基础实验 LED流水灯】

51单片机项目基础篇 LED流水灯1、硬件电路设计和原理分析2、软件设计2.1、利用循环和移位操作符功能实现&#xff1a;LED流水灯2.2、利用利用封装好的库函数功能实现&#xff1a;LED流水灯 3、编译结果4、结束语 LED流水灯 前言&#xff1a; 前几篇学会了LED驱动原理&#xff…

Nano编辑器安装使用指南

关于nano Nano编辑器是一个命令行文本编辑器&#xff0c;具有简单易用的界面和一些基本功能。 Nano小巧友好&#xff0c;提供许多额外的特性&#xff0c;例如交互式的查找和替换、定位到指定的行列、自动缩进、特性切换、国际化支持、文件名标记完成等。 Nano是为了代替闭源的…

Benchmarking Chinese Text Recognition: Datasets, Baselines| OCR 中文数据集【论文翻译】

基础信息如下 https://arxiv.org/pdf/2112.15093.pdfhttps://github.com/FudanVI/benchmarking-chinese-text-recognition Abstract 深度学习蓬勃发展的局面见证了近年来文本识别领域的迅速发展。然而&#xff0c;现有的文本识别方法主要针对英文文本。作为另一种广泛使用的语…

携程 2024秋招内推 火热进行中!

携程 2024秋招 内推火热进行中&#xff01;~ 公司简介:携程校园招聘是为携程集团招募和培养未来的技术专家、业务骨干、管理人员的培训生成长项目。进入携程后&#xff0c;公司会为每位培训生量身拟定双轨四维驱动培养计划&#xff0c; 施行双通道成长模式&#xff0c;可自由选…

【Linux操作系统】信号量实现生生产者消费者模型

当涉及到多线程编程时&#xff0c;经常会遇到生产者消费者问题。在Linux系统编程中&#xff0c;我们可以使用信号量来实现生产者消费者模型&#xff0c;以确保线程之间的同步和互斥。 文章目录 什么是生产者消费者问题&#xff1f;使用信号量实现生产者消费者模型信号量的原理信…

Yao框架浏览器打开后Cannot read properties of undefined (reading ‘search‘)

Yao创建项目后浏览器打开报 undefined 错误&#xff0c;是因为 Yao 框架语言包的问题&#xff0c;只支持浏览器的【中文&#xff08;简体&#xff09;】【英语&#xff08;美国&#xff09;】&#xff0c;如果浏览器排第一的语言不是这两个就会出现这个错误。临时解决方案是在浏…

这个 AI 机器人会怼人,它是怎么做到的?

近期&#xff0c;机器人“Ameca”接入了 Stable Diffusion&#xff0c;它一边与旁边的人类工程师谈笑风生&#xff0c;一边熟练地用马克笔在白板上画出一只简笔的猫&#xff0c;最后还在白板右下角签名。 当 Ameca 询问工程师是否对它的作品是否满意时&#xff0c;工程师回答“…

Effie for Mac - 简约而不简单的跨平台写作软件

在写作的道路上&#xff0c;我们都需要一些工具来帮助我们提高效率&#xff0c;更加流畅地表达思想。Effie for Mac 就是这样一款值得推荐的应用。它不仅拥有简洁、美观的界面设计&#xff0c;还具有丰富的功能&#xff0c;可以满足不同用户的需求。 首先&#xff0c;Effie 的…