AgGrid Vanilla JS版如何按单元格值条件设置单元格类型？

一、控制单个单元格的可编辑状态 #

不用依赖columnTypes API，直接在ThingType列的定义里给editable字段传一个回调函数，根据单元格当前值判断是否允许编辑：

const columnDefs = [
  {
    headerName: 'ThingType',
    field: 'thingType',
    // 仅当值为plane时允许编辑，car/bike设为不可编辑
    editable: (params) => params.value === 'plane'
  }
];

二、为plane单元格配置带自动补全的自定义编辑器 #

1. 先实现一个自定义的自动补全编辑器组件（以原生input+datalist为例）：

class AutocompleteEditor {
  init(params) {
    // 创建输入框
    this.inputEl = document.createElement('input');
    // 关联datalist实现自动补全
    this.inputEl.setAttribute('list', 'thingTypeAutoComplete');
    
    // 创建补全选项列表
    const datalist = document.createElement('datalist');
    datalist.id = 'thingTypeAutoComplete';
    // 这里可以自定义补全选项
    ['plane', 'jet', 'helicopter'].forEach(opt => {
      const option = document.createElement('option');
      option.value = opt;
      datalist.appendChild(option);
    });
    document.body.appendChild(datalist);
    
    // 初始化输入框值
    this.inputEl.value = params.value;
  }

  getGui() {
    return this.inputEl;
  }

  getValue() {
    return this.inputEl.value;
  }

  destroy() {
    // 清理创建的datalist
    document.getElementById('thingTypeAutoComplete')?.remove();
  }
}

2. 在列定义里配置动态编辑器，仅当单元格值为plane时启用自定义编辑器：

const columnDefs = [
  {
    headerName: 'ThingType',
    field: 'thingType',
    editable: (params) => params.value === 'plane',
    // 动态指定编辑器
    cellEditor: (params) => params.value === 'plane' ? 'autocompleteEditor' : undefined
  }
];

// 注册自定义编辑器到AgGrid
const gridOptions = {
  columnDefs: columnDefs,
  frameworkComponents: {
    autocompleteEditor: AutocompleteEditor
  },
  // 其他grid配置...
};

三、关于cellRenderer与columnTypes的说明 #

• columnTypes是用来批量复用列配置的模板，比如把多个列共用的属性（如宽度、排序规则）打包成一个type，多个列直接引用即可，和单元格级的编辑控制无关。
• cellRenderer仅负责单元格的显示样式，和编辑功能是完全独立的模块，你要实现的编辑逻辑不需要修改cellRenderer。

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