简体   繁体   English

Ag-grid是否具有用于过滤多个复选框值的API?

[英]Does ag-grid have an api to filter multiple checkbox values?

I'm using angularjs and have a list of checkboxes that I need to able to filter my ag-grid on. 我正在使用angularjs,并具有一个复选框列表,我需要此复选框才能筛选我的ag-grid。

This works fine using radio buttons and calling api.setQuickFilter with the individual value. 使用单选按钮并使用单个值调用api.setQuickFilter可以正常工作。 However, I'm not seeing a way to allow for multiple 'filters' (ie checkbox values stored in an array) to function with setQuickFilter. 但是,我没有看到允许多个“过滤器”(即存储在数组中的复选框值)与setQuickFilter一起起作用的方法。 Is there another method I should be using to accomplish this? 我是否应该使用另一种方法来完成此任务?

Example: 例:
[checkbox] Apple [复选框]苹果
[checkbox] Bee [复选框]蜜蜂
[checkbox] Cheerios [复选框] Cheerios

Checking box Apple and Cheerios at the same time should return a grid filtered to only show rows that contain the word "Apple" OR "Cheerios". 同时选中Apple和Cheerios复选框应返回经过过滤的网格,以仅显示包含单词“ Apple”或“ Cheerios”的行。

Per ag-grid support, this is not possible out of the box - which contradicts some of the examples (albeit, non-working) found on ag-grid's documentation page (see https://www.ag-grid.com/javascript-grid-filtering/# .) They did suggest writing a custom function to accomplish this. 对于ag-grid支持,这不可能是开箱即用的-与ag-grid的文档页面上的某些示例(尽管不起作用)相矛盾(请参阅https://www.ag-grid.com/javascript -grid-filtering /# 。)他们确实建议编写一个自定义函数来完成此操作。 However, I was able to get it to work through another method. 但是,我能够通过另一种方法使它工作。

Solution: I was able to filter out the selections by writing a function within the controller (that searches through the grid array and compares elements) to recreate the grid data. 解决方案:通过在控制器内编写一个函数(可以搜索网格数组并比较元素)来重新创建网格数据,我能够过滤出选择。 Then calls setRowData with the new filtered array. 然后使用新的过滤数组调用setRowData。 I made the checkboxes call this function to add/remove the displayed rows. 我使复选框调用此函数来添加/删除显示的行。

Here's what the code looks like: 代码如下所示:

HTML 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 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);
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM