Question

我正在寻找一个代码，它允许我连接两个JSONModel属性，然后映射到一个表。例如，如果我的JSON看起来像这样。

[
    {"FirstName","James", "LastName","Bond"},
    {"FirstName","Robin", "LastName","Hood"},
    {"FirstName","Peter", "LastName","Parker"}
]

我希望我的SAP UI表格列看起来像

<table border=1>
  <tr><th>Name</th></tr>
  <tr><td>James Bond </td></tr>
   <tr><td>Robin Hood </td></tr>
   <tr><td>Peter Parker </td></tr>
  
 </table>

Answer 1

首先，您必须将您的json数据放入模型并将其分配给您的视图或表（请注意您的json数据存在语法错误。以下是更正后的版本）：

onInit:function(){
  var data = [
    {"FirstName":"James", "LastName":"Bond"},
    {"FirstName":"Robin", "LastName":"Hood"},
    {"FirstName":"Peter", "LastName":"Parker"}
    ];
  this.getView().setModel(new sap.ui.model.json.JSONModel(data));
}

其次你需要像桌子这样的东西：

<t:Table rows="{/}">
  <t:Column>
    <Label text="Full Name"/>
    <t:template>
      <Label text="{FirstName} {LastName}"/>
    </t:template>
  </t:Column>
</t:Table>

该表将其聚合rows绑定到您的数组（路径＆＃39; /＆＃39;）。对于数组中的每个项目，将克隆并显示模板。模板是一个标签，显示以空格分隔的名字和姓氏：两个带相对路径的数据绑定（相对于行的数组项）。

为此，您需要启用＆＃34;复杂数据绑定＆＃34; bootstrap脚本标记中的功能：

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

您还可以通过将所需的ui5版本设置为最新版本（或者＃34; edge＆＃34;这是最新版本）来启用复杂数据绑定：data-sap-ui-compatVersion="edge"

＆＃13;

sap.ui.core.mvc.Controller.extend("view1", {
  onInit:function(){
    var data = [
      {"FirstName":"James", "LastName":"Bond"},
      {"FirstName":"Robin", "LastName":"Hood"},
      {"FirstName":"Peter", "LastName":"Parker"}
      ];
    this.getView().setModel(new sap.ui.model.json.JSONModel(data));
    }
  });
var view = sap.ui.xmlview({viewContent: $("#view1").html()});
view.placeAt("content");

＆＃13;

<script src="https://openui5.hana.ondemand.com/1.32.7/resources/sap-ui-core.js" 
        id="sap-ui-bootstrap" 
        data-sap-ui-theme="sap_bluecrystal" 
        data-sap-ui-libs="sap.m" 
        data-sap-ui-bindingSyntax="complex"></script>
<script type="sapui5/xmlview" id="view1">
  <mvc:View xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:t="sap.ui.table" controllerName="view1">
    <t:Table rows="{/}">
      <t:Column>
        <Label text="Full Name"/>
        <t:template>
          <Label text="{FirstName} {LastName}"/>
        </t:template>
      </t:Column>
    </t:Table>
  </mvc:View>
</script>
<div id="content"></div>

＆＃13;

连接JSONModel中包含的数据

1 个答案: