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时我们会将它们重新编号为顺序。默认为undefined。

所以我的解决方案就像骗子一样。首先，我将聚合函数（max）用于第二列（customerLastname）。然后我使用自定义指令来操纵数据。 您可以在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中具有相同分组优先级的两列

1 个答案: