寻求Ag Grid支持文本编辑+下拉选择的自定义单元格编辑器实现方案

你可以通过自定义Ag Grid单元格编辑器来实现需求，核心是结合输入框与下拉列表，允许用户自由输入或选择选项，且自定义输入值可正常保存。以下是具体实现方案：

核心思路 #

• 自定义编辑器组件包含文本输入框和下拉选项列表
• 监听输入框内容变化，实时过滤下拉选项
• 点击下拉选项时自动填充输入框
• 编辑器提交时，直接返回输入框的当前值（无需校验是否在选项列表中）

React版本实现示例 #

1. 自定义单元格编辑器组件 #

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

const CustomAutoCompleteEditor = (props) => {
  const inputRef = useRef(null);
  const [inputValue, setInputValue] = useState(props.value || '');
  const [filteredOptions, setFilteredOptions] = useState(props.options || []);

  // 初始化时聚焦输入框
  useEffect(() => {
    inputRef.current?.focus();
  }, []);

  // 监听输入变化，过滤选项
  const handleInputChange = (e) => {
    const value = e.target.value;
    setInputValue(value);
    // 根据输入值过滤选项（可自定义匹配逻辑）
    const filtered = props.options.filter(opt => 
      opt.label.toLowerCase().includes(value.toLowerCase())
    );
    setFilteredOptions(filtered);
  };

  // 选择下拉选项
  const handleOptionSelect = (option) => {
    setInputValue(option.label);
  };

  // Ag Grid编辑器必填方法：获取当前值
  const getValue = () => {
    return inputValue;
  };

  // Ag Grid编辑器必填方法：判断是否为弹窗式编辑器
  const isPopup = () => {
    return true;
  };

  return (
    <div className="custom-autocomplete-editor">
      <input
        ref={inputRef}
        value={inputValue}
        onChange={handleInputChange}
        className="ag-input-field-input ag-text-field-input"
      />
      {filteredOptions.length > 0 && (
        <div className="custom-options-list">
          {filteredOptions.map((opt, idx) => (
            <div
              key={idx}
              className="custom-option-item"
              onClick={() => handleOptionSelect(opt)}
            >
              {opt.label}
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default CustomAutoCompleteEditor;

2. 配置Ag Grid列使用该编辑器 #

在列定义中指定自定义编辑器，并传递选项参数：

const columnDefs = [
  {
    headerName: '自定义输入列',
    field: 'customField',
    cellEditor: CustomAutoCompleteEditor,
    cellEditorParams: {
      // 下拉选项列表，格式为[{label: '选项1', value: '1'}, ...]
      options: [
        { label: '选项A', value: 'A' },
        { label: '选项B', value: 'B' },
        { label: '选项C', value: 'C' }
      ]
    },
    // 渲染单元格内容
    cellRenderer: (params) => params.value
  }
];

3. 样式参考（可选） #

.custom-autocomplete-editor {
  position: relative;
  width: 100%;
}

.custom-options-list {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  border: 1px solid #ccc;
  background: white;
  z-index: 1000;
  max-height: 200px;
  overflow-y: auto;
}

.custom-option-item {
  padding: 8px;
  cursor: pointer;
}

.custom-option-item:hover {
  background-color: #f0f0f0;
}

关键说明 #

• getValue()方法直接返回输入框的inputValue，确保自定义输入值能被正常保存
• isPopup()返回true，让下拉列表以弹窗形式展示，避免布局冲突
• 可根据需求自定义选项过滤逻辑（如前缀匹配、模糊匹配等）
• 若使用Vue/Angular，核心逻辑一致，只需调整组件语法即可

内容的提问来源于stack exchange，提问作者Chelsea Ma