如何实现Ag Grid支持自定义输入的下拉单元格编辑？

针对AgRichSelectCellEditor不支持自定义输入的问题，你可以通过自定义单元格编辑器实现“选择已有选项+输入自定义值”的需求，以下提供两种可行方案：

方案一：原生HTML实现（轻量无依赖） #

利用HTML的<datalist>标签结合输入框，实现基础的可输入下拉功能，无需额外依赖。

1. 自定义编辑器组件 #

import React, { useState, useRef, useEffect } from 'react';

const EditableSelectEditor = (props) => {
  const [value, setValue] = useState(props.value || '');
  const inputRef = useRef(null);

  useEffect(() => {
    inputRef.current.focus();
  }, []);

  // 向Ag Grid返回当前编辑值
  const getValue = () => value;

  return (
    <div style={{ padding: '2px' }}>
      <input
        ref={inputRef}
        type="text"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        list="editor-options"
        style={{ width: '100%', padding: '4px', border: '1px solid #ddd' }}
      />
      <datalist id="editor-options">
        {props.options.map(opt => (
          <option key={opt.value} value={opt.value}>{opt.label}</option>
        ))}
      </datalist>
    </div>
  );
};

// 包装组件，适配Ag Grid编辑器接口
export default class EditableSelectWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.editorRef = React.createRef();
  }

  init(params) {
    this.params = params;
  }

  getValue() {
    return this.editorRef.current.getValue();
  }

  isPopup() {
    return false; // 直接在单元格内编辑，不弹出额外层
  }

  render() {
    return (
      <EditableSelectEditor
        ref={this.editorRef}
        value={this.params.value}
        options={this.params.colDef.editorOptions.options}
      />
    );
  }
}

2. 列配置示例 #

const columnDefs = [
  {
    headerName: '可编辑选择列',
    field: 'customSelect',
    cellEditor: EditableSelectWrapper,
    editorOptions: {
      options: [
        { value: '选项A', label: '选项A' },
        { value: '选项B', label: '选项B' },
        { value: '选项C', label: '选项C' }
      ]
    },
    editable: true
  }
];

方案二：集成第三方组件（功能更强大） #

使用react-select的Creatable组件，支持搜索、创建新选项，样式自定义程度更高。

1. 安装依赖 #

npm install react-select

2. 自定义编辑器组件 #

import React, { useState, useRef, useEffect } from 'react';
import CreatableSelect from 'react-select/creatable';

const CreatableSelectEditor = (props) => {
  const [selectedOpt, setSelectedOpt] = useState(
    props.options.find(opt => opt.value === props.value) || null
  );
  const selectRef = useRef(null);

  useEffect(() => {
    selectRef.current.focus();
  }, []);

  const getValue = () => selectedOpt ? selectedOpt.value : '';

  return (
    <CreatableSelect
      ref={selectRef}
      value={selectedOpt}
      onChange={setSelectedOpt}
      options={props.options}
      styles={{
        control: base => ({ ...base, minWidth: '200px', borderRadius: '2px' })
      }}
    />
  );
};

// 包装组件适配Ag Grid接口
export default class CreatableSelectWrapper extends React.Component {
  constructor(props) {
    super(props);
    this.editorRef = React.createRef();
  }

  init(params) {
    this.params = params;
  }

  getValue() {
    return this.editorRef.current.getValue();
  }

  isPopup() {
    return true; // 弹出层显示选择器
  }

  render() {
    return (
      <CreatableSelectEditor
        ref={this.editorRef}
        value={this.params.value}
        options={this.params.colDef.editorOptions.options}
      />
    );
  }
}

3. 列配置示例 #

const columnDefs = [
  {
    headerName: '可创建选择列',
    field: 'creatableSelect',
    cellEditor: CreatableSelectWrapper,
    editorOptions: {
      options: [
        { value: '苹果', label: '苹果' },
        { value: '香蕉', label: '香蕉' },
        { value: '橙子', label: '橙子' }
      ]
    },
    editable: true,
    cellRenderer: params => params.value || ''
  }
];

方案对比 #

• 方案一：轻量无依赖，适合基础需求，但下拉样式受浏览器限制，自定义程度低。
• 方案二：功能丰富（搜索、创建选项），样式可完全自定义，适合复杂场景，但需要引入第三方库。

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