Java 如何在dojo中动态创建网格列？

我对dojo框架非常陌生，现在我必须使用dojo构建一个网格，正如我在网上搜索的那样，我没有找到任何关于构建网格的信息，在这个网格中我可以根据从服务器得到的响应创建列。因此，请了解如何使用json响应中的列名构建网格

例如，如果rest响应为：

{"id":1,"name":"fuser","lastname":"luser"},{"id":2,"name":"fuser2","lastname":"luser2"}

因此，网格列应该是id、name、lastname，而不需要在javascript中硬编码列名称

---

谢谢。

从服务器循环JSON，为布局和数据存储创建两个新变量。为布局和数据存储变量构建JSON后，对其执行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);

布局（列标题）：

名称=列顶部的名称
字段=内部列ID，以便以后需要时进行处理
宽度=设置初始宽度

构建布局变量后，对其执行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);

网格数据：

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});

然后，当您创建网格时，插件布局和存储：

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);
}

函数calcWidthByData（列）{
var col_cntr=0；
var数据=1；
var not_done=true；
变量宽度=新数组（）；
var fnt_sz='9pt'；
var tst_item=window.document.getElementById（“测试”）；
tst_item.style.fontSize=fnt_sz；
var widthPX=45；//默认px宽度
对于（var i=0；i

---

上面的函数基本上会查看网格中的所有数据，并找到每列的宽度，因此看起来很美观。

您可以这样做

首先，您的响应将是一个对象数组

需要这两个文件

'dojox/lang/functional/object',
'dojo/_base/array'

然后

---

这里是什么？我的意思是，若它是来自服务器的json响应，那个么cols[I]将是一个包含所有字段值的json。那么，这如何从json对象的字段中创建列名呢？从服务器循环json字符串，将字段名放置在布局变量中的“name”位置。在单独的变量中为每列创建值（存储在我的示例中）。如果上面的内容太多，很抱歉，我只是没有时间把它分解或编辑我的代码来简化它。为了让事情变得更简单，可以从服务器循环JSON数据，并使用eval动态创建布局和存储变量。

'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}));