Группировка в extjs (с данными в столбцах строки группы) - PullRequest
Новая
       19

Группировка в extjs (с данными в столбцах строки группы)

0 голосов
/ 14 мая 2019

У меня есть исходные данные с несколькими столбцами. Некоторые позиции имеют ParentID.

Пример данных: 

|  ID   | ParentID  |   Title   |    Info     |      Date     |
|-------|-----------|-----------|-------------|---------------|
|  101  |    Null   |  Title101 |    text     |   01.01.1990  |
|  102  |    Null   |  Title102 |    text     |   01.01.1990  |
|  103  |    101    |  Title103 |    text     |   01.01.1990  |
|  104  |    101    |  Title104 |    text     |   01.01.1990  |
|  105  |    101    |  Title105 |    text     |   01.01.1990  |
|  106  |    102    |  Title106 |    text     |   01.01.1990  |
|  107  |    Null   |  Title107 |    text     |   01.01.1990  |

Мне нужно сформировать сетку с группировкой по ParentID. Но в случае группировки в sencha docs данные не отображаются в столбцах строки группы. Мой ожидаемый результат должен быть таким (с данными в столбцах строки группы)

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

|   Title      |     Info    |   Date        |
|--------------|-------------|---------------|
| - Title101   |    text     |   01.01.1990  |
|     Title103 |    text     |   01.01.1990  |
|     Title104 |    text     |   01.01.1990  |
|     Title105 |    text     |   01.01.1990  |
| - Title102   |    text     |   01.01.1990  |
|     Title106 |    text     |   01.01.1990  |
|   Title1017  |    text     |   01.01.1990  |

Возможно ли это в сетке ext.js?

1 Ответ

1 голос
/ 16 мая 2019

Учитывая ожидаемый результат, который вы хотите, ExtJs имеет приятный treepanel компонент, который отображает данные в древовидной структуре.Вам просто нужно проанализировать данные в соответствии с ожидаемым вводом для этого компонента. 

{
    xtype: 'treepanel',
    rootVisible: false,
    store: Ext.create('Ext.data.TreeStore', {
        // Store definition here
    }),
    columns: [
         {
            xtype: 'treecolumn', // Set this xtype here to display
            text: 'Title',       // data in this column as a tree  
            dataIndex: 'title',
            flex: 1
         }, 
         {
            text: 'Info',
            dataIndex: 'info',
            width: 100  
         },
         {
            text: 'Date',
            dataIndex: 'date',
            width: 100
         }
    ]
}

Вот пример из образцов Kitchen Sink.

...