我对 dojo 框架还很陌生，现在我必须使用 dojo 构建一个网格，并且我在网上搜索过，我没有找到任何关于构建网格的信息，我可以根据响应创建列我从服务器获取。因此，请需要有关如何使用从 json 响应中获取的列名来构建网格的信息。
例如，如果其余响应是：
{"id":1,"name":"fuser","lastname":"luser"},{"id":2,"name":"fuser2","lastname":"luser2"}
因此，网格列应该是动态创建的 id、name、lastname，而无需在 javascript 中对列名进行硬编码。
谢谢。
【问题讨论】：
标签： java dojo web-deployment
从服务器循环遍历 JSON，为布局和数据存储创建两个新变量。在为布局和数据存储变量构建 JSON 后，对其执行 eval，以便将其插入网格。
布局（列标题）：
name = 列顶部的名称
字段 = 内部列 ID，以便稍后根据需要进行处理
width = 设置初始宽度
构建布局变量后，对其执行 eval() 以便在网格中使用它。
var build_layout = " var layout = [[{'name': 'ID', 'field': 'id', 'width': '17px'},";
for (var i = 0; i < cols.length; i++) {
build_layout += "\n{'name': '" + cols[i] + "', 'field': 'col" + (i+1) + "', 'width': '" + widths[i] + "px'},";
}
build_layout += "]];";
eval(build_layout);
在您的情况下， build_layout 应该如下所示：
[[{'name': 'id', 'field': 'col1', 'width': '17px'},{'name': 'name', 'field': 'col2', 'width': '17px'},{'name': 'lastname', 'field': 'col3', 'width': '17px'}]]
网格数据：
var build_data = " var data_list = [";
var no_data = true;
build_data += "{ ";
var patt = new RegExp('"',"g");
for (var i = 0; i < JSON_data.length; i++) {
for (var x = 0; x < JSON_data[i].length; x++) {
var val = JSON_data[i][x]['val'];
var chk_val = val.replace(patt,'\\"');
//alert('val ' + chk_val);
build_data += "col" + (x + 1) + ": " + "\"" + chk_val + "\"";
if ( x < (JSON_data[i].length - 1) ) {
build_data += ", ";
}
no_data = false;
}
if ( i < (JSON_data.length - 1) ) {
build_data += "},\n{ ";
}
}
build_data += '}];';
if (no_data) {
build_data = " var data_list;";
}
//alert(build_data);
eval(build_data);
var rows = JSON_data.length;
var autoH = false;
if (data_list.length < 20 ) { autoH = true; }
if (! no_data) {
for(var i = 0, l = data_list.length; i < rows; i++){
data.items.push(lang.mixin({ id: i+1 }, data_list[i%l]));
}
var store = new ItemFileWriteStore({data: data});
对于每列中的数据（data_list var）：
[{col1: "1",col2: "fuser",col3: "luser"},{col1: "2",col2: "fuser2",col3: "luser2"}]
然后当您创建网格、插件布局和存储时：
var grid = new DataGrid({
id: 'grid',
store: store,
structure: layout,
rowSelector: '20px',
style: 'font-size:9pt',
rowsPerPage: 1000,
columnReordering: true,
autoWidth: true,
autoHeight: autoH});
您可以根据列中出现的数据为每列设置适当的宽度。 将此 div 添加到您的 HTML：
<div id="test"></div>
通过下面的函数运行所有数据...根据需要对其进行调整：
function calcWidthByData(columns) {
var col_cntr = 0;
var data_cntr = 1;
var not_done = true;
var widths = new Array();
var fnt_sz = '9pt';
var tst_item = window.document.getElementById("test");
tst_item.style.fontSize = fnt_sz;
var widthPX = 45; //default px width
for (var i = 0; i < columns.length; i++) {
tst_item.innerHTML = columns[i];
widthPX = (tst_item.clientWidth + 1);
//alert(columns[i] + ' ' + fnt_sz + ' width: ' + widthPX + ' original: ' + tst_item.innerHTML);
widths[i] = widthPX;
}
for (var i = 0; i < JSON_data.length; i++) {
for (var x = 0; x < JSON_data[i].length; x++) {
var val = JSON_data[i][x]['val'];
if (val) {
if (x < JSON_data[i].length - 1) {
if (tst_item) {
tst_item.innerHTML = val;
tst_item.style.fontSize = fnt_sz;
widthPX = (tst_item.clientWidth + 1);
}
var cur_width = widths[x];
if (cur_width) {
if (cur_width < widthPX) {
widths[x] = widthPX;
}
} else {
widths[x] = widthPX;
}
}
}
}
}
//for (var i = 0; i < widths.length; i++) {
// var tmp = "widths[" + i + "] = " + widths[i];
//alert((i + 1) + ' ' + tmp);
//}
return(widths);
}
上面的函数基本上是查看网格中的所有数据并找到每列的宽度，因此看起来很美观。
【讨论】：
你可以这样做。
首先，您的响应将是一个对象数组。
需要这两个文件。
'dojox/lang/functional/object',
'dojo/_base/array'
然后
var response = [{name:"jim", lastName:"black"},{name:"another", lastName:"user"}];
var myColumns = [];
array.forEach(object.keys(response[0]), function(key) {
var field = {};
field.field = key;
field.label = key;
myColumns.push(field);
});
yourGrid.set('store', new Memory({data:[]})); //Might need this because setting columns on a grid does a refresh and the data might be a different column set now
yourGrid.set('columns', myColumns);
yourGrid.set('store', new Memory({data:response}));
【讨论】：