AG-Grid创建后如何更新agSelectCellEditor的下拉选项？

问题场景 #

我拥有一个可动态变更的数组，希望在AG-Grid创建完成后，基于该数组更新agSelectCellEditor编辑器的选项。示例场景为：用AG-Grid展示运动员数据，每条数据包含AthleteName（运动员姓名）和sport（运动项目）字段，sport字段采用agSelectCellEditor实现下拉选择。用户可通过输入框手动更新运动列表（如输入“Football, Tennis”），此时需要让下拉框同步出现新的选项，但直接为cellEditorParams的values属性传入函数无法实现实时更新。

解决思路与步骤 #

• 监听输入框变化：给输入框添加input事件监听，实时捕获用户输入的运动列表变更。
• 动态更新列定义：每次输入变化时，重新获取最新的运动列表，修改sport列的cellEditorParams.values，再通过AG-Grid的api.setColumnDefs()方法更新列配置，让编辑器选项同步更新。
• 保留原有列配置：更新列定义时，仅修改目标列的参数，避免破坏其他列的原有配置。

修改后的完整代码 #

<!DOCTYPE html>
<html>
    <head>
        <!--Import ag grid-->
        <script src="https://cdn.jsdelivr.net/npm/ag-grid-community/dist/ag-grid-community.min.noStyle.js" type="text/javascript"></script>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-grid.css"/>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ag-grid-community/styles/ag-theme-alpine.css"/>
    </head>
    <body>
        <input type="text" id="sportListInput" value="Football" placeholder="用逗号分隔运动项目"></input>
        <button onclick="init();this.setAttribute('style','display:none')">加载运动员数据</button>
        <div id="gridDiv" class="ag-theme-alpine" style="height: 500px;"></div>
        <script type="text/javascript">
            let gridOptions;

            function init(){
                const data =[
                    {
                        AthleteName: "纳达尔",
                        sport: "Football"
                    },
                    {
                        AthleteName: "C罗",
                        sport: "Football"
                    }
                ];

                const columnDefs = [
                    {
                        field: "AthleteName",
                    },
                    {
                        field: "sport",
                        cellEditor: 'agSelectCellEditor',
                        cellEditorPopup: true,
                        cellEditorParams: {
                            values: getSportList(),
                        }
                    }
                ];
                const gridDiv = document.getElementById("gridDiv");
                gridOptions = {
                    columnDefs: columnDefs,
                    defaultColDef: {sortable: true, filter: true, editable: true},
                };
                new agGrid.Grid(gridDiv, gridOptions);
            
                gridOptions.api.setRowData(data);
                gridOptions.api.sizeColumnsToFit();
                
                // 监听输入框变化，更新下拉选项
                document.getElementById('sportListInput').addEventListener('input', updateSportSelectOptions);
            };

            function getSportList(){
                const sportListInput = document.getElementById("sportListInput");
                return sportListInput.value.split(",").map(sport => sport.trim()).filter(sport => sport);
            };

            function updateSportSelectOptions() {
                if (!gridOptions) return;
                // 获取当前列定义，修改sport列的cellEditorParams
                const updatedColumnDefs = gridOptions.columnDefs.map(colDef => {
                    if (colDef.field === 'sport') {
                        return {
                            ...colDef,
                            cellEditorParams: {
                                values: getSportList()
                            }
                        };
                    }
                    return colDef;
                });
                // 更新列定义
                gridOptions.api.setColumnDefs(updatedColumnDefs);
            }
        </script>
    </body>
</html>

代码说明 #

1. 新增全局变量gridOptions，方便在输入框监听函数中访问Grid实例。
2. 给sportListInput添加input事件监听，触发updateSportSelectOptions函数。
3. updateSportSelectOptions函数中，复制原有列定义并修改sport列的cellEditorParams.values为最新运动列表，再通过setColumnDefs更新配置，实现下拉选项的实时同步。
4. 优化getSportList函数，过滤掉空字符串，避免出现无效选项。

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