来自对象的角度 ui-grid 分组答案

【问题标题】：angular ui-grid grouping from object来自对象的角度 ui-grid 分组
【发布时间】：2015-07-09 07:56:46
【问题描述】：

我在我的应用程序中使用ui-grid v3.0.0-rc.22。

我在我的网格中使用分组。我有如下数据

[{
            "_id": "559dfaa671c2bd2c0a00002f",
            "title": "dfds",
            "sku": "fdsf",
            "price": "34535",
            "desc": "dsfsdf",
            "main_image": "NOPQR09345.png",
            "added_by": "558a526b977459300a00002b",
            "user": {
                "_id": "558a526b977459300a00002b",
                "name": "Merchant",
            }
        }, {
            "_id": "559e0a0f71c2bd2c0a000031",
            "title": "dfdxf",
            "sku": "esdf",
            "price": "345",
            "desc": "xcfgvxdvf",
            "main_image": "NOPQR09345.png",
            "added_by": "558a526b977459300a00002b",
            "user": {
                "_id": "558a526b977459300a00002b",
                "name": "Merchant",
            }
        }, {
            "_id": "559e11084a3df01808000029",
            "title": "Product 1",
            "sku": "KJH",
            "price": "12508",
            "desc": "This istest",
            "main_image": "NOPQR09345.png",
            "added_by": "558a6ade977459300a00002c",
            "user": {
                "_id": "558a6ade977459300a00002c",
                "name": "Merchant",
            }
        }]

我在 user._id 上使用分组，我想在分组标题中显示名称。为此，我使用columnDefs 作为关注。

    [
       {name: 'Merchant Name', field: 'user._id', grouping: {groupPriority: 0},
                    cellTemplate: '<span style="padding:15px;">{{row.entity.user.name}}</span>'},
       {name: 'Name', field: 'title', enableCellEdit: true},
       {name: 'SKU', field: 'sku'},
       {name: 'Category', field: 'pro_category.name'},
       {name: 'Price', field: 'price', treeAggregationType: uiGridGroupingConstants.aggregation.SUM}
]

问题是它在分组列中显示用户名，但未在 groupHeader 行中显示如下

我该怎么做。非常感谢任何帮助。

【问题讨论】：

标签： angularjs angular-ui-grid

【解决方案1】：

这有点棘手，因为分组的行没有任何与之关联的实际实体。我认为您可能可以使用组子项中的第一行来获取组标题。

$scope.gridOptions = {
    enableFiltering: true,
    treeRowHeaderAlwaysVisible: false,
    columnDefs:[
       {name: 'Merchant Name', field: 'user._id', grouping: {groupPriority: 0},
                    cellTemplate:  '<span style="padding:15px;">{{grid.appScope.name(grid, row)}}</span>'},
       {name: 'Name', field: 'title', enableCellEdit: true},
       {name: 'SKU', field: 'sku'},
       {name: 'Category', field: 'pro_category.name'},
       {name: 'Price', field: 'price', treeAggregationType: uiGridGroupingConstants.aggregation.SUM}
],
    onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
    }
  };

  $scope.name = function(grid,row,col)
  {
    if(row.groupHeader)
    {
      var entity = row.treeNode.children[0].row.entity;
      return entity.user.name;
    }
    else
    {
      return row.entity.user.name;
    }
    return "SAmple";
  }

这是一个 plnkr http://plnkr.co/edit/N6I78SWkLK8wzZjHm8ds?p=preview

【讨论】：