小企业来说 电子商务网站服务器的建设方案,2024北京又开始核酸了吗今天,宣传片制作公司排行,微商城 网站制作欢迎来到《小5讲堂》 大家好#xff0c;我是全栈小5。 这是《前端》系列文章#xff0c;每篇文章将以博主理解的角度展开讲解#xff0c; 特别是针对知识点的概念进行叙说#xff0c;大部分文章将会对这些概念进行实际例子验证#xff0c;以此达到加深对知识点的理解和掌握… 欢迎来到《小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-filterlay-submit
formbutton typesubmit lay-filterbtnForm lay-submit保存/button
/formjs设置记得在方法后面加上一个return false否则会自动刷新页面
form.on(submit(btnForm), function (d) {return false
})表格字段事件
表单操作按钮的默认和自定义事件都是会触发同一个方法需要带上指定属性设置不同的值来区分事件 如果想在Layui的表格中使用templet重新初始化生成a标签并且绑定点击事件可以在定义表格列时使用templet属性来指定自定义模板然后在模板中生成a标签并且为其添加点击事件。下面是一个示例代码
!DOCTYPE html
html
headmeta charsetutf-8titleLayui Table 表格字段 templet 绑定事件/titlelink relstylesheet hrefhttps://cdn.staticfile.org/layui/2.6.8/css/layui.css
/head
bodytable iddemo lay-filtertest/tablescript srchttps://cdn.staticfile.org/jquery/3.5.1/jquery.min.js/script
script srchttps://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 typetext/html idoperationTpla classlayui-btn layui-btn-xs custom-operation lay-eventdetail data-id{{d.id}}查看/aa classlayui-btn layui-btn-xs layui-btn-normal custom-operation lay-eventedit data-id{{d.id}}编辑/aa classlayui-btn layui-btn-xs layui-btn-danger custom-operation lay-eventdelete data-id{{d.id}}删除/a
/script/body
/html在这个示例中使用了templet属性来指定了自定义操作列的模板模板中使用了{{d.id}}来获取每行数据的ID并且为每个操作按钮添加了custom-operation类。然后使用jQuery监听了这些按钮的点击事件并在点击时获取了对应行数据的ID可以在点击事件中编写自定义操作的逻辑。
文章推荐
【前端】Layui的表格常用功能表单提交事件表格下拉按钮点击事件表格外的按钮点击事件
【Echarts】曲线图上方显示数字以及自定义值标题和副标题居中鼠标上显示信息以及自定义信息
【Echarts】柱状图上方显示数字以及自定义值标题和副标题居中鼠标上显示信息以及自定义信息
【随笔】程序员如何选择职业赛道目前各个赛道的现状如何那个赛道前景巨大
【随笔】程序员的金三银四求职宝典每个人都有最合适自己的求职宝典 总结温故而知新不同阶段重温知识点会有不一样的认识和理解博主将巩固一遍知识点并以实践方式和大家分享若能有所帮助和收获这将是博主最大的创作动力和荣幸。也期待认识更多优秀新老博主。
