以下是以资深软件开发工程师的视角，对“jQuery EasyUI 数据网格 – 格式化列（Column Formatter）”的专业回答。我将详细讲解如何在 jQuery EasyUI 的数据网格（DataGrid）中通过列格式化（Column Formatter）自定义单元格显示，包括基础用法、高级配置和动态应用，包含目录、小标题、代码示例和内部链接，确保内容清晰、技术准确且易于理解。回答基于截至 2025 年 3 月 16 日的最新信息，使用 jQuery EasyUI 的最新稳定版（1.10.x）为参考。

jQuery EasyUI 数据网格 – 格式化列（Column Formatter）

目录

  1. 引言
  2. 列格式化概述
  1. 实现基础列格式化
  1. 高级列格式化配置
  1. 最佳实践与注意事项
  1. 结论

1. 引言

jQuery EasyUI 的数据网格（DataGrid）通过列格式化（Column Formatter）功能，允许开发者自定义单元格的显示内容和样式，从而满足多样化的展示需求。本教程将从基础到高级，带你掌握如何在 DataGrid 中使用列格式化，并提供实用示例。

2. 列格式化概述

2.1 什么是列格式化？

  • 定义：列格式化是指通过 formatter 函数自定义 DataGrid 单元格的渲染方式，返回 HTML 或文本以替换原始数据。
  • 实现方式：在列定义中添加 formatter 属性，函数接收 value（单元格值）、row（行数据）和 index（行索引）作为参数。

2.2 列格式化的应用场景

  • 数据美化：如将日期格式化、添加货币符号。
  • 条件样式：根据值动态设置颜色或图标。
  • 参考：jQuery EasyUI 官方文档 DataGrid Formatter 部分（jeasyui.com）。

3. 实现基础列格式化

3.1 准备工作

  • 引入依赖：需要 jQuery、EasyUI 的核心文件和主题文件。
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
<link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">

3.2 创建基础列格式化

  • 方法：在列定义中添加 formatter 函数，返回自定义内容。
  • 示例：
$('#dg').datagrid({
  columns: [[
    { field: 'price', title: '价格', width: 100, formatter: function(value) {
      return '¥' + (value || 0);
    }}
  ]]
});

3.3 实例：基础列格式化

以下是一个基础列格式化的完整示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery EasyUI 基础列格式化</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <style>
    body { padding: 20px; }
  </style>
</head>
<body>
  <div class="container">
    <h2>基础列格式化</h2>
    <table id="dg" class="easyui-datagrid" style="width: 500px; height: 250px;"></table>
  </div>
  <script>
    $('#dg').datagrid({
      data: [
        { id: 1, name: '项目 A', price: 100 },
        { id: 2, name: '项目 B', price: 200 },
        { id: 3, name: '项目 C', price: 300 }
      ],
      columns: [[
        { field: 'id', title: 'ID', width: 100 },
        { field: 'name', title: '名称', width: 200 },
        { field: 'price', title: '价格', width: 150, formatter: function(value) {
          return '¥' + (value || 0); // 添加货币符号
        }}
      ]]
    });
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：显示一个表格，价格列前添加“¥”符号（如 ¥100、¥200），原始数据保持不变。

4. 高级列格式化配置

4.1 复杂格式化和条件样式

  • 复杂格式化：返回 HTML 结构，如按钮或链接。
  • 条件样式：根据值动态调整样式或内容。
  • 示例：
{ field: 'status', title: '状态', width: 100, formatter: function(value, row, index) {
  if (value === '完成') {
    return '<span style="color: green;">' + value + '</span>';
  } else {
    return '<span style="color: red;">' + value + '</span>';
  }
}}

4.2 动态格式化和交互

  • 动态格式化：结合外部数据或逻辑更新显示。
  • 交互：添加可点击元素并绑定事件。
  • 示例：
{ field: 'action', title: '操作', width: 100, formatter: function(value, row, index) {
  return '<a href="#" onclick="alert(\'删除 ' + row.name + '\')">删除</a>';
}}

4.3 实例：带交互的动态列格式化

以下是一个带交互和动态格式化的列格式化示例：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>jQuery EasyUI 带交互的动态列格式化</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
  <link rel="stylesheet" href="https://www.jeasyui.com/easyui/themes/icon.css">
  <style>
    body { padding: 20px; }
    .btn { margin: 5px; }
  </style>
</head>
<body>
  <div class="container">
    <h2>带交互的动态列格式化</h2>
    <button class="btn easyui-linkbutton" onclick="toggleStatus()">切换状态</button>
    <table id="dg" class="easyui-datagrid" style="width: 600px; height: 300px;"></table>
  </div>
  <script>
    var data = [
      { id: 1, name: '项目 A', price: 100, status: '进行中' },
      { id: 2, name: '项目 B', price: 200, status: '完成' },
      { id: 3, name: '项目 C', price: 300, status: '进行中' }
    ];

    $('#dg').datagrid({
      data: data,
      columns: [[
        { field: 'id', title: 'ID', width: 100 },
        { field: 'name', title: '名称', width: 200 },
        { field: 'price', title: '价格', width: 150, formatter: function(value) {
          return '<span style="font-weight: bold;">¥' + (value || 0) + '</span>';
        }},
        { field: 'status', title: '状态', width: 100, formatter: function(value, row, index) {
          return value === '完成' 
            ? '<span style="color: green;">' + value + '</span>' 
            : '<span style="color: red;">' + value + '</span>';
        }},
        { field: 'action', title: '操作', width: 100, formatter: function(value, row, index) {
          return '<a href="#" class="delete-link" data-index="' + index + '">删除</a>';
        }}
      ]]
    });

    // 删除操作
    $('#dg').datagrid('getPanel').on('click', '.delete-link', function(e) {
      e.preventDefault();
      var index = $(this).data('index');
      var row = $('#dg').datagrid('getRows')[index];
      $.messager.confirm('确认', '确定删除 ' + row.name + ' 吗？', function(r) {
        if (r) {
          $('#dg').datagrid('deleteRow', index);
        }
      });
    });

    // 切换状态
    function toggleStatus() {
      var rows = $('#dg').datagrid('getRows');
      for (var i = 0; i < rows.length; i++) {
        rows[i].status = rows[i].status === '完成' ? '进行中' : '完成';
      }
      $('#dg').datagrid('loadData', rows);
    }
  </script>
</body>
</html>
  • 运行方法：保存为 HTML 文件，在浏览器中打开。
  • 效果：
  • 表格显示 ID、名称、价格（加粗 ¥ 符号）、状态（完成绿色，进行中红色）和操作列（删除链接）。
  • 点击“删除”弹出确认框，确认后移除行。
  • 点击“切换状态”动态更新所有行的状态，格式化样式随之变化。

5. 最佳实践与注意事项

5.1 设计与实现建议

  • 简洁性：formatter 函数应保持简洁，避免复杂计算。
  • 一致性：为相同类型数据（如货币、日期）定义全局格式化函数。
  • 事件绑定：使用事件委托（如 .on）处理动态元素点击。

5.2 性能优化与调试

  • 性能：大数据量时避免复杂 DOM 操作，优先返回简单字符串。
  • 调试：检查 formatter 返回值是否正确渲染，确认事件绑定生效。

6. 结论

jQuery EasyUI 的列格式化通过 formatter 函数为 DataGrid 提供了强大的自定义能力，适用于数据美化和交互需求。本文通过基础和高级示例展示了其用法，帮助你快速上手。如果需要排序功能，可参考 jQuery EasyUI 排序 或访问官方文档（jeasyui.com）。

回答特点

  • 结构：包含目录、带锚点的小标题和代码示例，逻辑清晰。
  • 实用性：从基础格式化到动态交互，覆盖实际需求。
  • 内部链接：通过 <a href="#ID"> 跳转，如 实现基础列格式化。
  • 出站链接：嵌入正文，指向官方文档。

如何运行

  • 直接保存为 HTML 文件，在浏览器中打开即可（需联网加载 CDN 资源）。