Angular UI-Grid: группировка строк с одинаковым значением в другой строке - PullRequest
Новая
       20

Angular UI-Grid: группировка строк с одинаковым значением в другой строке

0 голосов
/ 02 июля 2018

Я хочу настроить свою угловую UI-сетку так, как показано ниже. Example of Table I need to make Данные структурированы так ... 

{
  name: "Kevin Johar",
  team: "Red",
  id: "2137",
  company: "BlueHerring",
  active: "true",
  date: "05-13-2018",
  team Lead: "John Deer",
  comments: ""
}

Я хочу, чтобы данные отображались так, чтобы все различные идентификаторы, назначенные Кевину, были организованы аналогично приведенной выше сетке. Таким образом, если бы Кевину было присвоено 5 идентификаторов, столбец с его именем был бы одним большим блоком, а остальные данные о каждом идентификаторе следовали бы как обычно, но оставались бы в пределах блока столбца имени, помеченного как Кевин.

Параметры сетки 

$scope.gridOptions = {
  flatEntityAccess: true,
  enableGridMenu: true,
  enableFiltering: true,
  exporterMenuCsv: false,
  exporterMenuPdf: false,
  paginationPageSizes: [50, 100, 200],
  paginationPageSize: 100,
  // treeRowHeaderAlwaysVisible: false,
  // enableHorizontalScrollbar: 2,
  enableSorting: true
};

Столбец Defs 

$scope.gridOptions.columnDefs = [
  {
    name: 'Name',
    field: 'Name',
    width: 140,
    //Allows user input in these columns
    enableCellEdit: false,
    enableGrouping: true
  },
  {
    name: 'Team',
    field: 'teamName',
    width: 140,
    enableCellEdit: false
  },
  {
    name: 'Id',
    field: 'id',
    width: 100,
    enableCellEdit: false
  },
  {
    name: 'Company',
    field: 'companyName',
    width: 130,
    enableCellEdit: false
  },
  {
    name: 'Active',
    field: 'activePassive',
    width: 140,
    enableCellEdit: false
  },
  {
    name: 'Date',
    field: 'date',
    width: 120,
    enableCellEdit: false
  },
  {
    name: 'Team Lead',
    field: 'teamLead',
    width: 150,
    enableCellEdit: false
  },
  {
    name: 'Comments',
    field: 'comments',
    width: 200,
    enableCellEdit: true
  },

];

...