Question

尝试在ag-grid中默认选择第一行。根据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>

我在＆＃34; onGridReady＆＃34;中调用节点选择api。方法但错误输出错误消息＆＃34;无法调用setSelected on undefined＆＃34;。

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

Answer 1

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

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

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

Answer 2

找到解决方案，问题是在从Observables填充行数据之前调用了“onGridReady”函数。所以实际上没有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填充rowdata但具有非常小的延迟，第三个网格具有从具有更高延迟的可观察量填充的行数据值。如果第一个和第二个“onGridReady”函数被调用并且第一行被选中，但是在第三个网格的情况下，我们必须为“rowDataChanged”事件提供选择行语句以便选择行。

Answer 3

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

try{
  $tododb = new PDO('mysql:host = localhost;dbname = mytodo;charset=utf8','root','');  //Connect to the db
  $statement = $tododb->prepare('select * from todos');
  $statement->execute();
  var_dump($statement->fetchAll(PDO::FETCH_OBJ));
}
catch(PDOException $e){
  echo 'Exception -> ';
  var_dump($e->getMessage());
  die();
}

Answer 4

尝试使用gridOptions.api.setFocusedCell（0，[column name]），其中列名称可以是ne visible column

Answer 5

准备就绪功能不适合此事务。角准备好只是绘图表，如果要操作数据，则必须在准备就绪之前进行处理。但是对此没有选择。如果在方法上添加此代码。

configurations.all {
    resolutionStrategy
        .componentSelection
        .all(object : Action<ComponentSelection> {
            @Mutate
            override fun execute(selection : ComponentSelection) {
                // Add exclusion rules here
                excludeSelectionByRegex(selection, "org\\.jetbrains.*", ".*", ".*-(eap|M).*")
                excludeSelectionByRegex(selection, "org\\.my-group.*", "my-module", ".*-beta")
            }
        })
}

fun excludeSelectionByRegex(selection: ComponentSelection, groupRegex: String, moduleRegex: String, versionRegex: String) {
    if (groupRegex.toRegex().matches(selection.candidate.group) &&
        moduleRegex.toRegex().matches(selection.candidate.module) &&
        versionRegex.toRegex().matches(selection.candidate.version)
    ) {
        selection.reject("Matched exclusion rule")
    }
}

此函数是正常的get方法，除了最后一部分。如果您选择了a上的某些行，并且如果关闭了a，则所有选择都将在表上删除，但是再次打开a时，您会在data属性中选择了哪些数据。您将以这种方式休假。这部分代码代表真正的就绪功能，我的意思是在准备数据之前。

Take Server Version

首先，我们将在价值道具上添加所有选择的数据，以添加到结算清单中。但是，如果客户要重新打开产品，请再次选择聚集，客户将看不到所选产品。每次打开时，此getproducts函数都可正常工作。并获得所有产品。将此数据与我们的value属性进行比较。并发送到setSelectedItems函数以进行选中检查。

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);
    }

Answer 6

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

我们可以通过调用 getRenderedNodes() 方法来获取行节点。根据{{3}}，

<块引用>

检索渲染的节点。由于虚拟化，这将只包含当前可见的行和缓冲区中的行。

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

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 演示：the doc

Answer 7

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

ag 网格公共方法上可用的网格事件之一

以编程方式选择行ag-grid + angular 2

7 个答案: