将数据设置为 JSON 模型，然后将该模型设置为 SAPUI5 中的 table

Question

这是我的 JSON 对象（在 JSONlint.com 验证）：

[
    {
        "team": "xxx",
        "fname": "0",
        "lname": "C5042439"
    },
    {
        "team": "yyy",
        "fname": "0",
        "lname": "C5067631"
    }
]

我遵循了这个教程：http://scn.sap.com/docs/DOC-46156

在我的模型中，我最终得到了：

 var oTable = new sap.ui.table.Table({
    title: "Employee Details",                                   // Displayed as the heading of the table
    visibleRowCount: 3,                                           // How much rows you want to display in the table
    selectionMode: sap.ui.table.SelectionMode.Single, //Use Singe or Multi
    navigationMode: sap.ui.table.NavigationMode.Paginator, //Paginator or Scrollbar
    fixedColumnCount: 3,                     // Freezes the number of columns
    enableColumnReordering:true,       // Allows you to drag and drop the column and reorder the position of the column
    width:"1024px"                              // width of the table
  });

// Use the Object defined for table to add new column into the table
    oTable.addColumn({
    label: new sap.ui.commons.Label({text: "Team"}),             // Creates an Header with value defined for the text attribute
    template: new sap.ui.commons.TextField().bindProperty("value", "team"), // binds the value into the text field defined using JSON
    sortProperty: "team",        // enables sorting on the column
    filterProperty: "team",       // enables set filter on the column
    width: "125px"                  // width of the column
});

    oTable.addColumn({
    label: new sap.ui.commons.Label({text: "FName"}),
    template: new sap.ui.commons.TextField().bindProperty("value", "fname"),
    sortProperty: "fname",
    filterProperty: "fname",
    width: "125px"
});

    oTable.addColumn({
    label: new sap.ui.commons.Label({text: "Lname"}),
    template: new sap.ui.commons.Link().bindProperty("text", "lname"),
    sortProperty: "lname",
    filterProperty: "lname",
    width: "200px"
});

var vData =     
    [
        {
            "team": "xxx",
            "fname": "0",
            "lname": "C5042439"
        },
        {
            "team": "yyy",
            "fname": "0",
            "lname": "C5067631"
        }
    ];
 var oModel = new sap.ui.model.json.JSONModel();        // created a JSON model      
     oModel.setData({modelData: vData});                              // Set the data to the model using the JSON object defined already
     oTable.setModel(oModel);                                                                                  
     oTable.bindRows("/modelData");                              // binding all the rows into the model
     //Initially sort the table
     oTable.sort(oTable.getColumns()[0]);                
     oTable.placeAt("table");

我的问题是如何将 JSON 模型绑定到 table 以便它显示模型中的数据？目前我收到此错误： 未捕获错误：“[object Object]”对于元素 sap.ui.table.Table#__table0

的聚合 "columns" 无效

根据我的理解，将列绑定到实际数据有问题，但我不确定。任何帮助将不胜感激。

Answer 1

您实际上是在向 table 添加对象而不是列 - oTable.addColumn() 需要 sap.ui.table.Column

类型的对象

将您的代码更改为：

oTable.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Lname"}),
    template: new sap.ui.commons.Link().bindProperty("text", "lname"),
    sortProperty: "lname",
    filterProperty: "lname",
    width: "200px"
}));

等等

将数据设置为 JSON 模型，然后将该模型设置为 SAPUI5 中的 table

Setting data to JSON model, and then setting that model to a table in SAPUI5

binding

json

model

sapui5