Layui是一款轻量级的前端UI库，其表格部分功能十分强大且易于使用。本文从多个方面进行阐述，探讨layui表格的使用和特殊处理。
一、layui表格图片
在表格中添加图片可让数据更加生动直观。Layui表格提供了两种方法添加图片：
1. 在table中使用img标签添加图片
<table class="layui-table">
<thead></thead>
<tbody>
<tr>
<td><img src="images/img1.png"></td>
</tr>
</tbody>
</table>
2. 使用laytpl模板引擎渲染
<table class="layui-table">
<thead></thead>
<tbody>
<tr>
<td>
<div class="layui-table-cell laytable-cell-1-0" style="padding: 0;margin: 0;">
{{# if(d.status === 0){ }}
<img src='images/img1.png'>
{{# }else{ }}
<img src='images/img2.png'>
{{# } }}
</div>
</td>
</tr>
</tbody>
</table>
二、使用layui制作表格
Layui提供了十分便捷的表格制作方式，只需即可搭建基础表格
<table class="layui-table">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>小A</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>小B</td>
<td>20</td>
<td>女</td>
</tr>
<tr>
<td>3</td>
<td>小C</td>
<td>22</td>
<td>男</td>
</tr>
</tbody>
</table>
三、layui表格分页
当表格的数据量过大时，使用分页确保页面能够流畅地加载和浏览。Layui表格提供了方便的分页配置。
1. 在table中加入page属性，自动渲染分页
<table id="userTable" class="layui-table" lay-filter="userTableId" lay-data="{page:true, limit:10}">
<thead></thead>
<tbody>
<tr>
<td>1</td>
<td>小A</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>小B</td>
<td>20</td>
<td>女</td>
</tr>
...
</tbody>
</table>
2. 使用laypage模块手动控制分页
layui.use(['table','laypage'], function(){
var table = layui.table;
var laypage = layui.laypage;
//数据表格配置
table.render({
elem: '#userTable',
cols: [[
{field:'id', title:'ID', sort:true},
{field:'name', title:'姓名'},
{field:'age', title:'年龄'},
{field:'sex', title:'性别'}
]],
data: [],
});
var data = [
{id:1, name:'小A', age:'18', sex:'男'},
{id:2, name:'小B', age:'20', sex:'女'},
{id:3, name:'小C', age:'22', sex:'男'},
...
];
//分页配置
laypage.render({
elem: 'page',
limit: 10,
count: data.length,
jump: function(obj){
var currData = data.concat().splice(obj.curr*obj.limit-obj.limit, obj.limit);
table.reload('userTable', {
data: currData
});
}
});
});
四、layui表格异常回调
使用Ajax或其他方式异步加载数据时，出现错误的情况是时常发生的。Layui表格提供了异常回调，让我们可以自定义错误处理方式。
var table = layui.table;
table.render({
//...
//异常回调
done:function(res, curr, count) {
if (res.code != 0) {
layer.msg(res.msg, {icon: 5, time: 2000});
}
}
});
五、layui表格排序
点击表格头部即可转换排序方式。默认情况下，数据表格的数据按主键默认顺序存在。排序和自定义类似，只需在后面加入 sort:true 即可，如下：
<thead>
<tr>
<th lay-data="{field:'id', sort:true}">ID</th>
<th lay-data="{field:'username', sort:true}">用户名</th>
<th lay-data="{field:'age', sort:true}">年龄</th>
</tr>
</thead>
六、用layui写一列表格
为了方便整理，这里我们使用laypage异步模拟加载数据。
layui.use(['table','laypage'], function(){
var table = layui.table;
var laypage = layui.laypage;
table.render({
elem: '#userTable',
layout: ['prev', 'page', 'next'],
cols: [[
{field:'id', title:'ID', sort:true},
{field:'username', title:'用户名'},
{field:'age', title:'年龄'},
{field:'sex',width:80, title:'性别'}
]],
data: [],
page:false,
});
laypage.render({
elem: 'page',
limit: 10,
count: 50,
jump: function(obj){
var currData = mockData.concat().splice(obj.curr*obj.limit-obj.limit, obj.limit);
table.reload('userTable', {
data: currData
});
}
});
var mockData = [
{id:1, username:'小A', age:'18', sex:'男'},
{id:2, username:'小B', age:'20', sex:'女'},
{id:3, username:'小C', age:'22', sex:'男'},
...
];
});
七、layui表格导出pdf
在表格数据量的情况下，依靠浏览器直接复制粘贴可能会遇到范围超出问题。为了更好的导出表格，可以使用 Layui 的 Excel 组件将表格数据导出为 Excel、Pdf 或 Csv 等格式。
在文档正文中操作方式就不展示具体代码了，代码你可以从layui官方网站获得。
八、layui表格重载
Layui表格提供了非常方便的API，让我们可以对表格进行重载。例如，在输入框中填写关键词，然后点击搜索，就可以重新从服务器获取数据并进行表格重载，实现了快速的搜索和数据动态更新。
layui.use('table', function() {
var table = layui.table;
//渲染表格
table.render({
//...
});
//监听提交
form.on('submit(search)', function(data) {
var key = data.field.key;
//执行重载
table.reload('userTable', {
where: {
key: key
}
});
});
});
九、layUI表格添加序号
通常我们在表格开头可以添加序号列，使数据显得更加清楚明朗。
var table = layui.table;
table.render({
elem: '#userTable',
cols: [[
{type: 'numbers'},
{field:'id', title:'ID', sort:true},
{field:'username', title:'用户名'},
{field:'age', title:'年龄'},
{field:'sex', title:'性别'}
]],
data: [],
});
到这里，Layui表格方法使用都得到了详细的解析。使用Layui表格可以得到快速开发和良好的用户体验的提升。Layui的监听事件方法十分丰富，开发者可自行探索更多的实现方式。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/186243.html
微信扫一扫 
支付宝扫一扫 