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

Question

Here is my JSON object (validated at JSONlint.com):

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

I followed this tutorial: http://scn.sap.com/docs/DOC-46156

In my model I ended up having:

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

---

My question is how would I bind that JSON model to the table so that it displays the data within the model? at the moment am getting this error: Uncaught Error: "[object Object]" is not valid for aggregation "columns" of Element sap.ui.table.Table#__table0

From my understanding there is something wrong with binding the columns to the actual data, but I'm not sure. Any help will be appreciated.

Answer 1

You are adding indeed an object to your table instead of a column -- oTable.addColumn() expects an object of type sap.ui.table.Column

Change your code to:

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

etc.