前言
最近在維護老系統，盡量使用過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) {
return false
})
表格字段事件
表單操作按鈕的默認和自定義事件，都是會觸發同一個方法，需要帶上指定屬性，設置不同的值來區分事件
如果想在Layui的表格中使用templet重新初始化生成<a>標簽，并且綁定點擊事件，可以在定義表格列時使用templet屬性來指定自定義模板，然后在模板中生成<a>標簽，并且為其添加點擊事件。下面是一個示例代碼：
<!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>
在這個示例中，使用了templet屬性來指定了自定義操作列的模板，模板中使用了{{d.id}}來獲取每行數據的ID，并且為每個操作按鈕添加了custom-operation類。然后使用jQuery監聽了這些按鈕的點擊事件，并在點擊時獲取了對應行數據的ID，可以在點擊事件中編寫自定義操作的邏輯。
————————————————
版權聲明：本文為博主原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。
原文鏈接：https://blog.csdn.net/lmy_520/article/details/137067017
該文章在 2024/4/23 11:36:32 編輯過
400 186 1886
