在使用 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 查询。 - 格式化逻辑应尽量轻量，避免在大数据量场景下影响渲染性能。
