sun
在網頁開發中，前端技術扮演着至關重要的角色。其中，Layui框架以其輕量級、高效性和豐富的組件庫而備受開發者青睞。本文將重點介紹如何使用Layui實現常見的表格操作，以及與之相關的表單提交事件、表格下拉按鈕點擊事件和表格外部的按鈕點擊事件。
1. Layui表格基礎
Layui提供了強大的表格組件`layui.table`，它支持分頁、排序、搜索等功能，並且可以很方便地與服務器端數據進行交互。以下是如何初始化一個基本的表格示例:
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<meta charset="UTF-8" />
<title></title>
<!-- 引入Layui的核心文件 -->
<script src="https://cdn.bootcss.com/layui/2.5.4/layui.js"></script>
<!-- 引入CSS樣式 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/layui/2.5.4/layui.css" />
</head>
<body>
<div id="app">
<table></table>
</div>
<script type="text/javascript">
// 在頁面加載完畢後執行
layui.use(['table'], function() {
var table = layui.table; // 獲取表格模塊對象
// 初始化表格結構
table.render({
elem: '#app', // 指定表格容器ID
url: 'your_server_data_source', // 遠程數據接口地址
page: true, // 開啓分頁
cols: [[ // 表格列定義
{ field: 'id', title: 'ID' },
{ field: 'name', title: '名稱' },
{ field: 'price', title: '價格', align: 'right'},
{ fixed: 'right', width: 130, templet: '#operationTpl' } // 固定右列模板
]]
});
// 自定義操作模板
var operationTpl = `<a class='layui-btn layui-btn-xs' lay-event="edit">編輯</a>` +
`<a class='layui-btn layui-btn-danger layui-btn-xs' lay-event="del">刪除</a>`;
function setOperation(index, row) {
return operationTpl;
}
// 監聽行單擊事件
table.on('row(app)', function(obj){
console.log(obj); // 當前行所在DOM元素
console.log(obj.data); // 當前行對應的數據
console.log(obj.tr[0]); // 當前行所在的TR DOM元素
});
});
</script>
</body>
</html>
2. 表單提交事件
Layui中的表單通常通過JavaScript代碼來處理提交事件。你可以使用`form.submit()`方法來實現這一目的:
$(document).ready(function () {
$('#myForm').submit(function (e) {
e.preventDefault();
$.ajax({
type: "POST",
url: "/your_api_endpoint",
data: $('#myForm').serialize(),
success: function (response) {
if (response.status === 'success') {
alert('Submit successful');
} else if (response.status === 'error') {
alert('Error occurred while submitting the form');
}
},
error: function (xhr, status, error) {
console.error(`Submission failed with ${error}`);
}
});
});
});
在上述代碼中，我們首先綁定了`#myForm`表單的提交事件，然後阻止了默認行爲（即瀏覽器自動刷新）。接着，我們將表單數據序列化爲字符串並通過Ajax發送到指定的URL。成功響應時彈出確認消息框；失敗時則輸出錯誤信息。請確保你有權限訪問`/your_api_endpoint`以避免安全問題。
3. 觸發表格的下拉按鈕點擊事件
Layui允許你在表格頭部或單元格中添加下拉菜單。要捕獲這些菜單項被選擇的事件，可以使用`table.on(‘toolbar(gridId)’, function)`或`table.on(‘tool(gridId)’, function(obj, value, data))`方法:
// 監聽表格頭工具欄點擊事件
table.on('toolbar(demo)', function(obj){
console.log(obj.type); // 類型，例如：詳情或者刪除
console.log(obj.checkStatus); // 選中行的狀態，例如：{checked: [1,2,3], count: 3, all: false}
switch (obj.type) {
case 'detail':
break;
case 'delete':
layer.confirm('確定刪除選中的記錄？', function(index){
table.reload('demo', {where: {check: obj.checkStatus. checked}}, function(){
layer.close(index);
})
});
break;
}
});
// 監聽單元格工具點擊事件
table.on('tool(demo)', function(obj){
var data = obj.data;
var layEvent = obj.event;
var tr = obj.tr;
if(layEvent == 'edit'){
layer.tips('<input type="text" style="display: block; width: 150px;">', tr, {
time: 0
});
}else if(layEvent == 'del'){
layer.confirm('真的刪除行麼', function(index){
table.remove(tr).draw();
layer.close(index);
});
}else if(layEvent == 'update'){
layer.msg('更新成功');
}
});
在上面的例子中，`toolbar(gridId)`用於監聽整個表格頭部工具條上的按鈕點擊事件，而`tool(gridId)`則是針對每個單元格的工具圖標所觸發的操作。當用戶選擇某個操作時，對應的回調函數會被調用。在這裏，我們可以看到“編輯”操作會顯示一個輸入框讓用戶修改內容；“刪除”操作則會彈出一個確認對話框並在得到肯定回答後移除此行數據。
