ag-grid 的 agSelectCellEditor 无法正确渲染单元格答案

【问题标题】：ag-grid's agSelectCellEditor doesn't render the cell correctlyag-grid 的 agSelectCellEditor 无法正确渲染单元格
【发布时间】：2019-09-19 06:40:52
【问题描述】：

我正在使用 agSelectCellEditor 在特定列单元格中实现下拉菜单。这是列定义：

{
      headerName: "Rattachement",
      field: "rattachement",
      editable: true,
      headerTooltip:
        "Choisissez l'entité de rattachement parmi les choix présents dans la liste déroulante",
      cellEditor: "agSelectCellEditor",
      cellEditorParams: {
        values: [
          "",
          "Audit",
          "RA",
          "Consulting",
          "FA",
          "Tax&Legal",
          "ICS",
          "Taj"
        ]
      }
    }

这就是 ag-grid 的渲染方式：

我必须双击它才能以这种方式显示下拉列表：

然后我可以选择任何可用的选项。
正如您所注意到的，这确实是很糟糕的渲染，可能会导致用户感到困惑并且无法使用我正在构建的工具。

所以我的问题是：

有什么方法可以让 ag-grid 从一开始就显示下拉菜单，而无需双击单元格，以便用户真正知道该做什么？
谢谢！

PS：我不想使用自定义单元格渲染器，因为单元格中的选项取决于其他变量，如果我选择使用 customcellRenderer 实现下拉列表，整个事情可能会变得混乱（我用其他不会给我带来任何上述麻烦的专栏）

【问题讨论】：

标签： ag-grid ag-grid-ng2

【解决方案1】：

这与我遇到的问题相同:)。默认情况下，AgGrid 不显示下拉列。如果您希望将其显示为下拉列表，则必须使用 cellRenderer 来显示图像以通知用户这是下拉列。

双击编辑可以更改为单击或无单击编辑，该选项可用。设置 columndef 选项singleClickEdit : true,

 var columnDefs = [
        {field: 'name', width: 100},
        {
            field: 'gender',
            width: 90,
            cellRenderer: 'genderCellRenderer',
            cellEditor: 'agRichSelectCellEditor',
            singleClickEdit : true,
            cellEditorParams: {
                values: ['Male', 'Female'],
            }
        },]

var gridOptions = {
    components: {
        'genderCellRenderer': GenderCellRenderer
    },
    columnDefs: columnDefs,
}

    function GenderCellRenderer() {
    }

    GenderCellRenderer.prototype.init = function (params) {
        this.eGui = document.createElement('span');
        this.eGui.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 18 18"><path d="M5 8l4 4 4-4z"/></svg>' + params.value;
    };

    GenderCellRenderer.prototype.getGui = function () {
        return this.eGui;
    };

DEMO

希望这会有所帮助。

【讨论】：