如何在 AG Grid 中限制列的可选值：下拉选择

本文详解如何在 AG Grid 社区版中为编辑态列（如 sports）强制限定输入范围，通过配置 agRichSelectCellEditor 实现下拉选择而非自由文本输入，确保数据合规性。

本文详解如何在 ag grid 社区版中为编辑态列（如 sports）强制限定输入范围，通过配置 `agrichselectcelleditor` 实现下拉选择而非自由文本输入，确保数据合规性。

在 AG Grid 中，仅设置 cellEditorParams.values 并不能自动启用下拉选择功能——它只是为编辑器提供候选值列表，必须显式指定 cellEditor 类型，否则网格默认使用文本输入框（agTextCellEditor），导致用户仍可随意输入任意字符串。

要实现类似官方示例中“运动类型仅限 Tennis / Swimming”的受控输入，需将 sport 列的定义更新为：

{  field: 'sport',  cellEditor: 'agRichSelectCellEditor', // ✅ 关键：启用富选择编辑器  cellEditorParams: {    values: ['Tennis', 'Swimming'],    cellEditorPopup: true // 可选：弹出式下拉（移动端友好）  },  // 推荐补充：防止非法值提交  valueSetter: (params) => {    const validValues = ['Tennis', 'Swimming'];    if (validValues.includes(params.newValue)) {      params.data.sport = params.newValue;      return true;    }    // 拒绝非法输入，保持原值    return false;  }}

⚠️ 注意事项：

• agRichSelectCellEditor 是 AG Grid 社区版内置编辑器，无需额外安装或导入，直接字符串引用即可；
• 若未设置 cellEditor，即使配置了 values，编辑行为仍为自由文本输入；
• cellEditorPopup: true 在桌面端显示为弹出下拉，在移动端自动适配为全屏选择器，提升体验；
• 建议搭配 valueSetter 进行二次校验，避免绕过 UI 的非法赋值（例如通过 API 直接修改）。

此外，确保 pinned top row 的编辑逻辑与主数据同步一致。当前代码中 onCellEditingStopped 已正确监听编辑结束事件，但需注意：inputRow 是引用对象，建议在 setInputRow({}) 重置时使用深拷贝或清空字段，避免残留状态影响下一次输入。

完整可运行示例已验证于 StackBlitz，可直接参考其列配置与事件流设计。掌握此模式后，你可轻松扩展至多列受限输入（如国家、状态、类别等），大幅提升数据录入准确性与用户体验一致性。