表格單元格的動態內容類型

Question

我從數據庫中獲取數據，從中創建模型並綁定到表格。

我有一個數據庫字段包含imageURL的圖像或「不可用」如果沒有圖像存在的問題。

問題是，根據數據庫字段值，表的單元格應該是sap.m.Image或sap.m.Text。

而我無法讓它工作。

下面是相關的代碼部分：

var signatureData = {}; 
signatureData.item = "Signature"; 
signatureData.value = data.signature; 

var oModelSignature = new sap.ui.model.json.JSONModel(); 
oModelSignature.setData(signatureData); 
var oSignatureTable = sap.ui.getCore().byId("reportDetailsSignature"); 
       oSignatureTable.setModel(oModelSignature); 

var oSignature; 
if(data.signature == "Not Available"){ 
    oSignature = new sap.m.Text({text: "{value}"}); 
}else{ 
    oSignature = new sap.m.Image({src: "{value}", width: "7%", height: "7%"}); 
} 

oSignatureTable.bindItems("/", new sap.m.ColumnListItem({ 
    cells : [ new sap.m.Text({text: "{item}"}), 
      oSignature,] 
})); 

我有我的桌子空的，「無數據」。

Answer 1

在我的代碼的問題是在我signatureData對象不存在的陣列組成。 在將上述對象添加到包含在另一個對象中的數組後，數據出現在表中。

這是working example。 如果signature鍵的值是圖像（或其鏈接的鏈接）的數據URL，則會顯示圖像。

Answer 2

既然你得到從data.signature值只有一次，這將是你的模板將與工作的價值，不管任何的值可能有進一步的模型

更好的方法將是使用HBox作爲模板，同時使用Image和Text控件，並使用格式化程序（請參閱https://sapui5.hana.ondemand.com/sdk/#docs/guide/a2fe8e763014477e87990ff50657a0d0.html）切換其中任何一個的可見性。

（請原諒我使用XML語法的觀點，因爲這是我喜歡的風格，但你可以很容易地適應JS查看。）：

編輯：作爲一個鍛鍊自己，我創建了一個運行下面的代碼片段。

// The UI5 controller 
 
sap.ui.controller("view1.initial", { 
 
    onInit : function(oEvent) { 
 

 
     // a model with dummy data. Values are either empty or contain a URL 
 
     var oModel = new sap.ui.model.json.JSONModel(); 
 
     oModel.setData({ 
 
      rows : [ 
 
       { value : "sap-icon://syringe", col2 : "Value 2", col3 : "Value 3", ol4 : "Value 4" }, 
 
       { value : "",      col2 : "Value 6", col3 : "Value 7", col4 : "Value 8" }, 
 
       { value : "sap-icon://account", col2 : "Value 10", col3 : "Value 11", col4 : "Value 12" }, 
 
       { value : "sap-icon://chalkboard", col2 : "Value 14", col3 : "Value 15", col4 : "Value 16" }, 
 
       { value : "sap-icon://e-care",  col2 : "Value 18", col3 : "Value 19", col4 : "Value 20" }, 
 
       { value : "",      col2 : "Value 22", col3 : "Value 23", col4 : "Value 24" } 
 
      ] 
 
     }); 
 

 
     this.getView().setModel(oModel); 
 

 
    }, 
 

 
    // Formatter for icon visibility 
 
    setIconVisible : function (sValue) { 
 
     return !!sValue; 
 
    }, 
 

 
    // Formatter for text visibility 
 
    setTextVisible : function (sValue) { 
 
     return !sValue; 
 
    } 
 

 
}); 
 

 
// Code needed to place XML view into 'uiArea' DIV element 
 
sap.ui.xmlview("main", { 
 
    viewContent: jQuery("#view1").html() 
 
}) 
 
.placeAt("uiArea");

<!-- bootstrapper --> 
 
<script id="sap-ui-bootstrap" 
 
    src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" 
 
    data-sap-ui-theme="sap_bluecrystal" 
 
    data-sap-ui-xx-bindingSyntax="complex" 
 
    data-sap-ui-libs="sap.m"></script> 
 

 
<!-- here the magic will be shown --> 
 
<div id="uiArea"></div> 
 

 
<!-- The XMLView definition --> 
 
<script id="view1" type="ui5/xmlview"> 
 
    <mvc:View 
 
     controllerName="view1.initial" 
 
     xmlns="sap.m" 
 
     xmlns:core="sap.ui.core" 
 
     xmlns:mvc="sap.ui.core.mvc" > 
 
     <Table id="tbl" inset="true" multiSelect="true" selectionMode="MultiToggle" mode="MultiSelect" 
 
     items="{/rows}"> 
 
      <columns> 
 
       <Column> 
 
        <Text text="Col1" /> 
 
       </Column> 
 
       <Column> 
 
        <Text text="Col2" /> 
 
       </Column> 
 
       <Column> 
 
        <Text text="Col3" /> 
 
       </Column> 
 
      </columns> 
 
      <items> 
 
       <ColumnListItem> 
 
        <cells> 
 
         <!-- Notice how the cell contains a HBox with an Icon and Text control --> 
 
         <!-- Visibility will be toggled using the formatter function for both --> 
 
         <HBox> 
 
          <core:Icon src="{value}" visible="{path:'value', formatter:'.setIconVisible'}" /> 
 
          <Text text="No data"  visible="{path:'value', formatter:'.setTextVisible'}" /> 
 
         </HBox> 
 
         <Text text="{col2}" /> 
 
         <Text text="{col3}" /> 
 
        </cells> 
 
       </ColumnListItem> 
 
      </items> 
 
     </Table> 
 
    </mvc:View> 
 
</script>