Ag-grid：计算每个过滤器选择的行数答案

【问题标题】：Ag-grid: Count the number of rows for each filter choiceAg-grid：计算每个过滤器选择的行数
【发布时间】：2016-12-09 04:01:03
【问题描述】：

在我的 ag-grid 中，我想在一组过滤器中的每个过滤器选项旁边显示行数，并且可能按该计数（降序）排序选择。默认情况下是这样的：

我希望选择显示为

全选(88)
凯蒂·泰勒(2)
达伦·萨瑟兰 (1)
约翰·乔·内文 (1)
巴拉克·奥巴马 (0)
...

考虑到已在其他字段中设置的过滤器（如果有），从行数据中获取这些计数（并可能对选择进行相应排序）的最有效方法是什么？

【问题讨论】：

检查这个解决方案stackoverflow.com/a/52237943/4483102

标签： ag-grid

【解决方案1】：

假设您的列字段是“名称”，您可以尝试构建一个地图并在过滤器 cellRenderer 中引用它：

var nameValueToCount = {};
function updateNameValueCounts() {
    nameValueToCount = {};
    gridOptions.api.forEachNodeAfterFilter((node) => {
        if(!nameValueToCount.hasOwnProperty(node.data.name)) {
            nameValueToCount[node.data.name] = 1;
        } else {
            nameValueToCount[node.data.name] = nameValueToCount[node.data.name] + 1;
        }
    });
}

您的列 def 如下所示：

{
    headerName: "Name", 
    field: "name", 
    width: 120,
    filter: 'set',
    filterParams: {
        cellRenderer: NameFilterCellRenderer
    }
},

最后，NameFilterCellRenderer 看起来像这样：

function NameFilterCellRenderer() {
}

NameFilterCellRenderer.prototype.init = function (params) {

    this.value = params.value;
    this.eGui = document.createElement('span');
    this.eGui.appendChild(document.createTextNode(this.value + " (" + nameValueToCount[params.value] + ")"));

};

NameFilterCellRenderer.prototype.getGui = function () {
    return this.eGui;
};

您需要确保在数据更改时调用updateCountryCounts 来更新它（无论是使用新的/更新的数据，还是更新过滤器等），但我认为这应该适用于您的用例

【讨论】：