以编程方式/动态创建dojox数据网格结构布局

Question

我想创建一个dojo数据网格，其标题如下所示：

如你所见，我想要一些章节标题（A节，B节......），包含许多“子标题”（A1，A2，A3 ...... B1，B2 ......）。当我调用页面时，我得到了json响应中的所有数据。然后我能做两件事：

首先，获取json中的数据以显示所有子标题，如下所示：

var gridStructure = [
    {width:'150px', name:'Table'}
];

for(var i = 0 ; i < response.columns.length ; i++) {
    for(var j = 0 ; j < response.columns[i].sections.length ; j++) {
        var subColumnToAdd = 
             {width:'200px', name:response.columns[i].sections[j].sectionName};
        gridStructure.push(subColumnToAdd);
    }
}

grid.setStructure(gridStructure);

我还能够像我想要的那样显示表格，但不能动态显示：

var gridStructure = [{ 
    cells:[ 
        [{width: 'auto'}],                 
        [{ 
            name: 'Section A', 
            colSpan: 2
        }], 
        [{ 
            name: 'A1', 
            field: 'col1' 
        }, { 
            name: 'A2', 
            field: 'col2' 
        }] 
    ], 
    onBeforeRow : function(inDataIndex, inSubRows) { 
        inSubRows[0].invisible = true; 
    } 
}]; 

grid.setStructure(gridStructure);

现在我不知道要做的是如何混合它，用动态数据填充标题/子标题。感谢您的帮助和建议。

Answer 1

尝试这样的事情：

var gridStructure = [
        [
             {width:'150px', name:'Table', rowSpan: 2}
        ]
];

for(var i = 0 ; i < response.columns.length ; i++) {
    for(var j = 0 ; j < response.columns[i].sections.length ; j++) {
        var subColumnToAdd = 
             {width:'200px', name:response.columns[i].sections[j].sectionName};
        gridStructure.push(subColumnToAdd);
    }
}

但是这是静态添加表格...为了使它完全动态，你仍然需要一些东西（可能在数据本身中）指定colSpan / rowSpan的值以使其正确显示。

要添加数据，您只需构建数据的json数组。该数组的每个项目都是包含单个项目的对象。如果您的数据已经采用这种格式，那么应该很简单，否则只需创建一个循环并动态构建项目。

var items = [
    { name: "First", someProperty: true},
    { name: "Second", someProperty: false}
  ];

有了它，有很多关于如何建立商店的选择：

store = new Memory({ data: items });
dataStore = new ObjectStore({ objectStore: store });
myGrid.set("store", dataStore);

或

grid = new DataGrid({
    store: dataStore,
    ...

您可以将其用作参考/示例https://dojotoolkit.org/documentation/tutorials/1.9/datagrid/demo/datagrid-subrows.php