javascript - 在服务器端行模型中使用agSetColumnFilter

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

最佳答案

如果将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);
    }
  }
}

关于javascript - 在服务器端行模型中使用agSetColumnFilter，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/57275244/