本文共 3304 字，大约阅读时间需要 11 分钟。

LayUI 数据表格学习和应用

在前言中，我们谈到了三种主要的渲染方式：方法渲染、自动渲染以及转换数据表格。在本文中，我们将重点介绍方法渲染这种方式的使用方法，原因在于其简洁且灵活。通过在 HTML 网页中写入简单的 JS 代码，便能简单实现数据展示和功能拓展。这一方式适合希望快速实现功能的开发者，并能够根据具体需求进行定制和扩展。在学习和理解这三种渲染方式的原理后，我们可以灵活选择最适合自己项目需求的方式进行使用。

以下将通过一个实际项目的案例来详细介绍 LayUI 表格的使用方法。

示例代码如下：

以上是 HTML 中需要添加的基本表格标签。接下来，我们来看 JS 端的代码实现：

var table = layui.table;
table.render({
    elem: '#userTable',
    height: 'full-210',
    url: '*',
    where: {
        is_manager: 1,
        loginKey: sessionStorage.getItem("account_login_key")
    },
    page: {
        limit: 50,
        current_page: 1
    },
    cols: [
        { 
            type: 'checkbox',
            width: 50,
            fixed: 'left'
        },
        {
            field: 'tenantId',
            title: '机构编码',
            width: 120
        },
        {
            field: 'tenantName',
            title: '机构名称',
            width: 120
        },
        {
            field: 'id',
            title: '账号',
            width: 120,
            sort: true,
            toolbar: '#id'
        },
        {
            field: 'realname',
            title: '姓名',
            width: 100
        },
        {
            field: 'nickname',
            title: '昵称',
            width: 100
        },
        {
            field: 'mobile',
            title: '手机',
            width: 120
        },
        {
            field: 'email',
            title: '邮箱',
            width: 150
        },
        {
            fixed: 'right',
            title: '管理',
            width: 80,
            align: 'center',
            toolbar: '#baruserTable'
        }
    ],
    done: function(res) {
        // 可以根据需要对分页信息进行处理
        // 例如，获取当前页数、总数等
        // 如有需要，可对数据进行保存或后续处理
    }
});

以上代码实现了一个完整的数据表格展示功能。以下是 Key 参数的简单说明：

列配置 (cols) 是表格核心部分。通过设置不同的字段属性，可以实现多种自定义需求：

• type: 细节类型，例如 checkbox、radio（复选框）、number（数字栏目）等。
• width: 列宽，单位为像素或百分比。
• title: 列标题，用于展示给用户。
• sort: 是否开启排序功能。
• toolbar: 展示工具栏中的操作选项（如编辑、删除等）。
• align: 列宽对齐方式。

在实际使用过程中，可以根据需求添加合适的事件监听和处理逻辑。例如，通过表格的工具栏事件可以触发调用

表格的常用操作方法

LayUI 表格提供了丰富的 API 方法，主要包括：

工具栏事件监听

通过配置工具栏模板，可以实现行内的操作按钮：

通过 LayUI 的事件监听方法，可以针对工具栏事件进行扩展处理：

table.on('toolbar(test)', function(obj) {
    const checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event) {
        case 'add': 
            layer.msg('添加操作');
            break;
        case 'delete': 
            layer.msg('删除操作');
            break;  
        case 'update': 
            layer.msg('编辑操作');
            break;
    }
});

这些代码可以根据实际需求进行扩展，比如在工具栏按钮点击时触发行操作或数据处理逻辑。

其他实用技巧

LayUI 数据表格在 Web 开发中是一个强大且灵活的工具。通过合理利用其丰富的 API 和灵活的配置方式，可以快速实现高效的数据展示和操作。随着项目需求的变化，可以不断深入探索和优化表格功能，以提升开发效率和用户体验。