zhao
在現代網頁開發中，動態呈現資料是一項常見的需求，特別是在前端處理大量資料的顯示時，需要一種靈活且高效的方式來實現。Layui 是一個基於 JavaScript 的開源 UI 框架，專為後端驅動而生，提供了豐富的元件庫和簡潔易用的 API。本文將探討如何使用 Layui 在前端進行動態渲染表格、新增或刪除行與列以及處理複雜表頭合併的功能。
首先，我們需要在 HTML 中定義一個基本的表格結構，並包含必要的 Layui 樣式。以下是最基本的前置碼：
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8">
<title></title>
<!-- 引入 layui.css -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@3.2.0/dist/css/layui.min.css">
</head>
<body>
<div id="app">
<table></table>
</div>
<!-- 引入 layui.js -->
<script src="https://cdn.jsdelivr.net/npm/layui@3.2.0/dist/layui.all.min.js"></script>
<script type="text/javascript">
// 請在此處輸入您的JavaScript程式碼
</script>
</body>
</html>
接下來，我們可以使用 Layui 的 `table` 模組來創建可交互式的表格。Layui 的 `table` 提供了一系列方法來管理表格數據，例如插入新行、更新已存在行、移除選中的行等等。以下是一些關鍵步驟：
1. 初始化表格：在 `document.ready()` 事件中或者在 `DOMContentLoaded` 事件後，您可以初始化表格並設定所需的配置選項。
var tableIns = layui.table.render({
elem: '#app', // 指定容器元素
url: 'data.json', // AJAX獲取資料的路徑（假設）
cols: [[ // 表格欄位陣列
{ field: 'id', title: 'ID' },
{ field: 'name', title: '名稱' },
{ field: 'price', title: '價格' },
{ fixed: 'right', align: 'center', templet: '#actionTpl' } // 固定右邊欄位
]],
page: true // 啟用分頁功能
});
2. 新增行：當用戶想要新增一行時，可以通過點擊按鈕或其他互動方式觸發一個函數來實現在表格尾部新增一條記錄。
function addRow() {
layer.open({
type: 1,
area: ['450px', '260px'],
content: '<form action="">' +
'<input type="text" name="name" placeholder="產品名稱" autocomplete="off" class="layui-input" style="width: 97%;" />' +
'<input type="number" name="price" placeholder="單價(元)" autocomplete="off" class="layui-input" style="width: 97%; margin-top: 10px;" />' +
'<button class="layui-btn" lay-submit lay-filter="addGoods">確認新增</button>' +
'</form>'
});
}
// 監聽提交事件
layui.use('form', function () {
var form = layui.form();
form.on('submit(addGoods)', function (data) {
console.log(data); // 這裡可以處理資料驗證和其他邏輯
$.post('/api/addGoods', data.field, function (res) {
if (res.code === 0) {
layer.msg('新增成功');
// 刷新表格
tableIns.reload();
} else {
layer.alert('新增失敗:' + res.message);
}
layer.closeAll('loading');
return false;
}, 'JSON');
return false;
});
});
3. 刪除行：當用戶選擇某一行並且點擊「刪除」按鈕時，您可以在伺服器上執行刪除操作，然後從表格中移除該行。
// 監聽每一行的點擊事件
tableIns.on('row(demo)', function (obj) {
$(this).find('.delBtn').unbind().click(function () {
layer.confirm('您確定要刪除此筆紀錄嗎？', function (index) {
$.ajax({
url: '/api/deleteGoods/' + obj.data.id,
success: function (res) {
if (res.code == 0) {
layer.msg('刪除成功！');
tableIns.remove(obj.dataIndex); // 移除選中的行
} else {
layer.msg('刪除失敗！');
}
layer.close(index);
}
})
})
});
});
4. 複雜表頭合併：Layui 的 `table` 支持多級表頭，這意味著您可以將不同的表頭類型結合在一起以滿足更復雜的展示需求。
var complexTableIns = layui.table.render({
elem: '#complexApp', // 指定容器的 id
height: "full-180", // 高度自適應，最大為180px
cellMinWidth: 80, // 最小單元格寬度
headerRow: true, // 是否給首行添加背景色
align: 'center', // 居中對齊
page: true, // 翻頁
limit: 10, // 每頁多少條
limits: [10, 20, 30], // 每頁條件的選項
cols: [ // 欄位設定
[ // 第一層表頭
{ field: 'A1', title: '第一層表頭1', width: 150 },
{ field: 'A2', title: '第一層表頭2', width: 150 }
],
[ // 第二層表頭
{ field: 'B1', title: '第二層表頭1', colspan: 2 },
{ field: 'B2', title: '第二層表頭2' }
],
[{ // 第三層表頭開始新的跨欄
field: 'C1', title: '第三層表頭1', rowspan: 2, colspan: 2
}]
]
});
總結來說，Layui 作為一個前端 UI 框架，提供了強大的功能來幫助開發人員快速構建和管理動態表格。透過上述示例代碼，您可以輕鬆地整合到自己的項目中，並根據實際情況調整配置選項和業務邏輯。
