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

大数据应用开发方向前端 2024-04-18 3 0

欢迎来到《小5讲堂》大家好，我是全栈小5。这是《前端》系列文章，每篇文章将以博主理解的角度展开讲解，特别是针对知识点的概念进行叙说，大部分文章将会对这些概念进行实际例子验证，以此达到加深对知识点的理解和掌握。温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！

前言核心方法常用模块表单按钮事件表格字段事件文章推荐

前言

最近在维护老系统，尽量使用过layui，但是时间久了，总会忘记一些方法的使用。因此通过本篇文章大概记录常用的功能方法，比如，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件等

核心方法

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

layui.use(['module1', 'module2'], function(){

// 在这里编写模块加载完成后的逻辑

});

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

常用模块

var $ = layui.$;

var layer = layui.layer;

var table = layui.table;

var form = layui.form;

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

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

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

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

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

表单按钮事件

Html设置，把按钮标签包含在form表单标签里，否则设置的事件无效。两个主要属性lay-filter，lay-submit