【前端】layui table表格勾选事件,以及常见模块

欢迎来到《小5讲堂》,大家好,我是全栈小5。
这是《前端》系列文章,每篇文章将以博主理解的角度展开讲解,
温馨提示:博主能力有限,理解水平有限,若有不对之处望指正!

在这里插入图片描述

目录

  • 表格勾选事件
  • 入口模块
  • 常见模块
  • 禁止勾选
  • 文章推荐

表格勾选事件

在 layui 的 table 表格中,想要监听勾选事件可以通过监听 checkbox 类型的列实现。
可以使用 checkbox 类型的列添加 lay-filter 属性并定义一个对应的过滤器,然后在表格渲染完成后,通过 layui 的事件监听函数监听该过滤器对应的事件。
示例代码如下:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>监听表格勾选事件示例</title><link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.7/css/layui.css">
</head>
<body><table id="demo" lay-filter="test"></table><script src="https://cdn.staticfile.org/layui/2.5.7/layui.js"></script>
<script>
layui.use(['table', 'form'], function(){var table = layui.table;// 渲染表格table.render({elem: '#demo',url: '/demo/table/user/',cols: [[{type: 'checkbox', LAY_CHECKED: true},{field: 'id', title: 'ID', width: 80, sort: true},{field: 'username', title: '用户名', width: 120},{field: 'email', title: '邮箱', minWidth: 150},]],page: true});// 监听表格复选框选择table.on('checkbox(test)', function(obj){var checkStatus = table.checkStatus('demo'); // 获取表格的选中状态console.log(checkStatus.data); // 打印选中的数据console.log(obj.checked); // 当前是否选中console.log(obj.data); // 当前行的数据});
});
</script></body>
</html>

入口模块

在 layui 中,layui.use() 方法是用来加载和使用 layui 模块的主要方法。
它接受一个数组作为参数,数组中包含了需要使用的 layui 模块的名称,同时也可以传入一个回调函数来处理模块加载完成后的逻辑。
具体语法如下:

layui.use(['module1', 'module2'], function(){// 在这里编写模块加载完成后的逻辑
});

在这个方法中,layui.use() 会按照参数中指定的模块顺序加载对应的模块,在所有模块加载完成后,会执行回调函数中的逻辑。在回调函数中可以进行具体的模块使用和操作,确保在模块加载完成后再进行相应的处理。
需要注意的是,layui.use() 方法在页面中使用 layui 模块时是必须的,因为 layui 采用异步加载模块的机制,通过 layui.use() 方法可以确保模块加载完成后再进行后续逻辑处理,避免出现模块未加载完成就调用的情况。

常见模块

在 layui 中,常用的模块包括但不限于以下几个:
1.layui.$
这是 layui 的 jQuery 版本,可以用来操作 DOM、事件处理等功能。

2.layui.layer
弹出层模块,用于显示各种类型的弹出窗口,包括提示框、询问框、加载层等,提供丰富的参数和回调函数来定制不同需求的弹出窗口。

3.layui.table
数据表格模块,用于展示和操作数据表格,支持表格的渲染、事件监听、数据操作等功能。

4.layui.form
表单模块,用于处理表单元素的渲染、事件监听、表单验证等功能,可以轻松实现各种表单操作和交互效果。

除了上述列出的模块,layui 还包含了众多其他常用的模块,如日期时间模块、上传模块、滑块模块等,可以根据实际需求来选择加载并使用对应的模块。

禁止勾选

在 layui 的 table 表格中,如果想要设置某些行或单元格的勾选状态为禁止勾选,可以通过在数据中添加 disabled 字段来实现。具体步骤如下:
1.在表格数据中添加一个名为
disabled 的字段,用于表示该行或单元格的勾选状态是否禁止。如果 disabled 字段的值为 true,则表示该行或单元格禁止勾选;如果值为 false 或字段不存在,则表示可以正常勾选。
2.在表格的列配置中,使用
checkbox 类型的列,并在 checkbox 类型的列中设置自定义的模板来控制勾选状态。可以根据数据中的 disabled 字段的值来动态设置禁止勾选的样式。
下面是一个示例代码,演示如何在 layui 的 table 表格中设置勾选禁止勾选状态:

table.render({elem: '#demo',data: [{id: 1, name: 'Alice', score: 85, disabled: false},{id: 2, name: 'Bob', score: 76, disabled: true},{id: 3, name: 'Cindy', score: 92, disabled: false},],cols: [[{type: 'checkbox'},{field: 'name', title: '姓名'},{field: 'score', title: '分数'},]],done: function(res, curr, count) {// 设置禁止勾选状态的样式$('tbody tr').each(function(index, item) {var disabled = res.data[index].disabled;if (disabled) {$(this).find('input[type="checkbox"]').prop('disabled', true).next().addClass('layui-checkbox-disbaled layui-disabled');}});}
});

在上面的示例中,通过在数据中添加 disabled 字段来表示是否禁止勾选,在 done 回调函数中根据数据的 disabled 字段值设置禁止勾选的样式,实现禁止勾选状态的效果。

文章推荐

【前端】layui table表格勾选事件,以及常见模块

【前端】Layui的表格常用功能,表单提交事件,表格下拉按钮点击事件,表格外的按钮点击事件

【Echarts】曲线图上方显示数字以及自定义值,标题和副标题居中,鼠标上显示信息以及自定义信息

【Echarts】柱状图上方显示数字以及自定义值,标题和副标题居中,鼠标上显示信息以及自定义信息

【随笔】程序员如何选择职业赛道,目前各个赛道的现状如何,那个赛道前景巨大

【随笔】程序员的金三银四求职宝典,每个人都有最合适自己的求职宝典

总结:温故而知新,不同阶段重温知识点,会有不一样的认识和理解,博主将巩固一遍知识点,并以实践方式和大家分享,若能有所帮助和收获,这将是博主最大的创作动力和荣幸。也期待认识更多优秀新老博主。

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

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

相关文章

面试-数据库基础以及MySql、ClickHost、Redis简介

面试-数据库基础以及MySql、ClickHost、Redis简介 0.数据完整性1.数据库并发控制1.1事物1.2 并发读写错误1.3 锁1.3.1 乐观锁与悲观锁1.3.2 共享锁和排他锁1.3.3 行锁与表锁1.3.4 意向锁 1.4 封锁协议与隔离级别1.5 MVCC1.5.1 概念1.5.2 当前读与快照读1.5.3 MVCC in InnoDB 2.…

pytest常用钩子函数

1、什么叫钩子函数 在Pytest框架中&#xff0c;钩子函数是一种允许用户扩展或者自定义测试执行过程的机制。钩子函数允许用户在测试的不同阶段插入自定义的代码&#xff0c;以实现特定的行为&#xff0c;操作或处理。这种插入式的机制使得Pytest具有高度的灵活性和扩展性。 如…

Linux软件包管理器yum—5

一、Linux下软件安装的方式 ①源代码安装&#xff1a; ②rmp包安装&#xff1a; 本质是拷贝可执行程序到系统目录下。 ③yum一键下载&#xff0c;安装&#xff0c;卸载。相当于手机的应用商店。 二、yum 2.1查看yum已配置的源&#xff1a; ls /etc/yum.repos.d/ 2.2查看yum…

环信 IM 客户端将适配鸿蒙 HarmonyOS

自华为推出了自主研发操作系统鸿蒙 HarmonyOS 后&#xff0c;国内许多应用软件开始陆续全面兼容和接入鸿蒙操作系统。环信 IM 客户端计划将全面适配统鸿蒙 HarmonyOS &#xff0c;助力开发者快速实现社交娱乐、语聊房、在线教育、智能硬件、社交电商、在线金融、线上医疗等广泛…

HarmonyOS实战开发-横竖屏切换

介绍 本实例展示如何使用媒体查询&#xff0c;通过ohos.mediaquery 接口完成在不同设备上显示不同的界面效果。 效果预览 使用说明 1.在竖屏设备上&#xff0c;首页展示新闻列表&#xff0c;点击新闻进入详情界面。 2.在横屏设备上&#xff0c;首页左侧展示新闻列表&#x…

010、Python+fastapi,第一个后台管理项目走向第10步:ubutun 20.04下安装ngnix+mysql8+redis5环境

一、说明 先吐槽一下&#xff0c;ubuntu 界面还是不习惯&#xff0c;而且用的是云电脑&#xff0c;有些快捷键不好用&#xff0c;只能将就&#xff0c;谁叫我们穷呢&#xff1f; 正在思考怎么往后进行&#xff0c;突然发现没安装mysql 和redis&#xff0c;准备安装&#xff0…

系统架构最佳实践 -- 高并发解决单用户超领优惠券问题

问题抛出 在近期的项目里面有一个功能是领取优惠券的功能&#xff0c; 问题描述&#xff1a; 每一个优惠券一共发行多少张&#xff0c;每个用户可以领取多少张&#xff1a; 如&#xff1a;A优惠券一共发行120张&#xff0c;每一个用户可以领取140张&#xff0c;当一个用户领…

5.0 HDFS 集群

5.0 HDFS 集群 分类 编程 HDFS 集群是建立在 Hadoop 集群之上的&#xff0c;由于 HDFS 是 Hadoop 最主要的守护进程&#xff0c;所以 HDFS 集群的配置过程是 Hadoop 集群配置过程的代表。 使用 Docker 可以更加方便地、高效地构建出一个集群环境。 每台计算机中的配置 Hado…

2024最新数据分级分类的架构方法流程指南(附下载)

以下是资料目录&#xff0c;如需下载请前往知识星球下载&#xff1a;https://t.zsxq.com/18KTZnJMX

中药分类大全数据库|(收载CDE数据及中药注册分类数据)

中药是指根据中医药理论和实践经验&#xff0c;用以预防、治疗和诊断疾病以及调节机体功能的药材和成药。像中药材、中药饮片、中成药、方剂、药材提取物、配方颗粒、外用中药、特殊用途中药等都可以统称为中药&#xff0c;所以说中药的分类方法多种多样&#xff0c;笔者精心整…

【Canvas与艺术】绘制黄色三角生化危险标志

【关键点】 系统函数arcTo函数的用法及自编函数createRegTriArr的灵活运用。 【成果图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head>&…

【STL】vector

目录 1. vector的使用 1.1 vector的定义 1.2 vector iterator 的使用 1.3 vector 空间增长问题 1.4 vector 增删查改 1.5 vector 迭代器失效问题&#xff08;重点&#xff09; 2.vector模拟实现 1. vector的使用 1.1 vector的定义 1.2 vector iterator 的使用 1.3 vecto…

Java代码基础算法练习-自定义函数之求字符串长度-2024.04.13

任务描述&#xff1a; 写一函数&#xff0c;求一个字符串的长度&#xff08;字符串长度不超过255&#xff09;&#xff0c;然后在主函数中调用该函数 实现求长度操作。 任务要求&#xff1a; 代码示例&#xff1a; package April_2024;import java.util.Scanner;public class …

如何获取手机root权限?

获取手机的 root 权限通常是指在 Android 设备上获取超级用户权限&#xff0c;这样用户就可以访问和修改系统文件、安装定制的 ROM、管理应用权限等。然而&#xff0c;需要注意的是&#xff0c;获取 root 权限可能会导致手机失去保修、安全性降低以及使系统变得不稳定。在获取 …

电脑的日常使用 0 笔记本电脑验机使用体验帖

拯救者 Y7000P 2023 win11系统&#xff08;首发&#xffe5;6999&#xff09; 目录 开机前准备 开机后的验机工作 基本配置 一、 外观及使用体验 二、内部硬件使用体验 1.固态 3. CPU 4.显卡 总结 开机前准备 注意一定要全程录像 &#xff01; 检查快递外包装壳&#…

数据的未来:人工智能引领下的大数据革命

大数据是指在一定时间范围内&#xff0c;无法通过常规软件工具进行捕捉、管理和处理的数据集合&#xff0c;这种数据具有海量、高增长率和多样化的特点&#xff0c;需要采用新的处理模式才能发挥其更强的决策力、洞察发现力和流程优化能力。大数据将数据视为核心资源&#xff0…

Spring Boot | Spring Boot 整合 “Servlet三大组件“ ( Servlet / Filter / Listene )

目录: Spring Boot 整合 "Servlet三大组件" &#xff1a;1. 使用 "组件注册" 的方式 "整合Servlet三大组件" ( 实际操作为 : 创建自定义的"三大组件"对象 结合刚创建"的自定义组件对象"来 将 XxxRegistrationBean对象 通过…

PE文件的分析和构造超详细过程

本文详细讲述如何从0构造一个PE文件&#xff0c;运行该文件会弹出一个HelloPE的窗口 目录 预备知识 1. 构造DOS头IMAGE_DOS_HEADER 1.1 构造DOS_MZ头 1.2 构造DOS_STUB 2、构造PE头IMAGE_NT_HEADERS 248字节 2.1 signature 2.2 IMAGE_FILE_HEADER 2.3 IMAGE_OPTI…

在vue中配置样式 max-width:100px时,发现和width:100px一样没有对应的递增到最大宽度的效果?怎么回事?怎么解决?

原因&#xff1a; 可能时vue的样式大部分和display相关&#xff0c;有很多的联系&#xff0c;导致不生效 解决&#xff1a; 对设置max-width样式的元素设置display:inline-block;属性&#xff0c;即可生效&#xff0c;实现随着子元素的扩展而扩展并增加固定到最大的宽度

一些炫酷的按钮特效

一些炫酷的按钮特效 效果展示 完整vue版代码 <template><div class"test"><div><button class"custom-btn btn-1">btn-1</button><button class"custom-btn btn-2">btn-2</button><button class…