Question

我有几列的初始数据。一些职位具有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网格中有可能吗？

Answer 1

考虑到所需的预期结果，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
         }
    ]
}

这是厨房水槽样本中的example。

在extjs中分组（数据在组行的列中）

1 个答案: