ui5 Elemente an TableRows binden statt TableColumns

Question

Ich habe ein Objekt und verbinde es mit meiner Tabelle, aber normalerweise, wie ich sehe, funktioniert die Bindung wie; Du bindst deine Sachen an die Säulen.

Kann ich es irgendwie ändern, um an Zeilen gebunden zu sein?

Was ich weiß, was ich tun kann und immer gemacht habe, ist;

Meiner Ansicht:

var vergleichTable1 = new sap.m.Table(this.createId("vergleichTable1"), { 

     columns: [ 
      new sap.m.Column({ 
       header: new sap.m.Label({ 
        text: "Header Text 1" 
       }) 
      }), 
      new sap.m.Column({ 
       header: new sap.m.Label({ 
        text: "Header Text 2" 
       }) 
      }), 
      new sap.m.Column({ 
       header: new sap.m.Label({ 
        text: "Header Text 3" 
       }) 
      }), 
     ] 
    }).addStyleClass("vergleichTable1"); 

und ich war das Hinzufügen etw. so in meinen Controller;

 var oTemplate1 = new sap.m.ColumnListItem({ 
      cells: [ 
       new sap.m.Text({ 
        text: "{KEYNAME}" 
       }), 
       new sap.m.Text({ 
        text: "{KEYNAME}" 
       }), 
       new sap.m.Text({ 
        text: "{KEYNAME}" 
       }) 
      ] 
     }); 

und für conencting:

this.byId("vergleichTable1").setModel(mymodel).bindItems("/foo/0", oTemplate1); 

jedoch, wie ich brauche ich etwas anderes erwähnt. Ich möchte es nicht an Spalten sondern an Zeilen binden, es gibt keine Informationen darüber in der API ui5.

Hier ist etwas, um es verständlich, was ich brauche

Und ich möchte so viel wie Spalten haben, wie meine object keys.length

Wie kann ich das tun?

Answer 1

Wenn ich das Problem verstanden habe, ist unten das gewünschte Ergebnis: (Bitte benachrichtigen, wenn nicht, damit ich meine Antwort korrigieren/löschen kann). Am besten, wenn Sie Ihre Beispieldaten einfügen können.

Erstens: Daten:

var selProps = [ 
     "Prop1", "Prop2", "Prop3" // Selected Properties stored in an array 
    ]; 
    var data = [ // Data, data, data (with all properties) 
     { 
      phone:"Moto G", 
      "Prop1": "Prop1-1", 
      "Prop2" :"Prop1-2", 
      "Prop3": "Prop1-3", 
      "Prop4" :"Prop1-4" 
     }, 
     { 
      phone:"Moto X", 
      "Prop1": "Prop2-1", 
      "Prop2" :"Prop2-2", 
      "Prop3": "Prop2-3", 
      "Prop4" :"Prop2-4" 
     }, 
     { 
      phone:"iPhone", 
      "Prop1": "Prop3-1", 
      "Prop2" :"Prop3-2", 
      "Prop3": "Prop3-3", 
      "Prop4" :"Prop3-4" 
     }, 
     { 
      phone:"G Pixel 2", 
      "Prop1": "Prop4-1", 
      "Prop2" :"Prop4-2", 
      "Prop3": "Prop4-3", 
      "Prop4" :"Prop4-4" 
     } 

    ]; 

Ausgang:

Code: Ausblick:

var oTable = new sap.m.Table(); 
    var oColTemplate = new sap.m.Column({ 
     header: new sap.m.Text({ 
      text: "{phone}" 
     }) 
    }); 
    oTable.bindAggregation("columns", "/data", oColTemplate); 



    oTable.bindItems("/selProps", function(sId, oContext) { 
     var aCells = []; 
     var oModel = oContext.getModel(); 
     var aCols = oModel.getProperty("/data"); // Fetch No of columns. Create that many Texts. 
     for (var index = 0 ;index < aCols.length; index++) { 
      // data will be stored in : /data/index/selected Property(present in oContext) 

      var oText = new sap.m.Text({ 
       text : "{/data/" + index + "/" + oContext.getProperty() +"}" 
      }); 
      aCells.push(oText); 
     } 

     return new sap.m.ColumnListItem({ 
      cells: aCells 
     }); 
    }.bind(oTable)); 

    return new sap.m.Page({ 
     title: "Title", 
     content: [ 
      oTable 
     ] 
    }); 

Controller:

onInit: function() { 

    var selProps = [ 
     "Prop1", "Prop2", "Prop3" // Selected Properties stored in an array 
    ]; 
    var data = [ // Data, data, data (with all properties) 
     { 
      phone:"Moto G", 
      "Prop1": "Prop1-1", 
      "Prop2" :"Prop1-2", 
      "Prop3": "Prop1-3", 
      "Prop4" :"Prop1-4" 
     }, 
     { 
      phone:"Moto X", 
      "Prop1": "Prop2-1", 
      "Prop2" :"Prop2-2", 
      "Prop3": "Prop2-3", 
      "Prop4" :"Prop2-4" 
     }, 
     { 
      phone:"iPhone", 
      "Prop1": "Prop3-1", 
      "Prop2" :"Prop3-2", 
      "Prop3": "Prop3-3", 
      "Prop4" :"Prop3-4" 
     }, 
     { 
      phone:"G Pixel 2", 
      "Prop1": "Prop4-1", 
      "Prop2" :"Prop4-2", 
      "Prop3": "Prop4-3", 
      "Prop4" :"Prop4-4" 
     } 

    ]; 

    var oModel = new sap.ui.model.json.JSONModel({data: data, selProps: selProps}); 
    this.getView().setModel(oModel); 
}, 

Lesen Sie mehr über Factory-Funktionen: Factory Functions

---

Update: leere Spalte und Zeile zu zeigen.

Schritt 1: leer Spalt hinzufügen:

, nun in obigem Beispiel binden wir von Spalten direkt auf die vorhandenen Daten. Dies wird sich ändern, da zusätzliche Spalten (am Anfang) hinzugefügt werden müssen.

Also, fügen Sie das, wo die Daten gelesen werden (in meinem Beispiel unter Einstellung der manuellen JSON-Daten). Denken Sie daran, diese jedes Mal neue Daten getan werden muss, ist zu lesen:

neue INIT-Funktion:

onInit: function() { 

    var selProps = [ 
     ...// same as above: To reduce post length 
    ]; 
    var data = [ ...// same as above: To reduce post length]; 

    var oModel = new sap.ui.model.json.JSONModel({data: data, selProps: selProps}); 
    this.getView().setModel(oModel); 

    this.fnBindColumns(); // Call function to create columns 

}, 

fnBindColumns : function() { 
    var oTable = this.byId('idTable'); 
    var aData = this.getView().getModel().getProperty("/data"); 


    var oPropCol = new sap.m.Column({ 
      header: new sap.m.Text({ 
      text: "" 
     }) 
    }); 

    oTable.addColumn(oPropCol); 

    for(var i = 0; i <aData.length ; i++) { 
     var oCol = new sap.m.Column({ 
      header: new sap.m.Text({ 
       text : "{/data/" + i + "/phone}" 
      }) 
     }); 
     oTable.addColumn(oCol); 
    } 
} 

Schritt 2: Eigenschaft hinzufügen Row. Dies zwingt zu einer Änderung unserer Werksfunktion. So erstellen Sie in Inhalt unserer JS Ansicht:

var oTable = new sap.m.Table({ 
     id: this.createId("idTable") // Look Id added 
    }); 

    oTable.bindItems("/selProps", function(sId, oContext) { 
     var aCells = []; 
     var oModel = oContext.getModel(); 
     var aCols = oModel.getProperty("/data"); 
     for (var index = 0 ;index < aCols.length + 1; index++) { // length = no of mobile phones + 1 (+1 for extra property row). 
      if (index == 0) { // add the property Text if first column 
       var oText = new sap.m.Text({ 
        text : oContext.getProperty() 
       }); 
      } else { 
       var oText = new sap.m.Text({ 
        text : "{/data/" + (index-1) + "/" + oContext.getProperty() +"}" // bind the text via absolute path. 
       }); 
      } 

      aCells.push(oText); 
     } 

     return new sap.m.ColumnListItem({ 
      cells: aCells 
     }); 
    }.bind(oTable)); 

Neue Tabelle:

Hoffnung, das hilft.

Answer 2

Das Problem kann in View nur mit CSS gelöst werden. Dies ist ein Beispiel.

var data = [{ //data is the king 
 
    name: 'My first property', 
 
    description: 'First property description', 
 
    phone: '555-123-4567', 
 
    location: 'Beverly Hills, CA' 
 
    }, 
 
    { 
 
    name: 'My second property', 
 
    description: 'Second property description', 
 
    phone: '555-123-4568', 
 
    location: 'Denver, CO' 
 
    }, 
 
    { 
 
    name: 'My third property', 
 
    description: 'Third property description', 
 
    phone: '555-123-4569', 
 
    location: 'Tampa, FL' 
 
    } 
 
]; 
 

 
function createTable() { 
 
    var container = document.getElementById('container'); 
 
    container.innerHTML = ''; 
 
    var keys = Object.keys(data[0]); //expect the same schema for all elements 
 
    var tbl = document.createElement('div'); 
 
    tbl.className = 'col-tbl'; 
 
    container.appendChild(tbl); 
 
    var row = document.createElement('div'); 
 
    tbl.appendChild(row); 
 
    for (var i = 0, key; key = keys[i]; ++i) { 
 
    var td = document.createElement('div'); 
 
    td.className = 'bold'; 
 
    td.innerHTML = key; 
 
    row.appendChild(td); 
 
    } 
 
    for (var j = 0, dat; dat = data[j]; ++j) { 
 
    row = document.createElement('div'); 
 
    tbl.appendChild(row); 
 
    for (i = 0, key; key = keys[i]; ++i) { 
 
     td = document.createElement('div'); 
 
     td.innerHTML = dat[key]; 
 
     row.appendChild(td); 
 
    } 
 
    } 
 
} 
 

 
function switchColRow() { 
 
    var tbl = document.getElementById('container').firstElementChild; 
 
    tbl.className = tbl.className == 'col-tbl' ? 'row-tbl' : 'col-tbl'; 
 
}

.col-tbl { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    flex-direction: column; 
 
} 
 

 
.col-tbl>div { 
 
    display: flex; 
 
    flex-direction: row; 
 
    width: 100% 
 
} 
 

 
.col-tbl>div>div { 
 
    width: 50%; 
 
    border: solid 1px #ccc 
 
} 
 

 
.row-tbl { 
 
    display: flex; 
 
    /*flex-wrap: wrap;*/ 
 
    flex-direction: row; 
 
} 
 

 
.row-tbl>div { 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 

 
.row-tbl>div>div { 
 
    width: 100%; 
 
    border: solid 1px #ccc; 
 
    height:30px; 
 
} 
 

 
.bold { 
 
    font-weight: bold 
 
}

<button type="button" onclick="createTable()">Poulate table</button> 
 
<button type="button" onclick="switchColRow()">Switch Cols/Rows</button> 
 
<div id="container"> 
 
</div>