AG Grid中限制列下拉选择可选值的设置方法

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

在进行 AG Grid 列编辑时，许多开发者初次尝试会误以为只需在列定义中设置 `values` 即可，但实际效果往往不尽如人意。单纯配置 `cellEditorParams.values` 并不会自动生成一个美观的下拉选择框——它仅仅为编辑器提供了一份候选值列表。真正决定编辑行为的是 `cellEditor` 类型。如果未显式指定，网格默认会采用 `agTextCellEditor`，即普通的文本输入框，用户仍可随意键入任意字符串，导致之前的设置形同虚设。

那么，要实现像官方示例中那样“运动类型仅限 Tennis / Swimming”受控输入的关键步骤，是明确告诉 AG Grid：我希望使用下拉选择器来编辑。具体到 `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 层面限制输入，但某些场景可能绕过 UI 直接通过 API 修改数据（例如使用 `setDataValue` 或批量更新）。添加 `valueSetter` 后，即使数据从其他路径进入，不符合规则的值也会被拒绝，从而保障数据的合规性。

除此之外，还需关注 `pinned top row` 的编辑逻辑是否与主数据保持同步。当前代码中的 `onCellEditingStopped` 监听已正确捕获编辑结束事件，但存在一个潜在问题：`inputRow` 是一个引用对象。如果直接使用 `setInputRow({})` 重置，可能会残留上次编辑的状态，影响下一次输入。建议在重置时采用深拷贝，或逐个字段清空，确保每次输入都处于干净状态。

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