sun
在前端開發中，Layui是一款流行的開源前端框架，以其簡潔高效的特點而受到廣泛歡迎。其中，Layui的table組件提供了強大的數據展示功能，包括數據的分頁、排序、搜索等功能。本文將探討如何處理Layui table中的行選擇（即“勾選”）事件，以及一些常見的模塊應用技巧。
1. 表格勾選事件的實現與自定義
在Layui的table組件中，我們可以通過監聽`checkboxChange`事件來響應表格中的複選框變化。以下是如何使用這個事件的示例代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<!-- Layui 的 CDN 鏈接，請確保網絡暢通 -->
<link rel="stylesheet" href="https://cdn.bootcss.com/layui/2.5.6/layui.min.css" />
<script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script>
<script src="https://cdn.bootcss.com/layui/2.5.6/layui.all.js"></script>
</head>
<body>
<div class="layui-fluid">
<div class="layui-row layui-col-space15">
<div class="layui-col-md8">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
<legend>Table - 基本用法</legend>
<div class="layui-field-box">
<table id="test-table" lay-filter="test-table"></table>
</div>
</fieldset>
</div>
</div>
</div>
</body>
<script type="text/javascript">
// 初始化表格數據
var data = [{
id: 1,
name: '張三',
age: 27,
gender: true
}, {
id: 2,
name: '李四',
age: 29,
gender: false
}];
// 渲染表格
layui.use('table', function() {
var table = layui.table;
table.render({
elem: '#test-table' //指定容器
, height: 315 //設置高度
, width: 600 //設置寬度
, url: '/api/data' //數據接口
, method: 'post' //請求方式
, page: true //開啓分頁
, cols: [[ //表頭
{ field: 'id', title: 'ID' }
, { field: 'name', title: '姓名' }
, { field: 'age', title: '年齡' }
, { field: 'gender', title: '性別', templet: '#switchTpl' }
, { fixed: 'right', title: '操作', align: 'center', toolbar: "#barDemo" }
]]
, even: true //開啓隔行背景
});
// 監聽檢查框選中事件
table.on('checkbox(test-table)', function(obj) {
console.log(obj.checked); //當前是否選中狀態
console.log(obj.data); //被點擊行的完整數據對象
console.log(obj.type); //如果click原生事件綁定，則會打印此時的event.type值，否則爲空
console.log(obj.page); //如果帶分頁，則此時會得到當前頁碼
console.log(obj.currPage); //同上
});
});
// 模板函數
function statusTpl (value, row, index) {
return '<input type="checkbox" name="' + value + '_' + index + '" lay-skin="primary">';
}
function switchTpl (value, row, index) {
if (value == true) {
return '<span class="layui-badge layui-bg-green">男</span>';
} else if (value == false) {
return '<span class="layui-badge layui-bg-orange">女</span>';
}
}
// 工具條事件
layui.use(['element', 'layer'], function () {
var element = layui.element; //麪包屑導航
var layer = layui.layer; //彈出層
//監聽工具條
element.on('tool(test-table)', function(obj){
var data = obj.data;
var layEvent = obj.event;
if(layEvent === 'edit'){
layer.msg('編輯行：'+ JSON.stringify(data));
} else if(layEvent === 'del'){
layer.confirm('真的刪除行麼', function(index){
//
layer.close(index);
table.reload('test-table'); //重載表格
});
} else if(layEvent === 'update'){
layer.alert('更新行：'+ JSON.stringify(data), function(index){
layer.close(index);
});
}
});
});
</script>
</html>
在這個例子中，我們定義了一個簡單的表格，它有五個字段：`id`、`name`、`age`、`gender`和一個操作列。當用戶選中或取消某一行時，`checkboxChange`事件會被觸發，你可以根據需要執行相應的業務邏輯。例如，你可能想要保存用戶的篩選條件或者發送一個包含已選項的數據到後端服務器。
2. Layui Table的擴展應用
除了基本的表格功能外，Layui還提供了一些高級特性，比如動態加載數據、虛擬滾動、異步渲染等等。以下是一些關於這些功能的簡要說明：
a. 動態加載數據
如果你需要在表格中顯示大量的數據，但又不希望一次性全部加載完成，可以採用懶加載的方式。Layui可以通過`limit`參數來實現這一點，每次只加載一定數量的記錄。
table.render({
url: '/api/data',
method: 'get',
page: true,
limit: 10, //每頁顯示數量
cols: [...]
});
b. 虛擬滾動
對於非常長的列表，可以使用虛擬滾動機制來提高性能。這使得只有屏幕可見的部分纔會真正地從服務器獲取或渲染。
table.render({
elem: '#myTable',
height: 500, //總高度
even: true,
scroll: true, //啓用虛擬滾動
size: 'sm', //小尺寸
cols: [...]
});
c. 異步渲染
有時，你可能希望在表格中嵌入複雜的內容，如圖表或其他交互式元素。在這種情況下，你可能不想等待整個頁面完全加載後再開始工作。Layui允許你在表格內容準備就緒之後再進行渲染。
table.render({
elem: '#myTable',
loading: true, //顯示加載圖標
done: function(d){
//在此處添加任何必要的異步任務
//例如：調用API獲取更多數據
// ...
// 完成後重新渲染表格
table.reload('#myTable', d);
},
cols: [...]
});
Layui table組件是一個強大且靈活的前端解決方案，可以幫助開發者快速構建美觀易用的數據管理界面。通過上述介紹的方法和技巧，你應該能夠更好地理解和利用該組件的功能，以滿足不同的項目需求。
