Ag-grid:计算每个过滤器选择的行数 [英] Ag-grid: Count the number of rows for each filter choice

查看:330
本文介绍了Ag-grid:计算每个过滤器选择的行数的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在我的农业电网中,我想在设置的过滤器中的每个过滤器选项旁边显示行数,并可能按该计数(降序)排序
默认情况下是这样:

In my ag-grid I want to display counts of rows next to each filter choice in a set filter, and maybe sort choices by that count (descending). This is what it looks like by default:

我希望选项显示为


  • 全选(88)

  • Katie Taylor (2)

  • Darren Sutherland (1)

  • John Joe Nevin (1)

  • 巴拉克·奥巴马(Barack Obama)(0)

  • ...

  • Select All (88)
  • Katie Taylor (2)
  • Darren Sutherland (1)
  • John Joe Nevin (1)
  • Barack Obama (0)
  • ...

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

What is the most efficient way to get those counts (and maybe sort the choices accordingly) from the row data, taking into account filters already set in the other fields (if any)?

推荐答案

假设您的列字段是名称,您可以尝试构建地图并在过滤器cellRenderer中引用它:

Assuming your columns field is "name", you could try building up a map and refer to this in the filters 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如下所示:

And your column def would look like this:

{
    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 在数据更改时(使用新/更新的数据,或更新过滤器等)进行更新,但这应该适合您的用例

You would need to ensure that you called updateCountryCounts to update it when data changed (either with new/updated data, or when a filter was updated etc), but this should work for your usecase I think

这篇关于Ag-grid:计算每个过滤器选择的行数的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆