如何知道/捕获您所在的特定详细信息网格的详细信息网格 ID？ (ag-grid javascript)

Question

我有一个 Master-Detail ag-grid。一列有复选框，(checkboxSelection: true)。详细信息网格有一个带有按钮的自定义状态面板。当用户单击任何特定详细信息网格中的按钮时，我不知道如何从该特定详细信息网格中获取 SelectedRows。

问题是它们可能会显示/打开多个详细信息，然后循环遍历每个详细信息网格将包括来自所有打开网格的结果。我试图隔离到用户单击按钮的网格。

我尝试遍历所有显示/打开的详细信息网格以获取详细信息网格 ID。但我没有看到任何信息显示他们点击了哪个按钮。

我尝试在按钮组件中查看参数中是否有任何引用按钮所在的 detailgrid ID 的内容，但我也没有看到任何内容。

这是按钮组件：

function ClickableStatusBarComponent() {}

ClickableStatusBarComponent.prototype.init = function(params)
{
    this.params = params;

    this.eGui = document.createElement('div');
    this.eGui.className = 'ag-name-value';

    this.eButton = document.createElement('button');

    this.buttonListener = this.onButtonClicked.bind(this);
    this.eButton.addEventListener("click", this.buttonListener);
    this.eButton.innerHTML = 'Cancel Selected Records&nbsp;&nbsp;<em class="fas fa-check" aria-hidden="true"></em>';
    console.log(this.params);

    this.eGui.appendChild(this.eButton);
};

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

ClickableStatusBarComponent.prototype.destroy = function()
{
    this.eButton.removeEventListener("click", this.buttonListener);
};

ClickableStatusBarComponent.prototype.onButtonClicked = function()
{
        getSelectedRows();
};

下面是循环查找所有打开的细节网格的代码：

function getSelectedRows()
{
    this.gridOptions.api.forEachDetailGridInfo(function(detailGridApi) {
    console.log(detailGridApi.id);
});

Answer 1

我能够解决这个问题，所以我想我会发布我的答案，以防其他人有同样的问题。我不确定我是否采用了最好的方法，但它似乎可以满足我的需要。

首先，根据文档，我还尝试使用自定义细节单元格渲染器，但最终遇到了同样的问题。我能够在详细的 onGridReady 函数中检索 DetailGridID，但无法弄清楚如何在其他地方使用该变量。

所以我回到上面发布的代码，当单击按钮时，我执行 jquery .closest 以找到最近的具有 row-id 属性（表示 DetailgridID）的 div，然后我使用那个特定的ID 以获取仅在该详细信息网格中选择的行。

更新按钮点击代码：

ClickableStatusBarComponent.prototype.onButtonClicked = function()
{
    getSelectedRows(this);
};

更新了 getSelectedRow 函数：

function getSelectedRows(clickedBtn)
{
    var detailGridID = $(clickedBtn.eButton).closest('div[row-id]').attr('row-id');
    var detailGridInfo = gridOptions.api.getDetailGridInfo(detailGridID);
    const selectedNodes = detailGridInfo.api.getSelectedNodes()
    const selectedData = selectedNodes.map( function(node) { return node.data })
    const selectedDataStringPresentation = selectedData.map( function(node) {return node.UniqueID}).join(', ')
    console.log(selectedDataStringPresentation);
}