Расширяемые строки с вложенными расширяемыми значениями?

Question

Мои данные содержат столбец, значение которого находится в формате JSON. Я бы хотел сделать две вещи:

1. Развернуть каждую строку, чтобы ее значения были перечислены.
2. Expand определенного значения, так что, если его значение в формате JSON, ключи/значения будут представлены также в вложенном списке внутри списка из пункта 1.

Например:

Этих 3 различные результаты:

И это первый результат расширяется:

Поблагодарите вашу помощь.

Answer 1

Я только что реализовал ag-сетку в первый раз и имею аналогичный пример использования выше. Поскольку у меня есть только бесплатная версия, я следовал примеру File Browser File Browser, который реализует вложенные строки, формируя данные, прежде чем давать их сетке (т. Е. Преобразование Model -> ViewModel).

форма нуждается сетка в значительной степени стандартное представление иерархических данных, вам просто нужно «детский» массив вложенных данных (это взято из примера FileBrowser):

{ 
     folder: true, 
     name: 'D:', 
     children: [ 
      {name: 'Game of Thrones s05e01.avi', size: '1034 mb', type: 'Movie', dateModified: '13/03/2014 10:14'}, 
      {name: 'The Knick s01e01', size: '523 mb', type: 'Text Document', dateModified: '27/11/2012 04:12'}, 
      {name: 'musicbackup1.zip', size: '25 mb', type: 'Compressed Zip File', dateModified: '18/03/2014 00:56'}, 
      {name: 'musicbackup2.zip', size: '25 mb', type: 'Compressed Zip File', dateModified: '18/03/2014 00:56'} 
     ] 
    } 

Примечание , вы можете иметь столбцы не вложенности перед столбцом, который переключает вложенные строки (представление родитель-ребенок).

Чтобы преобразовать ваши свойства json в массив пар ключ-значение, см. Статью StackOverflow Convert object's properties and values to array of key value pairs.

шаги предпринять для того, чтобы вложенные строки являются:

1. Добавить CellRenderer свойство в колонке defn, который собирается открыть вложенные клетки. Вы могли бы подумать, что вам нужно свойство cellRendererParams, но это просто для добавления нетекстового содержимого в ячейку.

   { headerName: "Name", field: "name", width: 250, 
       cellRenderer: 'group' 
   }, 
   

2. Реализация getNodeChildDetails в структуре gridOptions. Обратите внимание, что «файл» ниже - данные узла, а file.folder - это флаг данных (не для отображения), который сообщает этой функции, если в ней отображаются вложенные строки.

   getNodeChildDetails: function(file) { 
       if (file.folder) { 
        return { 
         group: true, 
         children: file.children, 
         expanded: file.open 
        }; 
       } else { 
        return null; 
       } 
   }, 
   

3. Добавить иконку объект в gridOptions структуру.

   icons: { 
       groupExpanded: '<i class="fa fa-minus-square-o"/>', 
       groupContracted: '<i class="fa fa-plus-square-o"/>' 
   }, 
   

Возможная ошибка

Я пытался реализовать getRowHeight функцию (в gridOptions), но сразу же вложенная ряд тумблер перестал работать. Если я смогу найти причину, я отправлю ее позже.