- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我是 SAPUI5/OPENUI5 的新手。我正在尝试一个示例程序来使用域中的 json 数据并将其显示在我的 openui5 表中。我尝试了两种方法来获取数据并将其绑定(bind)到表控件。但是我无法使用 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。用于此方法的网址是 (mydomain/players.json),其中 players.json 包含上述 json 数据。
请帮助我理解 JSON 数据处理的概念。
问候,拉詹
最佳答案
首先:SAPUI5 是基于 jQuery 构建的,是的。但是应该没有必要在 SAPUI5 应用程序中使用 jQuery。
使用 JSONModel 加载 JSON 数据。 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);
在这一行之后,每个控件都可以通过简单的绑定(bind)语法使用来自该模型的数据。
现在让我们创建表:
// 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}'
});
注意带有“rows: '{/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 .
关于javascript - 我们如何使用 OPENUI5/SAPUI5 消费 JSON 数据?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23725199/
我在 Visual Studio 代码 1.2/1.3 中有一个 openui 项目设置,所有必需的库(openui 运行时文件)都在/resources 目录中,并且采用 .js 格式。我没有从这些
我是一名优秀的程序员,十分优秀!