ag-grid 分组不添加展开/折叠控件答案

【问题标题】：ag-grid grouping not adding expand/collapse controlsag-grid 分组不添加展开/折叠控件
【发布时间】：2018-02-03 19:36:54
【问题描述】：

我正在尝试显示一些使用 ag-grid 分组的数据。数据显示正确，但未按应有的方式对数据进行分组。我正在使用 angularJS 1.5.8 和 ag-grid 12.0.2。这是我正在尝试做的一个非常简化的版本：

function _setGridOptions() {
    var data = [
        {packageID: "one", documentID: "one-one", cost: 1},
        {packageID: "one", documentID: "one-two", cost: 2},
        {packageID: "one", documentID: "one-three", cost: 3},
        {packageID: "two", documentID: "two-one", cost: 4},
        {packageID: "two", documentID: "two-two", cost: 5},
        {packageID: "two", documentID: "two-three", cost: 6}
    ];
    var cols = [
        {
            headerName: "Package ID",
            width: 100,
            field: "packageID",
            rowGroup: true
        },
        {
            headerName: "Document ID",
            width: 100,
            field: "documentID"
        },
        {
            headerName: "Cost",
            width: 100,
            field: "cost"
        }
    ];
    $ctrl.agGridOptions = {
        columnDefs: cols,
        animateRows: true,
        enableRangeSelection: true,
        rowData: data,
        enableSorting: true,
        debug: true,
        enableColResize: true,
        onGridReady: function () {
            $ctrl.agGridOptions.api.sizeColumnsToFit();
        }
    };
    $ctrl.transactionsLoaded = true;
}

这是表格的样子：

如您所见，没有“组”列，并且组行没有展开/折叠控件。

任何想法我做错了什么？

【问题讨论】：

能否请您也分享 HTML，如果可能的话，提供一个 JSFiddle 来解决这个问题。
我认为你需要添加 groupUseEntireRow = true;groupRowRenderer: function(params) {return params.node.key;在 $ctrl.agGridOptions.
有关更多详细信息，您可以访问ag-grid.com/javascript-grid-grouping-headers/#，如果不是创建片段/小提琴而不是完整的
这是一个说明问题但没有角度的 plunker，所以它看起来有点不同。 embed.plnkr.co/1X2EJC

标签： angularjs ag-grid

【解决方案1】：

我刚刚意识到问题所在。 “Grouping Rows”功能是企业功能，我使用的是免费版。

【讨论】：

【解决方案2】：

其实它不是企业版功能，而是免费版功能，每个人都可以使用。甚至树数据功能也可以与免费版本一起使用，但在 Ag-grid 的企业版下只有一些额外的功能。也许在问题的日期，行分组可用于企业版，我不知道。现在，全部免费。

虽然这个问题对我们的领域来说非常具有历史意义，但我将分享一个答案，因为那些需要在任何版本中使用行分组 Ag-grid 的人。

实际上，您的数据和 gridOptions 定义足以启用行分组，但是您使用的 Ag-grid 版本非常旧。如果有人拿了你的数据并使用更新版本的 Ag-grid，他/她可以看到你的数据提供了行分组的要求。

简而言之，要应用行分组，在我们要应用的列的定义中声明rowGroup: true 就足够了。

gridOptions.columnDefs = [
    { field: "country", rowGroup: true },
    { field: "sport", rowGroup: true },
];

数据是：

rowData= [
  { 'country': 'United States', 'sport': 'Biking' },
  { 'country': 'United States', 'sport': 'Swimming', },
  { 'country': 'United States', 'sport': 'Swimming' }
  { 'country': 'Turkey',        'sport': 'Swimming', },
  { 'country': 'Turkey',        'sport': 'Swimming' }
  { 'country': 'Brasil',        'sport': 'Football' }
]

更多详情，见页面：ag-grid.com/javascript-grid-grouping

【讨论】：