Угловая группировка UI-сетки, показывающая повторяющиеся строки - PullRequest
Новая
       15

Угловая группировка UI-сетки, показывающая повторяющиеся строки

0 голосов
/ 13 июня 2019

Я новичок в Angular и пытаюсь сгруппировать строки, используя Angular ui.grid.grouping. Но я вижу повторяющиеся строки, и они не сгруппированы должным образом. Я использую Angular JS 1.7.2 версия

app.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>

Фактический результат:

enter image description here

Ожидаемый результат:

  • вместо 2 Мичиган один Мичиган
  • вместо 2 нью йорков один нью йорк

Пробовал то же самое, используя ng-grid , и я получаю идеальный результат, как показано ниже: Точно то же самое, я пытаюсь добиться этого, используя угловую ui-grid

enter image description here

1 Ответ

0 голосов
/ 13 июня 2019

@ Стив, спасибо за ваши предложения. Согласно вашему предложению я добавил группировку с задержкой при регистрации Api, как показано ниже: 

 onRegisterApi: function( gridApi ) {
      $scope.gridApi = gridApi;
      $timeout(function(){
        $scope.gridApi.grouping.clearGrouping();
        $scope.gridApi.grouping.groupColumn('City');
    }, 300);
    }

И это исправили.

...