问题描述
我是SAPUI5 / OPENUI5的新手。
我正在尝试一个示例程序来从域中使用json数据并将其显示在我的openui5表中。我已经尝试了两种方法来获取数据并将其绑定到表控件。但是我无法使用json数据生成表。
请告诉我代码中的错误。
并且还请参考我的一些链接以更好的方式理解这个概念。
I am new to SAPUI5/OPENUI5.I am trying out a sample program to consume json data from a domain and display it in my openui5 table. I have tried two methods to get the data and bind it to table control.But I am not able to generate the table with the json data.Please let me know my mistake in the code.And also please refer me some links to understand the concept in a better way.
提前致谢。
请找到以下两种方法:
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文件时,它会生成数据并在屏幕上打印数据。
Approach 1 : I am using a php file to echo the JSON data and use it in my ui5 screen.When I access the run the php file individually, it generates the data and prints the data on screen.
我得到的错误是没有调用getJSON。
Error I get is getJSON is not called.
代码:
<!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文件并访问数据。
Approach 2 : I am trying to access the JSON file directly on my domain and access the data.
代码与上面相同,但url除外。
Url用于此方法是(mydomain / players.json)其中players.json包含上述json数据。
Code is the same as above except url.Url is used for this approach is (mydomain/players.json) where players.json contain the above json data.
请帮助我理解这个概念JSON数据处理。
Please help me in understanding the concept of JSON data handling.
问候,
Rajan
Regards,Rajan
推荐答案
首先:SAPUI5构建在jQuery上,是的。但是不应该在SAPUI5应用程序中使用jQuery。
First of all: SAPUI5 is built onto jQuery, yes. But there should be no need to use jQuery inside your SAPUI5 Application.
使用 JSONModel 加载JSON-Data。 JSONModel也可以从URL加载数据。
请参阅
Use a JSONModel to load JSON-Data. Also the JSONModel can load the data from URL.See the 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中注册此模型:
after this you can register this model in your sap.ui.core with:
sap.ui.getCore().setModel(oModel);
在此行之后,每个控件都可以通过简单的绑定语法使用此模型中的数据。
after this line every control can use the data from this model by simple binding-syntax.
现在让我们创建表:
// 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}'的部分。这是从表中的模型中获取数据所必须做的唯一事情。
beware of the part with "rows: '{/player}'". This is the only thing that has to be done to get the data from the model inside your table.
现在通过添加列并将表添加到表来完成演示。 DOM:
now finish the demo by adding the column and add the table to the 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');
多数民众赞成。如果它不起作用,这是一个正在运行的 。
Thats it. If it doesn't work, here is a running DEMO.
这篇关于我们如何使用OPENUI5 / SAPUI5使用JSON数据?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!