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对象中，则应该会发现，取消选中/选中复选框后，过滤器的状态将保留。文档在这方面尚不明确（https://www.ag-grid.com/javascript-grid-filter-provided/#providedFilterParams），因为他们说该属性仅用于客户端行模型，但是更改过滤器会导致在服务器端模式下重新加载行数据，而该属性为“在发生这种情况时保留过滤器。

因此，您将修改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

1 个答案: