AG Grid树形视图图标自定义：如何编写自定义渲染器添加前置图标

刚好之前在项目里实现过一模一样的需求，用AG Grid的自定义单元格渲染器就能轻松搞定，我给你拆解下具体的实现步骤和关键细节：

要实现这个需求，我们需要自定义AG Grid第一列的单元格渲染器，通过访问AG Grid提供的节点信息（比如是否是父节点、展开状态），在默认的展开/折叠箭头前（或叶子节点的对应位置）插入图标，同时保留AG Grid树形视图的原生交互逻辑。

我分两种场景给你示例：纯JavaScript环境和React环境，你可以根据自己的项目技术栈选择。

纯JavaScript版本 #

1. 自定义单元格渲染器函数 #

我们可以直接写一个简洁的渲染器函数，或者实现AG Grid的完整渲染器接口（更灵活，支持单元格刷新）：

// 方式一：简洁版渲染器函数
function treeCellRenderer(params) {
  const container = document.createElement('div');
  container.style.display = 'flex';
  container.style.alignItems = 'center';
  container.style.gap = '8px';

  // 1. 添加图标：父节点用文件夹，叶子节点用文件
  const icon = document.createElement('span');
  icon.textContent = params.node.hasChildren ? '📁' : '📄';
  // 如果用自定义图标（比如Font Awesome）：
  // icon.className = params.node.hasChildren ? 'fa fa-folder' : 'fa fa-file';
  container.appendChild(icon);

  // 2. 复用AG Grid原生的树形箭头和缩进（推荐，不用自己写交互）
  const defaultTreeElements = params.eGridCell.querySelectorAll('.ag-tree-toggle, .ag-tree-indent');
  defaultTreeElements.forEach(el => container.appendChild(el));

  // 3. 添加单元格文本内容
  const text = document.createElement('span');
  text.textContent = params.value;
  container.appendChild(text);

  return container;
}

// 方式二：完整渲染器接口（支持单元格刷新）
function CustomTreeRenderer() {}

CustomTreeRenderer.prototype.init = function(params) {
  this.eGui = document.createElement('div');
  this.eGui.style.display = 'flex';
  this.eGui.style.alignItems = 'center';
  this.eGui.style.gap = '8px';

  // 创建图标元素
  this.eIcon = document.createElement('span');
  this.updateIcon(params);
  this.eGui.appendChild(this.eIcon);

  // 移入原生树形元素
  const treeElements = params.eGridCell.querySelectorAll('.ag-tree-toggle, .ag-tree-indent');
  treeElements.forEach(el => this.eGui.appendChild(el));

  // 创建文本元素
  this.eText = document.createElement('span');
  this.eText.textContent = params.value;
  this.eGui.appendChild(this.eText);
};

CustomTreeRenderer.prototype.getGui = function() {
  return this.eGui;
};

CustomTreeRenderer.prototype.refresh = function(params) {
  this.updateIcon(params);
  this.eText.textContent = params.value;
  return true;
};

CustomTreeRenderer.prototype.updateIcon = function(params) {
  this.eIcon.textContent = params.node.hasChildren ? '📁' : '📄';
  // 自定义图标版：
  // this.eIcon.className = params.node.expanded ? 'fa fa-folder-open' : 'fa fa-folder';
};

2. 配置AG Grid列定义 #

在第一列的配置中指定我们的自定义渲染器，同时开启树形视图：

const columnDefs = [
  {
    headerName: '目录/文件',
    field: 'name',
    // 使用上面定义的渲染器
    cellRenderer: treeCellRenderer, // 或者 CustomTreeRenderer
    // 开启树形视图的关键配置（根据你的数据模式选择）
    treeData: true, // 如果是层级数据，比如每个节点有children属性
    // 或者用rowGroup模式：rowGroup: true, hide: false
    // 其他可选配置
    cellStyle: { padding: '8px 0' },
    autoHeight: true
  },
  // 其他列...
];

// 初始化AG Grid
new agGrid.Grid(document.querySelector('#myGrid'), {
  columnDefs: columnDefs,
  rowData: yourTreeData,
  // 树形视图相关配置
  animateRows: true,
  enableSorting: false,
  // 如果是treeData模式，需要指定getChildren函数
  getChildren: function(params) {
    return params.data.children;
  }
});

React版本 #

如果你的项目用React，用函数组件作为渲染器更符合生态：

import React from 'react';

const TreeCellRenderer = ({ params }) => {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      {/* 图标 */}
      <span>{params.node.hasChildren ? '📁' : '📄'}</span>
      {/* 复用AG Grid原生的树形元素 */}
      <div ref={el => {
        if (el && params.eGridCell) {
          const treeElements = params.eGridCell.querySelectorAll('.ag-tree-toggle, .ag-tree-indent');
          treeElements.forEach(treeEl => el.appendChild(treeEl));
        }
      }} />
      {/* 单元格文本 */}
      <span>{params.value}</span>
    </div>
  );
};

// 列定义配置
const columnDefs = [
  {
    headerName: '目录/文件',
    field: 'name',
    cellRenderer: TreeCellRenderer,
    treeData: true,
    cellStyle: { padding: '8px 0' }
  }
];

// 在AG Grid组件中使用
export default function MyGrid() {
  return (
    <div className="ag-theme-alpine" style={{ height: 500 }}>
      <AgGridReact
        columnDefs={columnDefs}
        rowData={yourTreeData}
        getChildren={(params) => params.data.children}
        animateRows={true}
      />
    </div>
  );
}

• 节点状态判断：通过params.node.hasChildren区分父节点和叶子节点，params.node.expanded可以判断父节点的展开状态（如果需要动态切换图标，比如展开时显示打开的文件夹）
• 复用原生交互：尽量复用AG Grid自带的.ag-tree-toggle（箭头）和.ag-tree-indent（缩进）元素，这样不用自己写展开/折叠的点击事件，保留原生的交互体验
• 自定义图标：如果不用emoji图标，可以替换成<img>标签引入本地图标，或者用Font Awesome、Element UI等图标库的类名
• 数据模式适配：AG Grid支持两种树形数据模式：treeData（层级数据，每个节点有children）和rowGroup（扁平数据，通过分组生成树形），要根据你的数据结构选择对应的配置

这样就能完美实现你想要的效果啦，要是有框架特定的问题（比如Vue/Angular），可以随时提出来调整代码~

内容的提问来源于stack exchange，提问作者user1697114