Question

我在agrud中使用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和sureIndexVisible来实现。

  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将返回结构为

的对象

interface RowDataTransaction {

    // Row Nodes added
    add: RowNode[];

    // Row Nodes removed
    remove: RowNode[];

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

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

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

1 个答案: