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 和 lastname 是相同的。我想在 ui-grid 中演示这些数据，如下图所示。我希望我的数据的公共部分出现在主列中。

Answer 1

不可能对具有相同分组优先级的两列进行分组

groupPriorities 通常应该是连续的，如果不是，那么下次调用 getGrouping 时，我们会将它们重新编号为连续的。 默认为未定义。

所以我的解决方案就像作弊一样。首先，我对第二列（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;
    }
});