angularjs - ui-grid 中具有相同分组优先级的两列

Question

也许我的问题标题不合适，请随时更新我的​​标题。

我的 json 数据就像

    [
        { "AutoId": 2, "CustomerId": "1000AIRLIESST", "customerLastName": "John", "locationId": "2", "Address": "1000   AIRLIES ST Winnipeg " },
        { "AutoId": 2, "CustomerId": "1000AIRLIESST", "customerLastName": "John", "locationId": "186471", "Address": "1000 Airlies ST Winnipeg " },
        { "AutoId": 2, "CustomerId": "1000AIRLIESST", "customerLastName": "John", "locationId": "186752", "Address": "111   pineview rd ST Winnipeg " }
    ];

如您所见，autoId、customerId 和姓氏是相同的。我想在 ui-grid 中演示这些数据，如下图所示。我希望我的数据的公共(public)部分出现在主列中。

Answer 1

不可能将具有相同分组优先级的两列分组

groupPriorities should generally be sequential, if they're not then the next time getGrouping is called we'll renumber them to be sequential. Defaults to undefined.

所以我的解决方案就像一个骗子。首先，我对第二列(customerLastname)使用聚合函数(max)。然后我使用自定义指令来操作数据。您可以在 plunker 中看到结果

ui-grid的列定义

  $scope.gridOptions = {
        enableFiltering: true,
        treeRowHeaderAlwaysVisible: false,
        columnDefs: [
                 {
                     name: 'customerLastName',
                     displayName: 'Customer LastName',
                     width: 200,
                     treeAggregationType: uiGridGroupingConstants.aggregation.MAX,
                     cellTemplate: '<div class="ui-grid-cell-contents" > <fakemax val="{{COL_FIELD}}" /></div>'

                 },
                 {
                     name: 'Address',
                     width: 200,
                 },

                {
                    name: 'CustomerId',
                    grouping: { groupPriority: 0 },
                    sort: { priority: 0, direction: 'desc' },
                    width: 200,
                    cellTemplate: '<div><div ng-if="!col.grouping || col.grouping.groupPriority === undefined || col.grouping.groupPriority === null ||' +
                        ' ( row.groupHeader && col.grouping.groupPriority === row.treeLevel )" class="ui-grid-cell-contents" title="TOOLTIP">{{COL_FIELD CUSTOM_FILTERS}}</div></div>'
                },
        ],
        data: 'Customers',
        onRegisterApi: function (gridApi) {
            $scope.gridApi = gridApi;
        }

    }; 

请注意我在 customerLastName 的 cellTemplate 中使用的 fakemax 指令。自定义指令是如此简单。

app.directive('fakemax', function () {
    return function(scope, iElement, iAttrs) {
        var value = iAttrs.val;
        value = value.replace("max:", "");
        iElement[0].innerHTML = value;
    }
});