以编程方式 select 一行 ag-grid + angular 2

Question

在 ag-grid 中尝试 select 默认第一行。根据 ag-grid 文档，我应该能够使用 NodeSelection Api(https://www.ag-grid.com/javascript-grid-selection/?framework=all#gsc.tab=0) 来执行此操作。但是我根本无法访问节点对象。 HTML 文件

<div class="pulldown panel panel-default">
          <div class="panel-heading">{{rulesSummaryTitle}}</div>
          <ag-grid-angular #agGrid   class="ag-fresh ag-bootstrap"
                           [gridOptions]="gridOptions"
                           [rowData]="rowData"
                           [columnDefs]="columnDefs"
                           [enableSorting]="true"
                           rowSelection="single"
                           [pagination]="true"
                           [suppressCellSelection]="true"
                           (gridReady)="onGridReady($event)"
                           (rowSelected)="onRowSelect($event)">
          </ag-grid-angular>
      </div>

我在 "onGridReady" 方法中调用节点 selection api 但出错并显示错误消息 "cant call setSelected on undefined".

public onGridReady(event: any): void {
    event.api.sizeColumnsToFit();
    this.gridOptions.api.node.setSelected(true);
  }

Answer 1

gridOptions.api 对象上没有 node 属性。你会想做更多像这样的事情：

public onGridReady(event: any): void {
  event.api.sizeColumnsToFit();
  gridOptions.api.forEachNode(node=> node.rowIndex ? 0 : node.setSelected(true))
}

这将检查数据中的每个节点并查看 rowIndex 是否为 0，如果为 0，则使用节点对象设置所选属性

Answer 2

尝试使用 gridOptions.api.setFocusedCell(0, [column name])，其中列名可以是不可见的列

Answer 3

找到解决方案，问题是 "onGridReady" 函数在从 Observables 填充行数据之前被调用。所以实际上没有 select 语句可以 select 的行。

import { Component } from '@angular/core';
import {Observable} from "rxjs/Observable";
export class Hero {
  id: number;
  name: string;
}

@Component({
  selector: 'my-app',
  template: `
    <ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh"
                 [rowData]="rowData"
                 (gridReady)="onReady($event)"
                 [columnDefs]="columnDefs">
</ag-grid-angular>
<ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh"
                 [rowData]="rowData2"
                 (gridReady)="onReady($event)"
                 [columnDefs]="columnDefs">
</ag-grid-angular>
<ag-grid-angular style="width: 500px; height: 115px;" class="ag-fresh"
                 [gridOptions]="gridOptions"
                 [rowData]="rowData3"
                 (gridReady)="onReady($event)"
                 (rowDataChanged)="onRowDataChanged()"
                 [columnDefs]="columnDefs">
</ag-grid-angular>
    `
})
export class AppComponent {
    columnDefs;
    rowData;
    rowData2;
    rowData3;

    constructor() {
      this.gridOptions = {
      rowData: this.rowData3
    };
      console.log("in here");
      console.log("in here");
      console.log("in here");
        this.columnDefs = [
            {headerName: "Make", field: "make"},
            {headerName: "Model", field: "model"},
            {headerName: "Price", field: "price"}
        ];

        this.rowData = [
            {make: "Toyota", model: "Celica", price: 35000},
            {make: "Ford", model: "Mondeo", price: 32000},
            {make: "Porsche", model: "Boxter", price: 72000}
        ]

        let val = [
      {make: "Toyota", model: "Celica", price: 35000},
      {make: "Ford", model: "Mondeo", price: 32000},
      {make: "Porsche", model: "Boxter", price: 72000}
    ];


    let res : Observable<any> = Observable.create(observer => {
      setTimeout(()=>{
        observer.next(val);
      },1);
    });
    res.subscribe(
      resposne => {
        this.rowData2 = resposne;
      });

      let res1 : Observable<any> = Observable.create(observer => {
      setTimeout(()=>{
        observer.next(val);
      },2000);
    });
    res1.subscribe(
      resposne => {
        this.rowData3 = resposne;
      });


    }
       /**
   * Select the first row as default...
   */
  public onRowDataChanged(): void {
    this.gridOptions.api.forEachNode(node => node.rowIndex ? 0 : node.setSelected(true));
  }


    private onReady(params) {
        params.api.sizeColumnsToFit();
       params.api.forEachNode(node => node.rowIndex ? 0 : node.setSelected(true));
    }
}

https://plnkr.co/edit/PSKnSjAo6omDAo5bjm1J.

添加了具有三个 ag-grid 的 plunker。第一个网格具有预定义的 rowdata 值，第二个网格具有从 Observables 填充行数据但延迟非常短，第三个网格具有从具有更高延迟的 observables 填充的行数据值。如果第一个和第二个 "onGridReady" 函数被调用并且第一行得到 selected，但在第三个网格的情况下，我们必须在 "rowDataChanged" 事件上提供 select 行语句对于要 selected 的行。

Answer 4

在onGridReady 上，您可以使用此代码默认选择第一行。

let  rowIndex = 0;
this.GridOptions.api.paginationGoToFirstPage(); // If pagination is implemented
this.GridOptions.api.selectIndex(rowIndex, false, false);
this.GridOptions.api.setFocusedCell(0, "FirstName");

Answer 5

aggrid on ready 函数不适合此交易。 agon ready just drawing table 如果你想操作你必须在 ag 准备好之前处理的数据。但是 this.if 没有选项，您可以在方法中添加此代码。

getProducts: async function() {
      let data = await repository.getAll("Product").then(r => r.list);
      for (let i = 0; i < this.value.length; i++) {
        for (let j = 0; j < data.length; j++) {
          if (this.value[i].productId == data[j].productId) {
            let x = data.splice(j, 1)[0];
            data.unshift(x);
            break;
          }
        }
      }
      this.productDataForAggrid = data;
      this.gridApi.setRowData(this.productDataForAggrid);
      window.watcher = setInterval(this.setSelectedItems, 50, this.gridApi);
    }

除最后一部分外，此函数是普通的get方法。 İf 你 select 在 ag 上编辑了一些行，如果你关闭 ag 所有 selection 将在 table 上删除，但你仍然有哪些数据 selected 在你的数据属性当你再次打开 ag 时。您将休假 way.this 部分代码以实现真正的就绪功能，我的意思是在准备数据之前。

setSelectedItems(api) {
      if (this.productDataForAggrid.length == api.getDisplayedRowCount()) {
        for (let i = 0; i < this.value.length; i++) {
          let node = api.getRowNode(this.value[i].productId.toString());
          if (node) {
            node.setSelected(true);
          }
        }
        this.gridApi.sizeColumnsToFit();
        clearInterval(window.watcher);
        window.watcher = 0;
        //console.log("ready!");
      }
    }

首先，我们将添加所有 selected 数据以添加到账单列表中。但是，如果客户想再次重新打开产品 select aggrid，客户将看不到 selected 产品。这个 getproducts 函数在每次打开 ag 时都有效。并获得所有产品。将此数据与我们的值属性进行比较。并发送到 setSelectedItems 函数进行检查 selected.


 saveSelectedProducts() {
      this.value.splice(0, this.value.length);
      for (var i = 0; i < this.gridOptions.api.getSelectedRows().length; i++) {
        if (this.gridOptions.api.getSelectedRows()[i].sellPrice === undefined)
          this.gridOptions.api.getSelectedRows()[
            i
          ].sellPrice = this.gridOptions.api.getSelectedRows()[i].odooId;

        if (this.gridOptions.api.getSelectedRows()[i].piece === undefined)
          this.gridOptions.api.getSelectedRows()[i].piece = 1;

        this.value.push(this.gridOptions.api.getSelectedRows()[i]);
      }
      //this.$emit("selectedProductsList", this.value);
      this.openProductPopup = false;
    },

Answer 6

我们需要调用setSelected(true)方法来select行节点。主要问题是获取行节点。

我们可以通过调用getRenderedNodes()方法来获取行节点。根据the doc,

Retrieve rendered nodes. Due to virtualisation this will contain only the current visible rows and those in the buffer.

因此，我们将在 getRenderedNodes() 方法返回的数组的索引 0 处获取第一行节点。实施将如下-

public onGridReady(event: any): void {
  let nodes = event.api.getRenderedNodes();
  if (nodes.length) {
    nodes[0].setSelected(true); //selects the first row in the rendered view
  }
}

这是有效的 plunker 演示：https://plnkr.co/edit/J40sUeDSwyDEi76X

Answer 7

setSelected(false) 可以在 (selectionChanged) 事件上调用。

ag 网格public 方法

上可用的网格事件之一

以编程方式 select 一行 ag-grid + angular 2

Programmatically select a row ag-grid + angular 2

ag-grid

angular