ag-grid 以编程方式选择行不突出显示

Posted 2023-03-28

【中文标题】ag-grid 以编程方式选择行不突出显示

【英文标题】：ag-grid programmatically selecting row does not highlight

【发布时间】：2018-02-14 01:25:35

【问题描述】：

使用 Angular 4（打字稿），我有一些使用 ag-grid 12.0.2 的代码，如下所示。我要做的就是加载我的网格并自动（以编程方式）选择第一行。

:
this.gridOptions = ....
    suppressCellSelection = true;
    rowSelection = 'single'
:

loadRowData() 
    this.rowData = [];
    // build the row data array...
    this.gridOptions.api.setRowData(this.rowData);

    let node = this.gridOptions.api.getRowNode(...);
    // console logging here shows node holds the intended row
    node.setSelected(true);
    // console logging here shows node.selected == true

    // None of these succeeded in highlighting the first row
    this.gridOptions.api.redrawRows( rowNodes: [node] );
    this.gridOptions.api.redrawRows();
    this.gridOptions.api.refreshCells( rowNodes: [node], force: true );

选择了第一个节点，但该行拒绝在网格中突出显示。否则，通过鼠标选择行就可以了。此代码模式与此处的示例代码相同：https://www.ag-grid.com/javascript-grid-refresh/#gsc.tab=0 但它不起作用。

抱歉，我不允许发布实际代码。

【参考方案1】：

onGridReady 表示网格已准备好，但 data 尚未准备好。 使用 onFirstDataRendered 方法：

<ag-grid-angular (firstDataRendered)="onFirstDataRendered($event)">
</ag-grid-angular>

onFirstDataRendered(params) 
    this.gridApi.getDisplayedRowAtIndex(0).setSelected(true);

这将自动选择网格中的第一行。

【参考方案2】：

我遇到了类似的问题，得出的结论是在加载行之前调用了 onGridReady()。仅仅因为 grid 已准备好并不意味着您的 rows 已准备好。（我使用的是 ag-grid 社区版本 19）解决方案是设置您的 api 事件处理程序加载数据后。出于演示目的，我将使用一个简单的 setTimeout()，以确保在与网格交互之前已经过了一段时间。在现实生活中，您需要使用一些在加载数据时触发的回调。

我的要求是处理程序在窗口调整大小时调整网格大小（与您无关），并且单击或导航到单元格会突出显示整行（与您相关），我还注意到与选定的单元格未突出显示。

  setUpGridHandlers(api)
    setTimeout(()=>
    api.sizeColumnsToFit();
    window.addEventListener("resize", function() 
      setTimeout(function() 
        api.sizeColumnsToFit();
      );
    );
    api.addEventListener('cellFocused',(rowIndex)=>api.getDisplayedRowAtIndex(rowIndex).setSelected(true));
  ,5000);

【参考方案3】：

由于你想在页面加载时选择第一行，你可以在构造函数中做一些事情。但是你的 gridApi，应该在 OnGridReady($event) 方法中初始化

 this.gridApi.forEachNode((node) => 
  if (node.rowIndex === 0) 
    node.setSelected(true);
 

【参考方案4】：

是setSelected(true) 这样做的。

我们使用MasterDetail feature，它是一个嵌套网格，在展开一行时，我们需要将选择更改为展开的行。

在

中处理了扩展行

detailCellRendererParams: 
  getDetailRowData: loadNestedData,
  detailGridOptions: @nestedDetailGridOptionsFor('child'),

加上loadNesteddata，我们得到params，使用我们可以选择扩展行为

params.node.parent.setSelected(true)

希望这会有所帮助。