Javascript ag grid是否有过滤多个复选框值的api?

Javascript ag grid是否有过滤多个复选框值的api?,javascript,angularjs,checkbox,filtering,ag-grid,Javascript,Angularjs,Checkbox,Filtering,Ag Grid,我正在使用angularjs,并且有一个复选框列表,我需要能够过滤我的ag网格 使用单选按钮并使用单个值调用api.setQuickFilter,这可以很好地工作。但是,我没有看到允许多个“过滤器”(即存储在数组中的复选框值)与setQuickFilter一起工作的方法。我是否应该使用其他方法来完成此任务 示例: [复选框]苹果 [复选框]蜜蜂 [复选框]Cheerios 复选框Apple和Cheerios同时返回一个经过过滤的网格,以仅显示包含单词“Apple”或“Cheerios”的行 根据

我正在使用angularjs,并且有一个复选框列表,我需要能够过滤我的ag网格

使用单选按钮并使用单个值调用api.setQuickFilter,这可以很好地工作。但是,我没有看到允许多个“过滤器”(即存储在数组中的复选框值)与setQuickFilter一起工作的方法。我是否应该使用其他方法来完成此任务

示例:
[复选框]苹果
[复选框]蜜蜂
[复选框]Cheerios


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

根据ag grid的支持,这是不可能开箱即用的-这与ag grid的文档页面上的一些示例(尽管不起作用)相矛盾(请参阅)。他们确实建议编写一个自定义函数来实现这一点。然而,我能够通过另一种方法让它工作

解决方案:我能够通过在控制器中编写一个函数(搜索网格数组并比较元素)来重新创建网格数据,从而过滤掉选择。然后使用新的筛选数组调用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>

{{filterItemName}}
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);
}
//在别处定义(即$onLoad):
此.$scope.filterItem=gridFilterArray//(复选框项目)
这是。$scope.selection=[];
图表数据(值){
//****这部分来自https://stackoverflow.com/questions/14514461/how-do-i-bind-to-list-of-checkbox-values-with-angularjs?rq=1 *****
设idx=this.$scope.selection.indexOf(value);
//当前已选定
如果(idx>-1){
这个.$scope.selection.splice(idx,1);
}
//是新选中的
否则{
这是.$scope.selection.push(值);
}
//******结束
设filteredArray=[];
//根据筛选的复选框创建要显示的新数据数组
for(设x=0;x
根据ag grid的支持,这是不可能开箱即用的-这与ag grid文档页面上的一些示例(尽管不起作用)相矛盾(请参阅)。他们确实建议编写一个自定义函数来实现这一点。然而,我能够通过另一种方法让它工作

解决方案:我能够通过在控制器中编写一个函数(搜索网格数组并比较元素)来重新创建网格数据,从而过滤掉选择。然后使用新的筛选数组调用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>

{{filterItemName}}
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);
}
//在别处定义(即$onLoad):
此.$scope.filterItem=gridFilterArray//(复选框项目)
这是。$scope.selection=[];
图表数据(值){
//****这部分来自https://stackoverflow.com/questions/14514461/how-do-i-bind-to-list-of-checkbox-values-with-angularjs?rq=1 *****
设idx=this.$scope.selection.indexOf(value);
//当前已选定
如果(idx>-1){
这个.$scope.selection.splice(idx,1);
}
//是新选中的
否则{
这是.$scope.selection.push(值);
}
//******结束
设filteredArray=[];
//根据筛选的复选框创建要显示的新数据数组
for(设x=0;x
好主意。真遗憾,我刚刚在完成定制过滤器后看到了它……真是个聪明的主意。这是一个遗憾,我刚刚看到它后,完成我的自定义过滤器。。。