Question

我是SAPUI5 / OPENUI5的新手。我正在尝试一个示例程序来从域中使用json数据并将其显示在我的openui5表中。我已经尝试了两种方法来获取数据并将其绑定到表控件。但是我无法使用json数据生成表。请告诉我代码中的错误。另请参考我的一些链接，以更好的方式理解这个概念。

提前致谢。

请找到以下两种方法：

JSON数据：

[
  {
    "name": "Rajesh"
  },
  {
    "name": "Kunal Jauhari"
  },
  {
    "name": "Ashish Singh"
  },
  {
    "name": "Ansuman Parhi"
  },
  {
    "name": "Arup Kumar"
  },
  {
    "name": "Deepak Malviya"
  },
  {
    "name": "Seshu"
  },
  {
    "name": "Ankush Datey"
  },
  {
    "name": "Tapesh Syawaria"
  },
  {
    "name": "Mahesh"
  },
  {
    "name": "Vinay Joshi"
  },
  {
    "name": "Ardhendu Karna"
  },
  {
    "name": "Abhishek Shukla"
  },
  {
    "name": "Kashim"
  },
  {
    "name": "Vinayak"
  }
]

方法1：我使用php文件来回显JSON数据并在我的ui5屏幕中使用它。当我单独访问运行php文件时，它会生成数据并在屏幕上打印数据。

我得到的错误是没有调用getJSON。

代码：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>


        <script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
                id="sap-ui-bootstrap"
                data-sap-ui-libs="sap.ui.commons,sap.ui.table"
                data-sap-ui-theme="sap_bluecrystal">
        </script>
        <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

        <script>
        var json_url = "http://mydomain/teamdetails_ui5.php?t=6";
            $.ajax({
                url : json_url,
                jsonpCallback : 'getJSON',  
                contentType : "application/json",
                dataType: 'jsonp',


                success: function(data,textStatus,jqXHR) {
                    oModel.setData({data: data});
                    sap.ui.getCore().setModel(oModel);

                    var oTable1 = new sap.ui.table.Table({  
                        title : "Players List",  
                        visibleRowCount : 3,  
                        selectionMode : sap.ui.table.SelectionMode.Single,  
                        navigationMode : sap.ui.table.NavigationMode.Paginator,  
                    });

                    //Define the columns and the control templates to be used    
                    oTable1.addColumn(new sap.ui.table.Column({  
                        label : new sap.ui.commons.Label({  
                        text : "Player Name"  
                    }),  
                    template : new sap.ui.commons.TextView().bindProperty(  
                    "text", "name"),  
                    width : "10px"  
                    }));

                    oTable1.setModel(oModel);  
                    oTable1.bindRows("/oModel");  
                    oTable1.placeAt('table_cont');  

                },
                error : function(jqXHR,textStatus,errorThrown) {
                    alert("Oh no, an error occurred");
                    alert(jqXHR);
                    alert(textStatus);
                    alert(errorThrown);             
                }
            });

        </script>

    </head>
    <body class="sapUiBody" role="application">
        <div id="table_cont"></div>
    </body>
</html>

方法2：我试图直接在我的域上访问JSON文件并访问数据。

除了url之外，代码与上面相同。 Url用于此方法是（mydomain / players.json）其中players.json包含上述json数据。

请帮助我理解JSON数据处理的概念。

此致拉詹

Answer 1

首先：SAPUI5构建在jQuery上，是的。但是不应该在SAPUI5应用程序中使用jQuery。

使用 JSONModel 加载JSON-Data。 JSONModel也可以从URL加载数据。请参阅 Documentation

这将是：

// create a "json" Model
var oModel = new sap.ui.model.json.JSONModel();
// load data from URL
oModel.loadData('http://mydomain/teamdetails_ui5.php?t=6');

之后，您可以使用以下命令在sap.ui.core中注册此模型：

sap.ui.getCore().setModel(oModel);

在此行之后，每个控件都可以通过简单的绑定语法使用此模型中的数据。

现在让我们创建表格：

// create your table
var oTable1 = new sap.ui.table.Table({  
   title : "Players List",  
   visibleRowCount : 3,  
   selectionMode : sap.ui.table.SelectionMode.Single,  
   navigationMode : sap.ui.table.NavigationMode.Paginator,
   // bind the core-model to this table by aggregating player-Array
   rows: '{/player}'
});

请注意“行：'{/ player}'”的部分。这是从表中的模型中获取数据所必须做的唯一事情。

现在通过添加列并将表添加到DOM来完成演示：

// define the columns and the control templates to be used    
oTable1.addColumn(new sap.ui.table.Column({  
   label : new sap.ui.commons.Label({  
      text : "Player Name"  
   }),  
   template : new sap.ui.commons.TextView({
      text: '{name}'
   }),
   width : "10px"  
}));

//place at DOM
oTable1.placeAt('content');

多数民众赞成。如果它不起作用，则运行 DEMO 。

我们如何使用OPENUI5 / SAPUI5使用JSON数据？

1 个答案: