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

Question

我在我的 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
};

Answer 1

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

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

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

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

using agSetColumnFilter with serverSide row model

javascript

ag-grid

ag-grid-angular