Question

我正在尝试创建一个表格，该表格将显示外部JSON文件中的可用内容。

你能告诉我怎样才能做到这一点。

我写过这些代码，但不知道怎么做。

var req = new qx.io.remote.Request("resource/testtable/json/table.csv", "GET", "text/plain");

req.addListener("completed", function(e) {
    //alert(e.getContent());
    // result = [["Jahr","Wert"],[1999,34.4],[2000,45.0],[2001,199.0]]

    var data = e.getContent();
    // alert(typeof(data));
    // result = string

    var test = new qx.data.Array;
    test = qx.lang.Json.parse(data);
    alert(typeof(test));

    alert(test[0]);


    var tableModel = new qx.ui.table.model.Simple();
    tableModel.setColumns(["col1", "col2", "col3"]);
    tableModel.setData(e.getContent());
    var table = new qx.ui.table.Table(tableModel);

    composite.add(table);

});

req.send();

JSON文件内容：

childBox: {
1: {
    "col1": "1000 Unique Result in Row1",
    "col2": "101, 102, 103, 104",
    "col3": "Result are done"
},
2: {
    "col1": "1000 Unique Result in Row2",
    "col2": "101, 102, 103, 104",
    "col": "Result are done"
},
3: {
    "col": "1000 Unique Result in Row3",
    "col2": "101, 102, 103, 104",
    "col3": "Result are done"
}
}

提前致谢！

Answer 1

Qooxdoo没有开箱即用的表控制器或具有绑定功能的表模型。但是如果你只需要设置数据一旦你没有损失太多。表模型API中存在一些细微之处。

var data = {childBox: {
  1: {
    "col1": "1000 Unique Result in Row1",
    "col2": "101, 102, 103, 104",
    "col3": "Result are done"
  },
  2: {
    "col1": "1000 Unique Result in Row2",
    "col2": "101, 102, 103, 104",
    "col": "Result are done"
  },
  3: {
    "col": "1000 Unique Result in Row3",
    "col2": "101, 102, 103, 104",
    "col3": "Result are done"
  }
}};

var rows = Object.keys(data.childBox).map(function(key)
{
  return data.childBox[key];
});

var tableModel = new qx.ui.table.model.Simple();
tableModel.setColumnIds(["col1", "col2", "col3"]);
tableModel.setColumnNamesByIndex(["Column #1", "Column #2", "Column #3"]);
tableModel.setDataAsMapArray(rows);

var table = new qx.ui.table.Table(tableModel);
this.getRoot().add(table, {left: 0, right: 0});

Run it in Qooxdoo playground

如何从外部json文件绑定qooxdoo表模型

1 个答案: