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

【问题标题】：Create dojox datagrid structure layout programmatically/dynamically以编程/动态方式创建 dojox 数据网格结构布局
【发布时间】：2014-05-28 11:17:04
【问题描述】：

我想创建一个带有如下标题的 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);

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

【问题讨论】：

标签： json datagrid dojo

【解决方案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

【讨论】：