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 中演示此数据，如下图所示。我希望我的数据的公共部分出现在主要列中。

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;
    }
});

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

two column with same grouping priority in ui-grid

grouping

angularjs

angular-ui-grid