Question

我遇到了角度UI网格分组功能的问题，并且花了大部分时间在SO和在线上搜索答案，但找不到答案。我所看到的与我使用的网格3.1.1有关但我已经更新到网格4.0.4。我能找到的所有答案都坚持认为它与externalSorting有关，而且我从来没有把它转过来。我想知道是否有一些超级愚蠢的东西让我失踪。

以下是我的网格：

    (function() {
    angular.module("app").controller("reportController", ["$http", "$scope", "stats", "uiGridConstants", "uiGridGroupingConstants", "$rootScope", "$timeout",
        function ($http, $scope, stats, uiGridConstants, uiGridGroupingConstants, $rootScope, $timeout) {
            $scope.reportData = [];
            $scope.parameters = "";
            $scope.reportGrid = {
                data: "reportData",
                columnDefs: [{field: " "}],
                enableColumnResizing: true,
                enableGridMenu: true,
                enableSorting: true,
                enableSelectAll: true,
                infiniteScrollRowsFromEnd: 40,
                infiniteScrollUp: true,
                infiniteScrollDown: true,
                enableFiltering: true,
                fastWatch: true,
                flatEntityAccess: true,
                showGridFooter: true,
                exporterCsvFilename: "data.csv",
                exporterPdfDefaultStyle: { fontSize: 8 },
                exporterPdfTableStyle: { margin: [5, 5, 5, 5] },
                exporterPdfTableHeaderStyle: { fontSize: 8, bold: true, italics: true, color: "red"},
                exporterPdfHeader: { text: "Data", style: "headerStyle"},
                exporterPdfFooter: function(currentPage, pageCount) {
                    return { text: currentPage.toString() + " of " + pageCount.toString(), style: "footerStyle" };
                },
                exporterPdfCustomFormatter: function(docDefinition) {
                    docDefinition.styles.headerStyle = { fontSize: 22, bold: true };
                    docDefinition.styles.footerStyle = { fontSize: 10, bold: true };
                    docDefinition.content = $scope.parameters.concat(docDefinition.content);
                    return docDefinition;
                },
                exporterPdfOrientation: "landscape",
                exporterPdfPageSize: "LETTER",
                exporterPdfMaxGridWidth: 500,
                exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location")),
                enableGroupHeaderSelection: true,
                enableGrouping: true,
                treeCustomAggregations: {
                    uniqueCount: { label: "Unique Count: ", menuTitle:"Agg: Unique", aggregationFn: stats.aggregator.uniqueCount, finalizerFn: stats.finalizer.uniqueCount }
                },
                onRegisterApi: function(gridApi) {
                    $scope.gridApi = gridApi;
                    $scope.gridApi.selection.on.rowSelectionChanged($scope, function (rowChanged) {
                        console.log($scope.reportGrid.columnDefs);
                        if (typeof rowChanged.treeLevel !== "undefined" && rowChanged.treeLevel > -1) {
                            // this is a group header
                            children = $scope.gridApi.treeBase.getRowChildren(rowChanged);
                            children.forEach(function(child) {
                                if (rowChanged.isSelected) {
                                    $scope.gridApi.selection.selectRow(child.entity);
                                } else {
                                    $scope.gridApi.selection.unSelectRow(child.entity);
                                }
                            });
                        }
                    });
                }
            };

            $scope.setGridState = function () {
                if ($scope.state) {
                    $scope.gridApi.saveState.restore($scope, $scope.state);
                }
            };

            $rootScope.$on("resetGridData", function() {
                $scope.reportData = [];
                $scope.gridApi.grouping.clearGrouping();
                $scope.gridApi.grid.clearAllFilters();
                $scope.state = {};
            });

            $rootScope.$on("getGridState", function () {
                $scope.state = $scope.gridApi.saveState.save();
                $rootScope.$emit("sendGridState", $scope.state);
            });

            $rootScope.$on("restoreGridState", function (event, state) {
                $scope.state = JSON.parse(state);
            });

            $rootScope.$on("populateReportGrid", function (event, args) {
                $scope.reportData = args.reportData.data;
                console.log($scope.reportData);
                for (var i = 0; i < $scope.reportData.length; i++) {
                    console.log($scope.reportData[i].$$hashKey);
                }
                $timeout(function () { $scope.setGridState(); }, 0);
                $scope.reportGrid.columnDefs = args.reportData.coldefs;
                $scope.reportGrid.exporterCsvFilename = args.headerInformation.ReportName + ".csv";
                $scope.reportGrid.exporterPdfFilename = args.headerInformation.ReportName + ".pdf";
                $scope.reportGrid.exporterPdfHeader.text = args.headerInformation.ReportName;
                $scope.parameters = [args.headerInformation.FromDate + " to " + args.headerInformation.ToDate + "\n" + 
                    "Teams: " + args.headerInformation.Teams + "\n" +
                    "Customers: " + args.headerInformation.Customers + "\n" +
                    "Systems: " + args.headerInformation.Systems + "\n" +
                    "Accounts" + args.headerInformation.BillingIds + "\n" +    
                    "Statuses: " + args.headerInformation.Statuses + "\n" +
                    "Project Numbers: " + args.headerInformation.Projects];
            });
        }])
        .service("stats", function () {

            var initAggregation = function (aggregation) {
                /* To be used in conjunction with the cleanup finalizer */
                if (angular.isUndefined(aggregation.stats)) {
                    aggregation.stats = { sum: 0 };
                }
            };
              var coreAccumulate = function(aggregation, value){
                initAggregation(aggregation);
                if ( angular.isUndefined(aggregation.stats.accumulator) ){
                  aggregation.stats.accumulator = [];
                }
                if ( !isNaN(value) ){
                  aggregation.stats.accumulator.push(value);
                }
              };

              var increment = function(obj, prop){
                /* if the property on obj is undefined, sets to 1, otherwise increments by one */
                if ( angular.isUndefined(obj[prop])){
                  obj[prop] = 1;
                }
                else {
                  obj[prop]++;
                }
              };

              var service = {
                aggregator: {
                  accumulate: {
                    /* This is to be used with the uiGrid customTreeAggregationFn definition,
                     * to accumulate all of the data into an array for sorting or other operations by customTreeAggregationFinalizerFn
                     * In general this strategy is not the most efficient way to generate grouped statistics, but
                     * sometime is the only way.
                     */
                    numValue: function (aggregation, fieldValue, numValue) {
                      return coreAccumulate(aggregation, numValue);
                    },
                    fieldValue: function (aggregation, fieldValue) {
                      return coreAccumulate(aggregation, fieldValue);
                    }
                  },
                  uniqueCount: function(aggregation, fieldValue, numValue){
                    initAggregation(aggregation);
                    var thisValue = fieldValue;
                      if (aggregation.stats.accumulator === undefined || aggregation.stats.accumulator.indexOf(thisValue) === -1) {
                          service.aggregator.accumulate.numValue(aggregation, fieldValue, numValue);
                      }
                      aggregation.value = aggregation.stats.accumulator.length;                    
                  }
                },
                finalizer: {
                  cleanup: function (aggregation) {
                    delete aggregation.stats;
                    if ( angular.isUndefined(aggregation.rendered) ){
                      aggregation.rendered = aggregation.value;
                    }
                  }
                }
              };

              return service;
            });
})();

预期结果：

实际结果：

Answer 1

我有一个解决方法。有人向我指出，有两个可扩展的列可以让我看到更接近的HTML。

我们有包含该网格的组和树视图版本的指令，虽然这已经以某种方式工作了一段时间，我在控制器中添加的一些最近的更改似乎打破了它。这是我的新HTML的片段：

 <div id="reportBody" ng-controller="reportController">
    <div id="reportGrid" ui-grid="reportGrid" ui-grid-grouping  ui-grid-exporter ui-grid-infinite-scroll ui-grid-move-columns
            ui-grid-selection ui-grid-resize-columns ui-grid-save-state class="reportgrid"> <!--ui-grid-tree-view took this out because it was doing duplicates for unknown reason--> 
        <div id="loadingOverlay">
            <i id="loadingOverlayIcon"></i>
        </div>
    </div>
</div>

AngularJS ui-grid分组没有一直分组

1 个答案: