时间戳

首页 > 解决方案 > 在 ag-grid 的列上使用具有多个条件的过滤器

angular - 在 ag-grid 的列上使用具有多个条件的过滤器

问题描述

我有一个 ag-grid 表，其中包含三列 - 请求 ID、请求状态和提交日期。我在请求 ID 列上使用基于文本的过滤器，在提交日期上使用日期范围过滤器。在请求状态中，我有 4 个请求状态 - 草稿、已提交、已发送、发送失败。在 HTML 中，我使用了一个下拉菜单，其中包含每个状态的复选框 我尝试创建一个过滤器，允许我为请求状态过滤器选择多个条件 - 例如，我想查看具有请求状态的数据作为草稿或提交。这是我的过滤器代码：

change(event, text: string) {

  var index = this.ReqStatusFilter.indexOf(text);
  if(index == -1) {
    this.ReqStatusFilter.push(text);

  } else {
    this.ReqStatusFilter.splice(index, 1);
  }

  var finalArray = [];

  var k = 0;

  for(var i = 0; i < this.rowData.length; i++) {
    for(var j = 0; j < this.ReqStatusFilter.length; j++) {
      if(this.rowData[i].requeststatus == this.ReqStatusFilter[j]) {
        finalArray[k++] = this.rowData[i];
      }
    }
  }

 if(k != 0) {
  this.gridApi.setRowData(finalArray);
 } else {
   this.gridApi.setRowData(this.rowData)
 }

 this.gridApi.onFilterChanged();
}

我正在使用 ReqStatusFilter 数组来跟踪当前选择了哪些状态。每次单击复选框时都会调用 change() ，文本是单击的复选框的值。rowData 数组包含我的网格的数据。

我面临的问题是提交日期的日期过滤器和此请求 ID 过滤器彼此独立工作。如果我选择一个日期范围，其中只有提交和发送请求状态的消息可用，然后我单击请求状态过滤器中草稿的复选框，也会出现状态草稿的消息。该过滤器与基于请求 ID 的基于文本的过滤器一起工作正常。假设我搜索状态为草稿的请求 ID，然后为请求状态选择已提交和已发送选项，则不会出现任何内容。基本上，过滤器应该充当彼此之间的 AND，但其内部的请求状态过滤器应该充当所有选定条件的 OR。我该如何解决这个问题，以便日期和请求状态过滤器可以一起工作？也发布日期过滤器的代码：

submissionDateFilter() {
var dateFilterComponent = this.gridApi.getFilterInstance("submissiondate");
dateFilterComponent.setModel({
  type:"inRange",
  dateFrom: this.fromDate.year + '-' + this.fromDate.month + '-' + this.fromDate.day,
  dateTo: this.toDate.year + '-' + this.toDate.month + '-' + this.toDate.day
})
this.gridApi.onFilterChanged();

}

我已经尽力解释了，所以我希望它不会太难。如果您对这个问题有任何疑问，请告诉我。

标签： angularag-gridag-grid-angular

解决方案

推荐阅读