ag grid 滚动到新创建的项目并突出显示该行

Question

我在 angular 中使用 ag-grid 进行 CRUD 操作应用程序。当我创建一个新项目时，它会在网格中更新，但是一旦更新项目滚动条应该滚动到新项目位置并且新项目行应该突出显示。

请高手指教？

HTML

<ag-grid-angular style="width: 100%; height: 100%;" class="ag-theme-balham" [defaultColDef]="defaultColDef"
      [columnDefs]="columnDefs" [rowSelection]="rowSelection" [rowData]="rowData" [suppressMenuHide]="true"  [rowDragManaged]="true"
     [frameworkComponents]="frameworkComponents" (selectionChanged)="onSelectionChanged()"
      (rowClicked)='onRowClicked($event)' (gridReady)="onGridReady($event)" [gridOptions]="gridOptions">
    </ag-grid-angular>

TS

ngAfterViewInit(): void {
    this.gridOptions.api.setColumnDefs([
      {
        headerName: "",
        field: "markedAsFavorite",
        minWidth: 50,
        maxWidth: 50,
        headerComponentParams: { menuIcon: "fa-star" },
        cellRendererFramework: DisciplinesCellComponent,
        cellRendererParams: {
          ngTemplate: this.greetCell
        }
      },
      {
        headerName: "Disciplines",
        field: "name", valueGetter: (params) => params.data.name.en,
      },
      {
        headerName: "Market",
        field: "market", valueGetter: (params) => params.data.markets.name,
      },
      {
        headerName: "Description",
        field: "description", valueGetter: (params) => params.data.description.en
      }
    ]);
  }

Answer 1

您可以使用 ag-grid 中提供的 RowDataTransaction 和 ensureIndexVisible 来实现。

  onAddNewRow(data: any) {
    if (this.gridOptions && this.gridOptions.api) {
      const addedRow = this.gridOptions.api.updateRowData({
        add: [data]
      });
      addedRow.add[0].setSelected(true);
      this.gridOptions.api.ensureIndexVisible(addedRow.add[0].rowIndex, 'bottom');
    }
  }

此处 updateRowDate 将 return 具有

结构的对象

interface RowDataTransaction {

    // Row Nodes added
    add: RowNode[];

    // Row Nodes removed
    remove: RowNode[];

    // Row Nodes updated
    update: RowNode[];
}

由于您添加的是单行，因此您可以从索引为 0 的元素访问它。通过将新添加行的索引传递给 ensureIndexVisible 方法，您可以向下滚动到该特定行。

ag grid 滚动到新创建的项目并突出显示该行

ag grid scroll to newly created item and highlight the row

ag-grid

angular