在使用 jQuery EasyUI 构建数据表格时，常需根据业务逻辑对特定列进行样式或内容调整。通过 DataGrid 的 formatter 属性绑定自定义函数，可灵活控制单元格渲染。本文以价格列标红为例，演示完整实现流程与参数用法，便于开发者直接复用。

formatter 函数的参数说明

在 EasyUI DataGrid 中，为列配置 formatter 属性后，系统会在渲染该列时调用指定函数。该函数接收三个参数：

• value：当前单元格对应的字段值。
• row：当前行的完整数据对象，可用于访问其他列的值。
• index：当前行在数据集中的索引位置。

函数需返回最终要显示在单元格中的 HTML 或纯文本内容。

创建带格式化列的 DataGrid

通过 HTML 声明方式初始化 DataGrid，并在需要格式化的列上添加 formatter 属性指向自定义函数名。以下示例中，listprice 列绑定了 formatPrice 函数：

    

        

            
Item ID
            
Product ID
            
List Price
            
Unit Cost
            
Attribute
            
Stauts
        
    

注意 formatter 的值是函数名称字符串，而非函数调用表达式。

编写格式化函数逻辑

在 JavaScript 中定义 formatPrice 函数，根据传入的 val（即 value）判断数值大小，并返回带样式的 HTML 或原始值：

function formatPrice(val, row) {
    if (val < 20) {
        return '(' + val + ')';
    } else {
        return val;
    }
}

当价格小于 20 时，单元格内容将被包裹在红色文本的 标签中；否则直接返回原始数值。该函数可进一步扩展，例如结合 row 参数判断库存状态或结合 index 实现奇偶行差异化渲染。

使用注意事项

使用 formatter 时需注意以下几点：

• 函数必须同步返回结果，不支持异步操作（如 AJAX 请求）。
• 返回的 HTML 字符串需确保语法正确，避免破坏表格结构。
• 若需访问其他列数据，应通过 row 对象获取，而非依赖 DOM 查询。
• 格式化逻辑应尽量轻量，避免在大数据量场景下影响渲染性能。