对象的角度ui网格分组

时间:2015-07-09 07:56:46

标签: angularjs angular-ui-grid

我在我的应用程序中使用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行中显示如下

enter image description here

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

1 个答案:

答案 0 :(得分:3)

这有点棘手,因为分组的行没有任何与之关联的实际实体。我想你可以使用小组儿童的第一行来获取小组标题。

$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