在网格的每个过滤器旁边显示行数

本文介绍了在网格的每个过滤器旁边显示行数的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在使用AG网格企业来显示我的数据。我为每列都有过滤器。我想显示过滤器下拉列表中每个过滤器元素的数量。请帮忙。就像过滤器显示国家/地区列中只有我们和加拿大一样，我想在这些过滤器元素旁边的括号内显示我们和加拿大的频率

I am using AG grid enterprise to display my data. I have filters for each columns. I want to show the count of each filter element inside the filter drop-down itself. Please help. It's like if the filter shows that we have only us and Canada in the country column, I want to display the frequencies of us and canada inside parenthesis beside these filter elements

推荐答案

更新：添加了工作样本

Update: added working sample

filterParams: { cellRenderer: "countryFilterRenderer"} countryFilterRenderer(params) { let count = this.rowData.filter(i=>i.country.name==params.value).length; return `${params.value}(${count})`; } rowData:[{country:{name:..., code:...}];

rowData 定义只是为了清楚起见。

rowData definition just for clarity.

有关更多信息，请检查文档和示例，以及演示和来源。

For more info check doc with samples, and official demo with sources.

更新：添加了热门数据样本

Update: added hot data sample

一旦我们需要数据-与排序或过滤相关，我们可以使用API​​方法： forEachNodeAfterFilter ， forEachNodeAfterFilterAndSort ， getDisplayedRowCount 。

Once we need to have data - related from sorting or filtering we can use API methods: forEachNodeAfterFilter, forEachNodeAfterFilterAndSort, getDisplayedRowCount.

sportFilterRenderer(params){ let count; if(this.gridApi.getDisplayedRowCount() != this.rowData.length){ count = 0; this.gridApi.forEachNodeAfterFilter(node=>{ if(node.data.sport == params.value) count++; }) } else{ count = this.rowData.filter(i=>i.sport==params.value).length; } return `${params.value}(${count})`; }

plnkr.co/edit/bCI0SJ （检查国家/地区和运动过滤器）

plnkr.co/edit/bCI0SJ (check country and sport filters)

样本<$ c每次您选择\取消选择国家/地区的任何内容后，运动过滤器中的$ c> plnkr 计数将重新计算/ code>过滤器

On sample plnkr count in sport filter would be recalculated every time once you will select\deselect anything from country filter

更新：通过 cellRenderer

Update: hot changes handling via cellRenderer

所以 ag-grid 团队注意到了这个问题，他们在 backlock -在此之前-无法像我们尝试的那样处理您的要求。 在这里，您可以找到问题（AG-2078）

So ag-grid team noticed about this issues and they have it on backlock - before this - there is no way to handle your requirement in the same way as we tried. Here you can find an issue (AG-2078)