如何通过JavaScript编程设置ag-grid单元格下拉选项值

你当前配置的Type列使用了agRichSelectCellEditor作为单元格编辑器，在自定义setValues()中设置下拉选项可以按以下方式实现：

核心逻辑说明 #

agRichSelectCellEditor的下拉选项读取列配置中cellEditorParams.values字段，只要更新该字段配置并刷新网格就能生效。根据你是要设置整列统一选项，还是给单行单独设置选项，分两种实现方案：

• 方案1：整列统一更新下拉选项
  直接修改对应列定义的cellEditorParams.values值，之后调用网格API刷新列即可，setValues函数参考实现：

let gridApi; // 初始化ag-Grid时保存的gridApi实例
/**
 * 给Type列设置整列统一的下拉选项
 * @param {Array<{vcTypeName: string, [key: string]: any}>} newOptions 下拉选项数组，结构需匹配现有value格式
 */
function setValues(newOptions) {
  // 获取Type列的列定义
  const typeColDef = gridApi.getColumnDef('Type');
  // 更新编辑器配置的values字段
  typeColDef.cellEditorParams = {
    ...typeColDef.cellEditorParams,
    values: newOptions
  };
  // 刷新列与单元格让配置生效
  gridApi.refreshCells({ columns: ['Type'], force: true });
}

• 方案2：按行单独设置下拉选项
  如果不同行的Type下拉选项需要独立配置，先把列定义里的cellEditorParams.values改成函数形式，从行数据中读取选项：

// 列配置修改（保留原有其他配置不变，只调整cellEditorParams）
{
  headerName: "Type",
  field: "Type",
  getQuickFilterText: () => '',
  editable: true,
  width: 250,
  cellEditor: 'agRichSelectCellEditor',
  cellEditorPopup: true,
  cellRenderer: TypeCellRenderer,
  keyCreator: (params) => {
    return params.value.vcTypeName;
  },
  cellEditorParams: {
    cellRenderer: TypeCellRenderer,
    // 从当前行数据读取下拉选项
    values: (params) => params.data._typeOptions || []
  },
}

对应的setValues函数实现：

/**
 * 给指定行的Type单元格设置独立下拉选项
 * @param {string|number} rowId 目标行的ID
 * @param {Array<{vcTypeName: string, [key: string]: any}>} newOptions 下拉选项数组
 */
function setValues(rowId, newOptions) {
  const targetRow = gridApi.getRowNode(rowId);
  if (!targetRow) return;
  // 更新行数据上存储的选项
  targetRow.setDataValue('_typeOptions', newOptions);
  // 刷新目标单元格
  gridApi.refreshCells({ rowNodes: [targetRow], columns: ['Type'], force: true });
}

注意：传入的下拉选项对象必须包含vcTypeName属性，和你配置的keyCreator、TypeCellRenderer的取值逻辑保持一致，否则会出现选中值显示异常、匹配错误的问题。

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