时间戳

首页 > 解决方案 > 如何为 ag-grid 过滤器提供默认值

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

问题描述

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

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
  },

标签： angularag-gridag-grid-angular

解决方案

如果要在过滤器上设置默认值，可以利用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();
}

我在这里创建了一个演示。

推荐阅读