Layui Table 模板应用技巧全攻略

原创

于 2025-06-02 12:40:10 发布 · 1.1k 阅读

15 ·

CC 4.0 BY-SA版权

文章标签：

#layui #前端 #javascript #前端框架 #table #layui table #js

在现代 Web 开发中，表格是展示数据的核心组件之一，而 Layui Table 模板凭借其简洁易用、功能强大的特性，成为了众多开发者在构建数据可视化界面时的首选工具。无论是简单的数据展示，还是复杂的交互式报表，Layui Table 都能轻松应对。

然而，许多开发者在使用 Layui Table 时，往往只停留在基础功能的层面，未能充分发挥其强大的模板功能和自定义能力。本文将从基础功能入手，逐步深入到高级应用技巧，涵盖数据格式化、模板自定义、交互设计、性能优化等多个方面。通过丰富的示例和详细的代码解析，我们将带你领略 Layui Table 的强大功能，帮助你在实际项目中轻松实现复杂的数据展示和交互需求。无论你是初学者，还是有一定经验的开发者，相信都能从本书中获得有价值的启发和实用的技巧。让我们一起开启 Layui Table 的高效开发之旅吧！

1. Layui Table模板基础

1.1 模板定义与作用

Layui Table模板是一种基于Layui框架的表格展示与操作工具，主要用于在网页中高效地展示和处理数据。

定义：Layui Table模板是Layui UI框架的重要组成部分，它通过HTML、CSS和JavaScript的结合，提供了一种灵活且功能强大的表格解决方案。它允许开发者以简洁的代码实现复杂的表格布局、数据绑定、分页、排序、筛选等功能。
作用：
- 数据展示：能够清晰地展示结构化数据，支持多种数据格式，如JSON、数组等。例如，在一个电商后台管理系统中，使用Layui Table模板可以方便地展示商品列表、订单信息等数据，每行代表一个数据记录，每列代表一个字段，用户可以直观地查看数据内容。
- 功能增强：提供了丰富的功能，如分页、排序、筛选、搜索等。以分页功能为例，当数据量较大时，Layui Table模板可以自动将数据分成多页展示，用户可以通过点击页码轻松切换到不同的页面查看数据，提高了页面的加载速度和用户体验。排序功能则允许用户根据某一列的数据进行升序或降序排列，方便用户快速找到所需的数据。
- 交互操作：支持行点击、行选中、编辑等交互操作，方便用户对数据进行操作和管理。在一些需要用户对数据进行编辑的场景中，如用户信息管理页面，用户可以通过点击表格中的某一行进入编辑状态，对数据进行修改和保存，操作简单便捷。
- 自定义样式：允许开发者根据自己的需求对表格的样式进行自定义，包括表格的颜色、字体、边框等。这使得Layui Table模板能够更好地融入不同的网页设计风格，满足不同项目的需求。

2. 自定义模板实现方式

2.1 函数转义方式

在Layui Table模板中，函数转义是一种强大的自定义手段，它允许开发者通过编写JavaScript函数来动态生成表格中的内容，从而实现高度个性化的数据展示。

基本原理：函数转义的核心是通过templet属性绑定一个函数，该函数接收当前行的数据作为参数，返回自定义的HTML内容。这种方式使得开发者可以根据行数据的实际情况，灵活地生成表格单元格的内容。
应用场景：
- 数据格式化：对于一些需要特殊格式化的数据，如日期、金额等，函数转义可以轻松实现。例如，将日期数据从2025-06-02格式化为2025年06月02日，只需在templet中编写相应的格式化函数。
- 条件渲染：根据数据的不同值，显示不同的内容或样式。例如，在订单状态列中，根据订单状态的值显示不同的文字和颜色，如“已发货”显示为绿色，“待发货”显示为黄色。
- 复杂内容展示：可以生成包含HTML标签的复杂内容，如按钮、链接、图片等。例如，在操作列中添加“编辑”“删除”按钮，方便用户对数据进行操作。
示例代码：

layui.use('table', function(){
    var table = layui.table;
    table.render({
        elem: '#test',
        data: [{
            id: 1,
            name: '商品A',
            price: 100,
            status: 1
        }, {
            id: 2,
            name: '商品B',
            price: 200,
            status: 0
        }],
        cols: [[
            {field: 'id', title: 'ID'},
            {field: 'name', title: '商品名称'},
            {field: 'price', title: '价格', templet: function(d){
                return '￥' + d.price.toFixed(2);
            }},
            {field: 'status', title: '状态', templet: function(d){
                return d.status === 1 ? '<span style="color: green;">已发货</span>' : '<span style="color: yellow;">待发货</span>';
            }}
        ]]
    });
});

2.2 绑定模板选择器

绑定模板选择器是另一种实现自定义模板的方式，它通过指定一个CSS选择器，将模板内容绑定到表格的某个单元格中，这种方式使得模板的定义更加清晰和灵活。

基本原理：在表格的cols配置中，通过templet属性指定一个CSS选择器，该选择器指向一个包含模板内容的HTML元素。Layui会自动将该模板内容渲染到对应的单元格中，并且模板内容可以访问当前行的数据。
应用场景：
- 复用模板：当多个单元格需要使用相同的模板时，可以将模板定义在一个独立的HTML元素中，然后通过选择器绑定到多个单元格，避免重复编写模板代码。
- 复杂模板结构：对于一些结构较为复杂的模板，如包含多个嵌套元素的模板，使用模板选择器可以更清晰地定义模板结构，便于维护和修改。
- 动态模板切换：根据不同的条件，动态切换模板选择器所指向的模板内容，实现更灵活的表格展示效果。
示例代码：

<table id="test"></table>
<script type="text/html" id="priceTpl">
    ￥{
  
  {d.price.toFixed(2)}}
</script>
<script type="text/html" id="statusTpl">
    {
  
  {d.status === 1 ? '<span style="color: green;">已发货</span>' : '<span style="color: yellow;">待发货</span>'}}
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        table.render({
            elem: '#test',
            data: [{
                id: 1,
                name: '商品A',
                price: 100,
                status: 1
            }, {
                id: 2,
                name: '商品B',
                price: 200,
                status: 0
            }],
            cols: [[
                {field: 'id', title: 'ID'},
                {field: 'name', title: '商品名称'},
                {field: 'price', title: '价格', templet: '#priceTpl'},
                {field: 'status', title: '状态', templet: '#statusTpl'}
            ]]
        });
    });
</script>
<