Question

我正在使用angularjs并且有一个复选框列表，我需要能够过滤我的ag-grid。

使用单选按钮并使用单个值调用api.setQuickFilter可以正常工作。但是，我没有看到允许多个“过滤器”（即存储在数组中的复选框值）与setQuickFilter一起使用的方法。我应该用另一种方法来实现这个目标吗？

示例：
[复选框] Apple
[复选框] Bee
[复选框] Cheerios

复选框Apple和Cheerios应同时返回一个过滤的网格，仅显示包含单词“Apple”或“Cheerios”的行。

Answer 1

根据ag-grid支持，开箱即用是不可能的 - 这与ag-grid的文档页面上的一些示例（尽管是非工作的）相矛盾（请参阅https://www.ag-grid.com/javascript-grid-filtering/#。他们确实建议编写一个自定义函数来实现这一目标。但是，我能够通过另一种方法使其工作。

解决方案我能够通过在控制器中编写一个函数（搜索网格数组并比较元素）来过滤掉选择，以重新创建网格数据。然后使用新过滤的数组调用setRowData。我让复选框调用此函数来添加/删除显示的行。

这是代码的样子：

<强> HTML

<div class="checkboxFilter" ng-repeat="filterItemName in filterItem">
  <input type="checkbox" name="selectedCap[]" value="{{filterItemName}}" ng-checked="selection.indexOf(filterItemName) > -1" ng-click="$ctrl.chartData(filterItemName)" /> {{filterItemName}}
</div>

<强> JS

//defined elsewhere (i.e. $onLoad):
this.$scope.filterItem = gridFilterArray; //(checkbox items)
this.$scope.selection = [];


chartData(value){

//****this portion from https://stackoverflow.com/questions/14514461/how-do-i-bind-to-list-of-checkbox-values-with-angularjs?rq=1 *****
   let idx = this.$scope.selection.indexOf(value);

   // Is currently selected
   if (idx > -1) {
     this.$scope.selection.splice(idx, 1);
   }

   // Is newly selected
   else {
     this.$scope.selection.push(value);
   }
//******end

   let filteredArray = [];

   //create new array of data to display based on filtered checkboxes
   for(let x = 0; x < this.arrayData.length; x++) {
     for(let y = 0; y < this.$scope.selection.length; y++) {
       if (this.$scope.selection[y] === this.arrayData[x].fieldToCheck)
         filteredArray.push(this.arrayData[x]);
     }
   }

   if(this.$scope.selection.length === 0)
     this.$scope.gridOptions.api.setRowData(this.arrayData);
   else
     this.$scope.gridOptions.api.setRowData(filteredArray);
}

ag-grid是否有api来过滤多个复选框值？

1 个答案: