本文详解如何在 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，可直接参考其列配置与事件流设计。掌握此模式后，你可轻松扩展至多列受限输入（如国家、状态、类别等），大幅提升数据录入准确性与用户体验一致性。
