您现在的位置是:首页 > 技术教程 正文

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

admin 阅读: 2024-03-28
后台-插件-广告管理-内容页头部广告(手机)

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

在这里插入图片描述

目录

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

前言

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

核心方法

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

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

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

常用模块

var $ = layui.$; var layer = layui.layer; var table = layui.table; var form = layui.form;
  • 1
  • 2
  • 3
  • 4

在 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>
  • 1
  • 2
  • 3

js设置,记得在方法后面加上一个return false,否则会自动刷新页面

form.on('submit(btnForm)', function (d) { return false })
  • 1
  • 2
  • 3
  • 4

表格字段事件

表单操作按钮的默认和自定义事件,都是会触发同一个方法,需要带上指定属性,设置不同的值来区分事件
如果想在Layui的表格中使用templet重新初始化生成标签,并且绑定点击事件,可以在定义表格列时使用templet属性来指定自定义模板,然后在模板中生成标签,并且为其添加点击事件。下面是一个示例代码:

DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Layui Table 表格字段 templet 绑定事件title> <link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.6.8/css/layui.css"> head> <body> <table id="demo" lay-filter="test">table> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js">script> <script src="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('查看操作'); } else if(layEvent === 'edit'){ layer.msg('编辑操作'); } else if(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> <script type="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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64

在这个示例中,使用了templet属性来指定了自定义操作列的模板,模板中使用了{{d.id}}来获取每行数据的ID,并且为每个操作按钮添加了custom-operation类。然后使用jQuery监听了这些按钮的点击事件,并在点击时获取了对应行数据的ID,可以在点击事件中编写自定义操作的逻辑。

文章推荐

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

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

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

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

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

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

标签:
声明

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

在线投稿:投稿 站长QQ:1888636

后台-插件-广告管理-内容页尾部广告(手机)
关注我们

扫一扫关注我们,了解最新精彩内容

搜索