如何为 ag-grid 过滤器提供默认值答案

【问题标题】：how to give a default value to ag-grid filter如何为 ag-grid 过滤器提供默认值
【发布时间】：2019-07-06 09:14:16
【问题描述】：

尝试在 ag-grid 过滤器文本中显示默认值。在过滤器参数中，我想给用户显示一个默认值，不仅要应用于结果

this.columnDefs = [
  {
    headerName: this.pageData["tbm.line.list.grid.phonenumber"],
    field: 'tn',
    /*sort: "asc",*/
    sortable: true,
    filter: "agTextColumnFilter",
    filterParams: { filterOptions: ['contains'], apply: true },
    //tooltip: (params) => 'Address: ' + params.value,
    headerTooltip: 'Phone Number',
    // editable: true,
    // checkboxSelection: true,
    // headerCheckboxSelection: true,
    // headerCheckboxSelectionFilteredOnly: true,
    width: 150
  },

【问题讨论】：

标签： angular ag-grid ag-grid-angular

【解决方案1】：

如果你想为你的过滤器设置一个默认值，你可以利用firstDataRendered事件，并设置初始过滤器模型。

<ag-grid-angular
  #agGrid
  style="width: 100%; height: 100%;"
  id="myGrid"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
  (firstDataRendered)="onFirstDataRendered($event)"
></ag-grid-angular>

在你的 component.ts 上，

onFirstDataRendered() {
  const yourFilterComponent = this.gridApi.getFilterInstance('athlete');
  yourFilterComponent.setModel({
    type: 'contains',
    filter: 'Phelps'
  });
  this.gridApi.onFilterChanged();
}

我在here 上创建了一个演示。

【讨论】：

【解决方案2】：

上述答案的一些变化对我有用。在 .ts 中，setModel() 我使用 setFilterModel 作为 apiGrid。

<ag-grid-angular
  #agGrid
  style="width: 100%; height: 100%;"
  id="myGrid"
  class="ag-theme-balham"
  [columnDefs]="columnDefs"
  [defaultColDef]="defaultColDef"
  [rowData]="rowData"
  (gridReady)="onGridReady($event)"
  (firstDataRendered)="onFirstDataRendered($event)"
></ag-grid-angular>

在你的 component.ts 上，

onFirstDataRendered() {
  this.gridApi.setFilterModel({
  "year": {
    filterType: 'set',
    values: ["2010"],
  }
})
  this.gridApi.onFilterChanged();
}

【讨论】：