Ag grid 使用agRichSelectCellEditor以角度聚集

我有一个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有一个列，显示用户的详细信息，包括他们国家的名称，当他们编辑此单元格时，将出现一个国家代码列表，他们可以在其中选择一个，它将用该国家的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网站有一些像样的、真实的、有棱角的例子……或者至少让开发人员在上面发表评论，互相帮助。）

解决方案是使用

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;
    }
},

---

我希望这是有用的…

我能够得到类似的情况（id：列表中的名称对，但不使用

角度
），而没有您上面提到的问题，也没有
valueGetter/valueSetter
，只有一个渲染器。这样做的好处是，您无需双击单元格即可查看列表，单元格始终显示为选择框，并且可以避免在显示列表时用户双击单元格时出现错误

渲染器比我想要的要笨重得多（只有一行像你的一样），而且aggrid似乎没有内置对这个非常基本的函数的支持（我已经在这方面花费了足够的时间）

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

列定义：

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

和渲染器代码：

函数defaultValueRenderer（参数）{
var输入=document.createElement（“选择”）；
//允许它被清除
var option=document.createElement（“选项”）；
option.innerHTML='[None]'；
option.value=null；
input.appendChild（选项）；
对于（变量i=0；i
以下是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;
            }
 }