Question

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

例如，如果其余的响应是：

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

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

感谢。

Answer 1

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

布局（列标题）：

name =列顶部的名称
field =内部列ID，以便稍后进行处理 width =设置初始宽度

在构建布局var之后，在其上执行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);
}

上面的函数基本上会查看网格中的所有数据，并找到每列的宽度，使其看起来很悦目。

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

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

2 个答案: