访问由单元格渲染器创建的网格的 gridOptions答案

【问题标题】：Get access to gridOptions of grid created by cell renderer访问由单元格渲染器创建的网格的 gridOptions
【发布时间】：2021-05-16 01:12:37
【问题描述】：

我正在使用 ag-Grid 使用单元格渲染器在网格内创建网格。这是单元格渲染器的代码。

// cell renderer class
function TestCellRenderer() {
}

// init method gets the details of the cell to be rendered
TestCellRenderer.prototype.init = function(params) {
    this.eGui = document.createElement('div');

    // console.log('params.value:', params.value);
    // console.log('eGui', this.eGui.style);

    this.eGui.style.width = '70%';
    this.eGui.classList.add("ag-theme-balham");

    this.gridOptions = {
        columnDefs: params.columns,
        rowData: rowDataContained,
        domLayout: "autoHeight",
        rowHeight: 50,
        // suppressRowClickSelection: true,
        popupParent: document.querySelector('body'),
        rowDragManaged: true,
        components: {
            'actionCellRenderer': ActionCellRenderer,
            'selectCellRenderer': SelectCellRenderer
        },
        onCellEditingStopped: function(event) {
            console.log('cellEditingStopped');
        },
        onRowClicked: function(event) { console.log('A row was clicked:', event); },
    }
    // console.log('gridOptions:', this.gridOptions);

    new agGrid.Grid(this.eGui, this.gridOptions);
};

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

此屏幕截图将更好地解释我所做的事情。

我的问题是，我为“Dropdown”列创建了一个 select2 单元格编辑器，但是当用户单击选择菜单中的一个选项时调用 api.StopEditing() 函数时遇到问题，因为它需要之前的 gridOptions使用渲染器动态创建。

如果用户将焦点更改为不同的单元格，编辑确实会停止，但我希望能够在用户选择一个值时让它停止。当用户选择某些内容时，我能够将某些内容打印到控制台，但我不知道如何访问该特定网格的 gridOptions。

【问题讨论】：

您是否为两个网格 gridOptions 命名了您的 gridOptions？如果您将内部网格的 gridOptions 称为 innerGridOptions 之类的名称，然后在其上调用 stopEditing，它不会起作用吗？
感谢您的回复，我通过将以下内容添加到自定义单元格编辑器初始化函数来修复它： $(this.eInput).on('select2:select', function(e) { console. log('Works!', this); params.stopEditing(); });

标签： javascript ag-grid

【解决方案1】：

对于任何想知道的人，我通过将以下内容添加到我的 selectCellEditor.prototype.init 函数来解决问题：

$(this.eInput).on('select2:select', function(e) {
    console.log('Works!', this);
    params.stopEditing();
});

发生了什么，当用户选择一个选项时，菜单关闭并且单元格中的值发生变化。

【讨论】：