如何know/capture你所在的具体详情网格的详情网格ID? (农业网格 javascript)
How to know/capture the Detail Grid ID of the specific detail grid you are in? (ag-grid javascript)
我有一个主从农业网格。一列有复选框,(checkboxSelection: true)。详细信息网格有一个带有按钮的自定义状态面板。当用户单击任何特定详细信息网格中的按钮时,我不知道如何仅从该特定详细信息网格中获取 SelectedRows。
问题是他们可能会留下多个细节 displayed/open,然后遍历每个细节网格将包括来自所有开放网格的结果。我试图隔离到用户单击按钮的网格。
我尝试遍历所有 displayed/open 详细信息网格以获取详细信息网格 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 <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);
});
我能够解决这个问题,所以我想我会 post 我的答案,以防其他人遇到同样的问题。我不确定我采用了最好的方法,但它似乎在我需要的时候起作用。
首先,我还尝试根据文档使用自定义细节单元格渲染器,但最终遇到了同样的问题。我能够在细节 onGridReady 函数中检索到 DetailGridID——但无法弄清楚如何在其他地方使用该变量。
所以我回到上面的代码 posted,当单击按钮时,我执行 jquery .closest 以找到最近的 div row-id 属性(表示 DetailgridID),然后我使用该特定 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);
}
我有一个主从农业网格。一列有复选框,(checkboxSelection: true)。详细信息网格有一个带有按钮的自定义状态面板。当用户单击任何特定详细信息网格中的按钮时,我不知道如何仅从该特定详细信息网格中获取 SelectedRows。
问题是他们可能会留下多个细节 displayed/open,然后遍历每个细节网格将包括来自所有开放网格的结果。我试图隔离到用户单击按钮的网格。
我尝试遍历所有 displayed/open 详细信息网格以获取详细信息网格 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 <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);
});
我能够解决这个问题,所以我想我会 post 我的答案,以防其他人遇到同样的问题。我不确定我采用了最好的方法,但它似乎在我需要的时候起作用。
首先,我还尝试根据文档使用自定义细节单元格渲染器,但最终遇到了同样的问题。我能够在细节 onGridReady 函数中检索到 DetailGridID——但无法弄清楚如何在其他地方使用该变量。
所以我回到上面的代码 posted,当单击按钮时,我执行 jquery .closest 以找到最近的 div row-id 属性(表示 DetailgridID),然后我使用该特定 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);
}