带有 Angular 的 agGrid，使用 agRichSelectCellEditor

Question

我有一个 agGrid，其中填充了来自我的 Web 服务的 JSON 格式的员工记录。

[
   { 
     id: 123,
     firstName: 'Mike',
     lastName: 'Jones',
     countryId: 1001,
     DOB: '1980-01-01T00:00:00',
     . . .
   }

我有第二个 Web 服务返回国家代码列表：

[ 
    { id: 1000, name: 'France' },
    { id: 1001, name: 'Spain' },
    { id: 1002, name: 'Belguim' }
]

我要做的是让我的 agGrid 有一个显示用户详细信息的列，包括他们国家的 name，当他们编辑这个单元格时，国家代码列表将出现，他们可以在其中选择一个，它将使用该国家/地区的 id 更新记录。

基本的东西，不是吗？

但是有没有人设法让 agGrid 成功地使用“agRichSelectCellEditor”来成功地做到这一点？

  { headerName: 'Country', width: 120, field: 'countryId', editable: true, 
      cellEditor:'agRichSelectCellEditor',

      cellEditorParams: { 
          // This tells agGrid that when we edit the country cell, we want a popup to be displayed
          // showing (just) the names of the countries in our reference data
          values: listOfCountries.map(s => s.name)
      },

      //  The "cellRenderer" tells agGrid to display the country name in each row, rather than the
      //  numeric countryId value
      cellRenderer: (params) => listOfCountries.find(refData => refData.id == params.data.countryId)?.name,

      valueSetter: function(params) {
        //  When we select a value from our drop down list, this function will make sure 
        //  that our row's record receives the "id" (not the text value) of the chosen selection.
        params.data.countryId = listOfCountries.find(refData => refData.name == params.newValue)?.id;
        return true;
    }  
  },

我的代码似乎几乎正确..它设法：

• 在 agGrid 的每一行中显示国家名称
• 显示一个弹出窗口，列出我们的“国家列表”数组中的国家/地区名称
• 当我在弹出窗口中选择一个项目时，它会使用我选择的国家/地区的（数字）id 值成功更新countryId 字段

唯一的问题是，在弹出窗口的顶部，它显示了countryId 值，而不是用户当前的国家/地区名称。

有没有人设法让它工作？

我能想到的唯一解决方法是覆盖此弹出窗口上的 CSS 并隐藏顶部元素：

.ag-rich-select-value
{
    display: none !important;
}

它有效...但您不再看到您之前选择的值是什么。

（我真的希望 agGrid 网站有一些体面的、真实的、工作的 Angular 示例……或者至少让开发人员在那里发布 cmets，以互相帮助。）

Answer 1

解决方案是使用valueGetter，而不是cellRenderer：

 { 
    headerName: 'Country', width: 120, field: 'countryId', editable: true, 
    cellEditor:'agRichSelectCellEditor',

    cellEditorParams: { 
        // This tells agGrid that when we edit the country cell, we want a popup to be displayed
        // showing (just) the names of the countries in our reference data
        values: listOfCountries.map(s => s.name)
    },

    valueSetter: function(params) {
        //  When we select a value from our drop down list, this function will make sure
        //  that our row's record receives the "id" (not the text value) of the chosen selection.
        params.data.countryId = listOfCountries.find(refData => refData.name == params.newValue)?.id;
        return true;
    }, 

    valueGetter: function(params) {
        //  We don't want to display the raw "countryId" value.. we actually want 
        //  the "Country Name" string for that id.
        return listOfCountries.find(refData => refData.id == params.data.countryId)?.name;
    }
},

希望对你有用……

Answer 2

我能够得到类似的情况（列表中的 id:name 对，但不使用 Angular），没有您上面提到的问题，也没有 valueGetter/valueSetter，只有一个渲染器。好处是您无需双击单元格即可查看列表，单元格始终显示为选择框，并且您可以避免用户在显示列表时双击单元格时出现错误。

渲染器比我想要的要笨重得多（像你这样的一行），aggrid 似乎没有内置支持这个非常基本的功能（我已经花了足够的时间在这上面）。

无论如何，这就是我所拥有的，至少有效，但渴望看到它的进一步改进。 （由于我的 defaultValue 对象是我特有的，因此您至少需要更改 2 行与选项相关的代码）。

列定义：

{field: 'defaultValueID', headerName: "Default Value", cellEditor:'agRichSelectCellEditor', cellRenderer: defaultValueRenderer}

以及渲染器代码：

    function defaultValueRenderer(params) {
        var input = document.createElement("select");
        // allow it to be cleared
        var option = document.createElement("option");
        option.innerHTML = '[None]';
        option.value = null;
        input.appendChild(option);

        for (var i=0; i < defaultValueList.length; i++) {
            var option = document.createElement("option");
            option.innerHTML = defaultValueList[i].name;
            option.value = defaultValueList[i].gltID;
            input.appendChild(option);
        }

        input.value = params.value;
        input.onchange = function() {
            params.setValue(this.value);
            params.data.defaultValueID = this.value;
        }
        input.style="width: 100%; height: 100%"; // default looks too small
        return input;
    }

Answer 3

这里是 agRichSelectCellEditor 的示例...

{
            headerName: 'Dropdown', field: 'dropdown',
            cellEditor: 'agRichSelectCellEditor',
            width: 140,          
            editable: true,

            cellEditorParams: (params) => {
            values: Get All Dropdown List Like ["Hello","Hiii","How Are You?"]
            },

            valueSetter: (params) => {
              if (params.newValue) {
               params.data.dropdown= params.newValue;
                return true;
              }
              return false;
            }
 }