欢迎来到《小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
<form><button type="submit" lay-filter="btnForm" lay-submit>保存</button></form>
js设置，记得在方法后面加上一个return false，否则会自动刷新页面
form.on('submit(btnForm)',function(d){returnfalse})
表格字段事件
表单操作按钮的默认和自定义事件，都是会触发同一个方法，需要带上指定属性，设置不同的值来区分事件
如果想在Layui的表格中使用
templet
重新初始化生成
<a>
标签，并且绑定点击事件，可以在定义表格列时使用
templet
属性来指定自定义模板，然后在模板中生成
<a>
标签，并且为其添加点击事件。下面是一个示例代码：
<!DOCTYPEhtml><html><head><metacharset="utf-8"><title>Layui Table 表格字段 templet 绑定事件</title><linkrel="stylesheet"href="https://cdn.staticfile.org/layui/2.6.8/css/layui.css"></head><body><tableid="demo"lay-filter="test"></table><scriptsrc="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script><scriptsrc="https://cdn.staticfile.org/layui/2.6.8/layui.js"></script><script>
layui.use(['table','jquery'],function(){var table = layui.table;var $ = layui.jquery;// 渲染表格
table.render({elem:'#demo',url:'/demo/table/user/',// 数据接口cols:[[// 表头{field:'id',title:'ID',width:80,sort:true},{field:'username',title:'用户名',width:120},{field:'email',title:'邮箱',width:150},{field:'operation',title:'操作',templet:'#operationTpl'}// 自定义操作列，使用 templet 属性指定模板]]});// 监听行工具事件
table.on('tool(test)',function(obj){var data = obj.data;// 获取当前行数据var layEvent = obj.event;// 获得 lay-event 对应的值if(layEvent ==='detail'){
layer.msg('查看操作');}elseif(layEvent ==='edit'){
layer.msg('编辑操作');}elseif(layEvent ==='delete'){
layer.confirm('确定删除该行数据？',function(index){// 这里写删除行数据的逻辑
layer.close(index);});}});// 绑定自定义操作列的点击事件$(document).on('click','.custom-operation',function(){var id =$(this).data('id');// 获取操作对应的数据 ID// 在这里写自定义操作的逻辑
console.log('点击了操作，ID为：'+ id);});});</script><!-- 自定义操作列的模板 --><scripttype="text/html"id="operationTpl"><a class="layui-btn layui-btn-xs custom-operation" lay-event="detail" data-id="{{d.id}}">查看</a><a class="layui-btn layui-btn-xs layui-btn-normal custom-operation" lay-event="edit" data-id="{{d.id}}">编辑</a><a class="layui-btn layui-btn-xs layui-btn-danger custom-operation" lay-event="delete" data-id="{{d.id}}">删除</a></script></body></html>
在这个示例中，使用了
templet
属性来指定了自定义操作列的模板，模板中使用了
{{d.id}}
来获取每行数据的ID，并且为每个操作按钮添加了
custom-operation
类。然后使用jQuery监听了这些按钮的点击事件，并在点击时获取了对应行数据的ID，可以在点击事件中编写自定义操作的逻辑。
文章推荐
【前端】Layui的表格常用功能，表单提交事件，表格下拉按钮点击事件，表格外的按钮点击事件
【Echarts】曲线图上方显示数字以及自定义值，标题和副标题居中，鼠标上显示信息以及自定义信息
【Echarts】柱状图上方显示数字以及自定义值，标题和副标题居中，鼠标上显示信息以及自定义信息
【随笔】程序员如何选择职业赛道，目前各个赛道的现状如何，那个赛道前景巨大
【随笔】程序员的金三银四求职宝典，每个人都有最合适自己的求职宝典
总结：温故而知新，不同阶段重温知识点，会有不一样的认识和理解，博主将巩固一遍知识点，并以实践方式和大家分享，若能有所帮助和收获，这将是博主最大的创作动力和荣幸。也期待认识更多优秀新老博主。
版权归原作者 全栈小5 所有， 如有侵权，请联系我们删除。