时间戳

首页 > 解决方案 > 访问由单元格渲染器创建的网格的 gridOptions

javascript - 访问由单元格渲染器创建的网格的 gridOptions

问题描述

我正在使用 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。

标签： javascriptag-grid

解决方案

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

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

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

推荐阅读