异常教程

jQuery EasyUI 数据网格 – 格式化列（保姆级教程）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

前言

在 Web 开发中，数据展示的直观性直接决定了用户体验的优劣。jQuery EasyUI 数据网格（DataGrid）作为一款功能强大的表格组件，凭借其丰富的配置选项和灵活的扩展性，成为前端开发者的常用工具。然而，如何将原始数据转化为用户友好的信息，是开发者必须面对的核心问题。本文将以“格式化列”为核心，通过循序渐进的方式，带领读者掌握 EasyUI 数据网格中列的格式化技巧，并结合实际案例深入解析其应用场景。

一、数据网格与列格式化的基础概念

1.1 数据网格的定位与作用

数据网格（DataGrid） 是 EasyUI 提供的核心组件之一，用于以表格形式展示结构化数据。它支持分页、排序、筛选、编辑等高级功能，但默认的数据显示方式往往无法满足复杂需求。例如，数字可能需要货币符号，日期可能需要特定格式，状态字段可能需要图标或颜色区分。此时，列格式化（Column Formatting） 就成为关键工具，它允许开发者对单列或多列的数据进行自定义渲染。

1.2 列格式化的类比理解

可以将数据网格想象为一张“Excel 表格”，而列格式化类似于 Excel 中的“单元格格式设置”。例如：

  • 将数字列设置为“货币格式”（如 $1,000）；
  • 将状态列用不同颜色（如绿色表示“正常”，红色表示“异常”）；
  • 将日期列显示为“YYYY-MM-DD”格式。

EasyUI 的列格式化功能，正是通过代码实现类似效果，但具备更高的灵活性和动态性。

二、列格式化的核心方法与实现

2.1 基础语法：formatter 方法

在 EasyUI 数据网格中，列（column）的格式化主要通过 formatter 属性实现。其基本语法如下：

columns: [[
    { field: 'price', title: '价格',  
      formatter: function(value, row, index) {
          return '¥' + value.toFixed(2);
      }
    }
]]

关键参数说明

  • value：当前单元格的原始数据值（如数字 1234）；
  • row：当前行的完整数据对象（包含其他列的值）；
  • index：当前行的索引（从 0 开始）。

示例：货币格式化

假设原始数据列 price 的值为 1234.567，通过 formatter 可将其格式化为 ¥1234.57（保留两位小数）：

formatter: function(value) {
    return '¥' + value.toFixed(2);
}

2.2 进阶技巧：结合多条件与样式

2.2.1 多条件判断

通过 row 参数，可以访问同一行其他列的值，从而实现条件渲染。例如，根据 status 字段显示不同的图标：

formatter: function(value, row) {
    if (row.status === 'active') {
        return '<span class="icon-check"></span> 正常';
    } else if (row.status === 'pending') {
        return '<span class="icon-clock"></span> 待处理';
    } else {
        return '<span class="icon-close"></span> 异常';
    }
}

2.2.2 样式控制：styler 方法

若需动态设置单元格的 CSS 样式（如背景色、字体颜色），可以使用 styler 方法：

styler: function(value, row) {
    if (row.priority === 'high') {
        return { color: '#ff4444', 'font-weight': 'bold' };
    } else if (row.priority === 'medium') {
        return { color: '#ff8800' };
    } else {
        return {};
    }
}

2.3 自定义函数与复用性

为了避免代码重复，可以将复杂的格式化逻辑封装为独立函数。例如，定义一个 formatDateTime 函数：

function formatDateTime(value) {
    const date = new Date(value);
    return date.toLocaleDateString() + ' ' + date.toLocaleTimeString();
}

// 在 DataGrid 中调用
formatter: formatDateTime

三、实战案例：综合格式化应用

3.1 案例背景

假设我们需要展示一个商品列表，要求实现以下格式化需求：

  1. 价格列：显示为 ¥1,234.56（千位分隔符 + 两位小数）；
  2. 状态列：根据 status 字段显示图标和文字（如“已售罄”用红色叉号）；
  3. 创建时间列：格式化为 YYYY-MM-DD HH:mm；
  4. 操作列：生成可点击的“编辑”按钮。

3.2 完整代码实现

HTML 结构

<table id="productGrid"></table>

JavaScript 配置

$(function() {
    $('#productGrid').datagrid({
        url: '/api/products', // 数据接口地址
        columns: [[
            { field: 'name', title: '商品名称', width: 200 },
            { field: 'price', title: '价格',  
              formatter: function(value) {
                  return '¥' + value.toLocaleString() + '.00'; // 强制保留两位小数
              }
            },
            { field: 'status', title: '状态',  
              formatter: function(value) {
                  const icons = {
                      'in_stock': 'icon-check green',
                      'out_of_stock': 'icon-close red',
                      'pending': 'icon-clock orange'
                  };
                  return `<span class="${icons[value]}">${value === 'out_of_stock' ? '已售罄' : '有货'}</span>`;
              }
            },
            { field: 'created_at', title: '创建时间',  
              formatter: function(value) {
                  return new Date(value).toLocaleString();
              }
            },
            { field: 'action', title: '操作',  
              formatter: function() {
                  return '<a href="#" class="edit-btn">编辑</a>';
              }
            }
        ]],
        // 其他配置项（如分页、工具栏等）
    });
});

样式补充

.green { color: #2ecc71; }
.orange { color: #ff8800; }
.red { color: #e74c3c; }
.edit-btn { text-decoration: underline; cursor: pointer; }

四、常见问题与解决方案

4.1 问题 1：格式化函数未生效

原因：可能未正确绑定 formatter 方法，或数据列名拼写错误。
解决：检查列定义中的 field 属性是否与数据字段名称完全一致，确保 formatter 方法语法正确。

4.2 问题 2：动态数据更新后格式未刷新

原因：当数据通过 updateRow 或 reload 方法更新时，格式化逻辑可能未重新执行。
解决：调用 refreshRow 方法强制刷新指定行，或在数据更新后重新渲染整个网格：

$('#productGrid').datagrid('refreshRow', rowIndex); // 刷新单行
$('#productGrid').datagrid('reload'); // 重新加载数据

五、进阶技巧与性能优化

5.1 使用模板字符串提升可读性

对于复杂的 HTML 结构，推荐使用模板字符串（Template Literal）：

formatter: function(value, row) {
    return `
        <div class="status-badge ${row.status}">
            <i class="icon-${row.status}"></i>
            ${row.status === 'out_of_stock' ? '缺货' : '有货'}
        </div>
    `;
}

5.2 减少 DOM 操作频率

避免在 formatter 中直接操作 DOM（如动态添加事件监听），改用委托事件：

// 不推荐：在 formatter 中直接绑定点击事件
formatter: function() {
    return '<button onclick="editRow()">编辑</button>';
}

// 推荐：使用事件委托
$('#productGrid').on('click', '.edit-btn', function(e) {
    const row = $(e.target).closest('tr').data('datagrid-row').row;
    editRow(row);
});

六、总结与展望

通过本文的学习，读者应已掌握以下关键技能：

  1. 理解 EasyUI 数据网格中列格式化的基础语法与核心方法；
  2. 掌握多条件判断、样式控制及函数复用的实战技巧；
  3. 能够结合案例实现复杂格式化需求，如货币、日期、状态标识等；
  4. 解决常见问题并优化代码性能。

未来，随着前端技术的演进，列格式化的需求会更加多样化。开发者可进一步探索以下方向：

  • 结合前端框架（如 Vue/React）实现动态列渲染；
  • 利用第三方库（如 Moment.js）增强日期格式化能力；
  • 开发可复用的格式化工厂函数，提升代码复用率。

希望本文能成为读者掌握 EasyUI 数据网格格式化功能的起点，为构建高效、美观的 Web 应用提供坚实基础。

提示：如需获取更多 EasyUI 学习资源或代码示例，可参考官方文档或 GitHub 社区项目。实践是掌握技术的最佳途径，建议读者通过实际项目不断巩固所学知识。

最新发布

查看更多文章