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에는 그것에 관한 정보가 없습니다. 여기

뭔가 내가

필요 더 이해할 수 있도록하는 것입니다 그리고 나는 많은 object keys.length

나는이 어떻게 할 수있는 내 등의 열으로 갖고 싶어?

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 단계 :는 재산 행 추가이 새로운 데이터를 읽을 때마다 수행해야합니다 기억하십시오. 이렇게하면 공장 기능으로 변경됩니다.

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

새 테이블 :이 도움이

희망 그래서, 우리의 JS 뷰의 컨텐츠를 만들 수 있습니다.

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>