在使用
Layui 框架进行表格
渲染时，主要依赖其 `table` 模块来实现。该模块提供了丰富的功能，包括分页、排序、数据加载、自定义列模板等。以下是关于
Layui 表格
渲染的实现方法及使用指南：
### 基本结构
首先，在
HTML 页面中需要准备一个用于承载表格的容器，通常是一个具有
指定 `id` 的 `<table>` 元素，并设置 `lay-filter` 属性以供 JavaScript 调用。
```
html
<table class="
layui-table" id="demo" lay-filter="test"></table>
```
### 加载模块并初始化表格
Layui 的模块化设计要求在使用前先通过 `
layui.use()` 加载所需模块。在实际开发中，通常会同时加载 `table` 和 `layer` 模块，以便在表格操作中使用弹出层功能[^1]。
```javascript
layui.use(['table', 'layer'], function () {
const layer =
layui.layer;
const table =
layui.table;
// 初始化表格配置
});
```
### 配置表格参数
在 `table.render()` 方法中传入配置对象，定义表格的行为和样式。常用参数如下：
- **elem**：绑定表格容器的 `id` 或 DOM 元素。
- **height**：设置表格的高度，可以是固定值或百分比。
- **url**：
指定从服务器获取数据的接口地址。
- **method**：请求方式，默认为 `get`，也可以设为 `post`。
- **contentType**：发送请求时的内容类型，如 `application/
json`。
- **page**：是否开启分页功能。
- **parseData**：用于解析后端返回的数据格式。例如，将原始数据转换为
Layui 所需的结构（code、msg、count、data）[^2]。
- **cols**：定义表格列的结构，每个字段对应一列，支持自定义宽度、排序、固定列等功能。
- **text**：设置无数据时的提示信息。
示例代码如下：
```javascript
table.render({
elem: '#demo',
height: window.screen.height * 0.59,
url: '/info/list',
method: 'post',
contentType: "application/
json",
page: true,
parseData: function (res) {
return {
code: 0,
msg: "",
count: res.length,
data: res
};
},
cols: [[
{ field: 'infoId', title: 'ID', width: 80, sort: true, fixed: 'left' },
{ field: 'countryId', title: '国家名称', width: 80 },
{ field: 'universityId', title: '用户名', width: 80 },
{ field: 'directionId', title: '性别', width: 80 },
{ title: '大学英文', width: 170, templet: '<div>{{d.university.universityNameEN}}</div>' }
]],
text: { none: '无数据' }
});
```
### 自定义列内容与操作按钮
Layui 支持通过 `templet` 属性来自定义列的显示内容，尤其适用于展示复杂结构或操作按钮。例如，可以在
HTML 中定义一个模板脚本，并在 `cols` 中引用它[^3]。
```
html
<script type="text/
html" id="barDemo">
<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>
```
然后在 `cols` 中添加如下配置：
```javascript
{
title: '操作',
width: 150,
align: 'center',
fixed: 'right',
toolbar: '#barDemo'
}
```
### 后端接口规范
为了确保前端能够正确解析数据，后端接口应遵循一定的格式标准。通常返回
JSON 数据结构包含状态码、消息、总条数和具体数据列表。例如：
```
json
{
"code": 0,
"msg": "加载成功！",
"data": [
{
"goods_id": 1,
"goods_name": "商品A"
},
...
],
"count": 100
}
```
在 PHP 中，可以通过以下方式构建响应：
```php
public function index_data2() {
$p = input('p') ?? 1;
$p_n = input('p_n') ?? config('paginate.list_rows');
$list = Db::table('tp_goods')->order('goods_id ASC')->limit(($p - 1) * $p_n, $p_n)->select();
$count = Db::table('tp_goods')->count();
return
json(['code' => 0, 'msg' => '加载成功！', 'data' => $list, 'count' => $count]);
}
```
### 常见问题与解决方案
1. **表格无法加载数据**
- 检查 `url` 是否正确，以及后端接口是否正常返回数据。
- 确保 `parseData` 函数中的字段名与后端返回的一致。
- 查看浏览器控制台是否有网络错误或 JS 报错。
2. **分页不生效**
- 确认 `page: true` 已启用。
- 检查后端是否支持分页逻辑，并返回正确的 `count` 值。
3. **列宽设置无效**
- 确保 `width` 单位正确，可以是像素或百分比。
- 使用 `fixed` 属性固定某些列，避免被其他列影响布局。
4. **自定义列内容不显示**
- 核对 `templet` 中的变量名是否与数据源一致。
- 检查
HTML 模板是否正确引用，并确保没有语法错误。
---
扫一扫
6890
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
