欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区

LOGO OA教程 ERP教程 模切知識交流 PMS教程 CRM教程 開發文檔 其他文檔  
 
網站管理員

【前端】Layui的表格常用功能,表單提交事件,表格下拉按鈕點擊事件,表格外的按鈕點擊事件

freeflydom
2024年4月23日 11:34 本文熱度 784

前言

最近在維護老系統,盡量使用過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 編輯過
點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。
點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理,結合碼頭的業務特點,圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體,是物流碼頭及其他港口類企業的高效ERP管理信息系統。
點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。
點晴免費OA是一款軟件和通用服務都免費,不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。
Copyright 2010-2025 ClickSun All Rights Reserved