如何以编程方式（在 JavaScript 中）设置 ag-grid 下拉值？

Question

我的网格中有这个单元格。

        {
            headerName: "Type",
            field: "Type",
            getQuickFilterText: () => '',
            editable: true,
            width: 250,
            cellEditor: 'agRichSelectCellEditor',
            cellEditorPopup: true,
            cellRenderer: TypeCellRenderer,
            keyCreator: (params) => {
                return params.value.vcTypeName;
            },
            cellEditorParams: {
                cellRenderer: TypeCellRenderer,
            },
        },

如何通过我的函数 setValues() 设置此单元格的下拉值？

Answer 1

选项 1 - 更可定制： 您可以使用

cellEditorSelector

。这将选择您想要的下拉值。在您的列 def 中，您指定：

{ headerName: "Item Type", field: "itemType", cellEditorSelector: this.itemTypeSelector},

然后，当定义您要以编程方式选择的实际下拉列表时，您可以在用于

cellEditorSelector

的方法中定义它，在我们的例子中，它是

itemTypeSelector

：

itemTypeSelector = (params) => {
if (params.data.itemType == 'foo') {
  return {
    component: 'agSelectCellEditor',
    params: {
      values: ['1', '2', '3'],
    },
    popup: true
  };
}
else if (params.data.itemType == 'bar') {
  return {
    component: 'agSelectCellEditor',
    params: {
      values: ['4', '5', '6'],
    },
    popup: true
  };
}

}

请注意，使用的组件是

agSelectCellEditor

，但可以是任何其他组件，包括丰富的单元格选择编辑器。

选项 2 - 较少可定制：

cellEditor : 'agSelectCellEditor';
cellEditorParams: function(params) {
var selectedCountry = params.data.country;
if (selectedCountry==='Ireland') {
    return {
        values: ['Dublin','Cork','Galway']
    };
} else {
    return {
        values: ['New York','Los Angeles','Chicago','Houston']
    };
}

}