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

Question

我是dojo框架的新手，现在我必须使用dojo构建一个网格，当我在网上搜索时，我没有找到任何关于构建网格的信息，我可以根据从服务器得到的响应来创建列。因此，您需要了解如何使用从json响应中获取的列名来构建网格。

例如，如果rest响应是：

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

因此，网格列应该是动态创建的id，name，lastname，而不是在javascript中硬编码列名。

谢谢。

Answer 1

从服务器遍历JSON，为布局和数据存储创建两个新变量。为布局和数据存储变量构建JSON之后，对其执行eval，以便可以将其插入到网格中。

布局(列标题)：

名称=列顶部的名称

字段=内部列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变量)：

   [{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>

根据需要通过函数below...Tweek it运行所有数据：

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

上面的函数主要是查看网格中的所有数据，并找到每一列的宽度，因此它看起来很美观。

Answer 2

你可以做这样的事情。

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

需要这两个文件。

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