在网格的每个过滤器旁边显示行数 [英] Display rowcount beside each filter at grid

问题描述

我正在使用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})`;
}

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

https://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 <进行热更改处理/ p>

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)

这篇关于在网格的每个过滤器旁边显示行数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！