1
我有一个角度用户界面网格分组功能的问题，并花了一天的搜索SO和在线的答案的一部分，并找不到答案。我所看到的与我使用的grid 3.1.1有关，但我已经更新到grid 4.0.4。我能找到的所有答案都坚持认为它与externalSorting有关，并且我永远不会打开它。我想知道是否有超级愚蠢简单的东西，我错过了。AngularJS ui网格分组并非一路分组
以下是我的网格：
(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;
});
})();
预期结果：
实际结果：
