将 agSetColumnFilter 与服务器端行模型一起使用答案

【问题标题】：using agSetColumnFilter with serverSide row model将 agSetColumnFilter 与服务器端行模型一起使用
【发布时间】：2019-12-08 01:22:32
【问题描述】：

我在我的 Angular 应用程序中使用 agSetColumnFilter，我使用的是 serverSide 行模型。如果我使用 infinite 行模型，它可以正常工作。我将值数组传递给过滤器。

问题是 我无法更改过滤器元素中复选框的状态。

如果我点击一个复选框，过滤器正在应用该选项，但看起来复选框的状态立即变为相反，并且过滤器的状态不保存。我只能选择一个类别进行过滤。

<app-ag-grid  
  [columnDefs]="columnDefs" 
  [pagination]="pagination"
  [paginationPageSize]="paginationPageSize" 
  [rowModelType]="rowModelType" 
  [defaultColDef]="defaultColDef"
  [frameworkComponents]="frameworkComponents" 
  [context]="context" 
  [floatingFilter]="floatingFilter"
  [paginationAutoPageSize]="paginationAutoPageSize"
  (gridReady)="onGridReady($event)">
  </app-ag-grid>

@Component({
  selector: 'app-server-side',
  templateUrl: './server-side.component.html',
  styleUrls: ['./server-side.component.scss']
})
export class ServerSideComponent implements OnInit {
  paginationAutoPageSize = false;
  gridApi: GridApi;
  gridoptions;
  rowData;
  pagination = true;
  paginationPageSize = 100;
  rowModelType = 'serverSide';
  floatingFilter = false;
  defaultColDef = {
    sortable: false,
    editable: true,
    resizable: true,
    filter: true
  };
  enableServerSideSorting = true;
  enableServerSideFilter = true;
  columnDefs = [
    {
      field: 'isActive',
      headerName: 'Active',
      cellRenderer: 'checkboxRenderer',
      filter: 'agSetColumnFilter',
      width: 100,
      filterParams: {
      values: [true, false]
  }
},
{
  field: 'balance',
  headerName: 'Balance',
  filter: 'agNumberColumnFilter',
  width: 100,
  type: 'numericColumn',
  filterParams: {
    filterOptions: ['equals', 'lessThan', 'greaterThan'],
    suppressAndOrCondition: true
  },
},
{
  field: 'tags',
  headerName: 'Tags',
  filter: 'agSetColumnFilter',
  filterParams: {
    suppressRemoveEntries: true,
    values: (params) => {
      setTimeout(() => {
        params.success([
          'id',
          'irure',
          'cillum',
          'nostrud',
          'pariatur',
          'laborum'
        ]);
      }, 500);
    }
  }
}
];
context = { componentParent: this };
frameworkComponents = {
  listRenderer: ListRendererComponent,
  checkboxRenderer: CheckboxRendererComponent,
  multiselectEditor: MultiselectEditorComponent,
  dateEditor: DateEditorComponent,
  richTextEditor: RichTextEditorComponent,
  agDateInput: DateFilterComponent
};

【问题讨论】：

请分享代码sn-p方便调试
我建议您在问题中包含一些您尝试过的代码。它将增加获得答案的变化，并减少您的问题被标记和删除的机会。

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

【解决方案1】：

如果您将newRowsAction: 'keep' 添加到您的filterParams 对象中，您应该会发现当复选框被取消选中/选中时，过滤器的状态会被保留。文档在这方面不清楚（https://www.ag-grid.com/javascript-grid-filter-provided/#providedFilterParams），因为他们说该属性仅用于客户端行模型，但更改过滤器会导致行数据以服务器端模式重新加载，并且此属性“保留”发生这种情况时的过滤器。

因此，您在 columnDefs 中的 tags 字段将被修改为：

{
  field: 'tags',
  headerName: 'Tags',
  filter: 'agSetColumnFilter',
  filterParams: {
    newRowsAction: 'keep',
    suppressRemoveEntries: true,
    values: (params) => {
      setTimeout(() => {
        params.success([
          'id',
          'irure',
          'cillum',
          'nostrud',
          'pariatur',
          'laborum'
        ]);
      }, 500);
    }
  }
}

【讨论】：