ui5 TableColumnsの代わりにTableRowsにアイテムをバインドする

Question

私はオブジェクトを持っていますが、それをテーブルにバインドしていますが、通常はどこでも見るようにバインディングが機能しています。あなたはあなたのものを柱に結びつけます。

何とか行にバインドするように変更できますか？

私が行うことができ、いつもやっていたことは分かっています。私の見解では

：

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

と私はSTHを追加しました。このように私のコントローラに。

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

とconencting用：

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

しかし、私は別の何かを必要としたように。私はそれを列にではなく行にバインドしたいが、ui5 APIにはそれに関する情報はない。ここで

は何かが私が

必要なもの、それがより理解しやすくすることであると私は同じくらい​​

私はこれをどのように操作を行うことができ、私のように列として持っていたいですか？

Answer 1

私が問題を理解していれば、あなたが望む結果が得られます：（私の答えを訂正/削除することができない場合は、通知してください）。サンプルデータを貼り付けることができればベスト。

まず：データ：

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

コントローラー：

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

ファクトリ関数について詳しく読む：Factory Functions

---

を更新：空の列と行を表示します。

ステップ1：空の列を追加するには：今

、上記の例では、我々はデータの存在に直接列のバインド。余分な列（開始時）を追加する必要があるため、これは変更されます。

したがって、データを読み込む場所に貼り付けてください（私の例では、手動のJSONデータの設定です）。

新しいINIT機能：

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

ステップ2：は、プロパティの行を追加します。これは、新しいデータが読み込まれるたびに行われなければならないことを忘れないでください。これにより工場ファンクションへの変更が強制されます。だから、我々のJSビューのコンテンツを作成：

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

新しい表：

・ホープ、このことができます。

Answer 2

この問題はCSSを使用してViewに解決できます。これは一例です。

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>