如何知道/捕获您所在的特定详图网格的详图网格ID?(ag网格javascript)

如何知道/捕获您所在的特定详图网格的详图网格ID?(ag网格javascript),javascript,ag-grid,master-detail,Javascript,Ag Grid,Master Detail,我有一个主细节ag网格。一列有复选框,(复选框选择:true)。详细信息网格有一个带有按钮的自定义状态面板。当用户单击任何特定细节网格中的按钮时,我不知道如何仅从该特定细节网格中获取SelectedRows 问题是,它们可能会保留多个显示/打开的详细信息,然后在每个详细信息栅格上循环将包括所有打开栅格的结果。我试图隔离到用户单击按钮的网格 我尝试在所有显示/打开的详细信息网格中循环以获取详细信息网格ID。但是我没有看到任何信息显示他们在其中单击了哪个按钮 我尝试在按钮组件中查看在参数中是否有任何

我有一个主细节ag网格。一列有复选框,(复选框选择: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();
};

我能够解决这个问题,所以我想我会发布我的答案,以防其他人也有同样的问题。我不确定我是否采取了最好的方法,但它似乎正按照我的需要发挥作用

首先,根据文档,我还尝试使用自定义细节单元渲染器,但最终遇到了相同的问题。我能够在detail 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);
}
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);
}