angularjs - 显示重复行的角度 ui-grid 分组
问题描述
我是 Angular 的新手,并尝试使用 Angular ui.grid.grouping 对行进行分组。但是我看到重复的行并且没有正确分组。我正在使用Angular js 1.7.2 版本
应用程序.js
var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid', 'ui.grid.grouping' ]);
app.controller('MainCtrl', ['$scope', '$http', '$interval', 'uiGridGroupingConstants', function ($scope, $http, $interval, uiGridGroupingConstants ) {
$scope.gridOptions = {
enableSorting: true,
enableGrouping:true,
treeRowHeaderAlwaysVisible: false,
columnDefs: [
{ name: 'City', width:'50%', grouping: { groupPriority: 0 },defaultSort: {priority: 0}},
{ name: 'CustomerName', width:'30%' }
],
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
}
};
$scope.gridOptions.data = [
{ "City": "TEXAS", "CustomerName": "AAA"},
{ "City": "TEXAS", "CustomerName": "BBB"},
{ "City": "TEXAS", "CustomerName": "CCC" },
{ "City": "MICHIGAN", "CustomerName": "DDD" },
{ "City": "NEW YORK","CustomerName": "EEE" },
{ "City": "MICHIGAN" ,"CustomerName": "FFF"},
{ "City": "MICHIGAN", "CustomerName": "GGG" },
{ "City": "MICHIGAN", "CustomerName": "HHH" },
{ "City": "NEW YORK","CustomerName": "III" }
];
}])
HTML:
<div ng-controller="MainCtrl">
<div id="grid1" ui-grid="gridOptions" ui-grid-grouping class="grid"></div>
</div>
实际结果:
预期结果:
- 而不是 2 密歇根州 1 密歇根州
- 而不是 2 纽约 1 纽约
使用ng-grid尝试了同样的事情,我得到了如下完美的结果:完全相同的事情我正在尝试使用 angular ui-grid 来实现它
解决方案
@Steve,感谢您的建议。根据您的建议,我在注册 Api 时添加了延迟分组,如下所示:
onRegisterApi: function( gridApi ) {
$scope.gridApi = gridApi;
$timeout(function(){
$scope.gridApi.grouping.clearGrouping();
$scope.gridApi.grouping.groupColumn('City');
}, 300);
}
它修复了它。
推荐阅读
- sql - T-SQL - 将更多日期值添加到表中的所有行
- docker - 如何在 Docker 和主机上处理同一非 root 用户的权限?
- swift - Tableview 只允许有限的复选框按钮
- python - 我无法从 python 连接 pwnedpasswords API
- python - 从列表中的网站抓取图像
- angular - Angular 8:使用 addControl 方法时传递禁用属性不起作用
- javascript - TypeError:无法读取 nodeJS 中未定义的属性“findIndex”
- javafx - JavaFX的WebEngine中选择元素显示错误
- javascript - 我在 node.js 中使用 Promise 的错误在哪里
- javascript - 自 2 月 20 日起适用于第 3 方 cookie 的 Samesite 和 Secure