Layui 是一款轻量级的前端 UI 框架,其中的 layui.table 组件是用来展示表格数据的组件。下面是 layui.table 的用法示例。
基本用法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui.table 基本用法示例</title>
<link rel="stylesheet" href="//cdn.staticfile.org/layui/2.5.7/css/layui.min.css">
</head>
<body>
<table id="demo" lay-filter="test"></table>
<script src="//cdn.staticfile.org/layui/2.5.7/layui.min.js"></script>
<script>
layui.use(['table'], function(){
var table = layui.table;
// 渲染表格
table.render({
elem: '#demo',
url: '/api/getData',
cols: [[
{field: 'id', title: 'ID', width: 80},
{field: 'username', title: '用户名', width: 120},
{field: 'email', title: '邮箱'},
{field: 'phone', title: '手机'},
{field: 'status', title: '状态', width: 80},
{field: 'operate', title: '操作', toolbar: '#operateTpl', width: 160},
]],
});
// 监听工具条
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'edit'){
// 编辑操作
layer.msg('编辑 ID:'+ data.id);
} else if(obj.event === 'del'){
// 删除操作
layer.confirm('确定删除 ID 为 '+data.id+' 的数据吗?', function(index){
obj.del();
layer.close(index);
});
}
});
});
</script>
<script type="text/html" id="operateTpl">
<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>
</script>
</body>
</html>
上述代码中,我们使用 layui.table 组件来展示表格数据,包括以下几个步骤:
- 引入 layui 的 CSS 和 JS 文件。
- 在 HTML 中添加一个空的
<table>
元素,并指定其id
和lay-filter
属性。 - 使用
layui.use()
方法加载 layui.table 模块,并在回调函数中获取table
对象。 - 使用
table.render()
方法渲染表格,其中elem
属性指定表格元素的选择器,url
属性指定获取数据的 URL,cols
属性指定表头和列属性。 - 使用
table.on()
方法监听表格中的工具条,包括编辑和删除操作。 - 在 HTML 中添加一个隐藏的模板元素,用来定义工具条的 HTML 结构。
更多用法
除了基本用法外,layui.table 还支持一些高级用法,包括分页、排序、筛选、合并等功能。具体用法可以参考 layui.table 的官方文档。