-
WEB前端
站-
热门城市 全国站>
-
其他省市
-
-
400-636-0069
沉沙
2018-06-26
来源 ：
阅读 1253
评论 0
摘要：我们通过网上的一个小demo，学习一下SAP UI5基本代码的编写流程。希望阅读本篇文章以后大家有所收获，帮助大家对HTML5的理解更加深入。
我们通过网上的一个小demo，学习一下SAP UI5基本代码的编写流程。这里在前面讲过的基本文件引入等这里就不重复介绍了。
我们最后要做的是一个SAP UI5风格的表格，并添加了一些交互性很好的功能。
首先在HTML中，编写如下简单内容即可：
<body class='sapUiBody'> <div id='content'></div> </body>
这只是为了给UI5组件一个容器，让它们找到自己的位置。
js代码实现主要功能。
var oTable = new sap.ui.table.Table({
editable : true
});我们定义了一个table表格组件，并且设定它为可编辑的。这里定义好的表格已经有一些自带的功能了。UI5中通过sap.ui调用各种组件。下面我们可以定义table中需要的组件，也就是table中的每一列，同样的方法：
var oControl = new sap.ui.commons.TextView({
text : "{lastName}"
});这里定义了一列，这一列显示的是每个对象的lastName属性，大家应该对这种大括号标识引用数据变量的方式不陌生。定义好一列后，我们把这一列添加到table中，通过调用addColumn方法：
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Last Name"
}),
template : oControl,
sortProperty : "lastName",
filterProperty : "lastName",
width : "100px"
}));我们发现，之前写的列其实只是这个列的模板，真正要创建出这个列需要使用sap.ui.table.Column。label属性定义了列名，template定义了使用的模板（和Sencha Touch中很类似）。sortProperty和filterProperty定义了排序、过滤依照的属性。此外还可以通过width等设定样式。这样我们就完成了一列的添加。
对于其他的列，我们也可以使用类似的方法创建组件。比如：
oControl = new sap.ui.commons.RatingIndicator({
value : "{rating}"
});
oTable.addColumn(new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Rating"
}),
template : oControl,
sortProperty : "rating",
filterProperty : "rating"
}));这就创建了一个评分组件，很多网站上都很常用。
我们实现了前端的界面部分后，数据怎么进行绑定呢？
我们先创建一系列的数据data
var aData = [ {
lastName : "Dente",
name : "Al",
checked : true,
rating : 4
}, {
lastName : "Friese",
name : "Andy",
checked : true,
rating : 2
}, {
lastName : "Mann",
name : "Anita",
checked : false,
rating : 3
} ];之后，我们将这些数据封装：
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData({
modelData : aData
});这样，oModel就是一个JSON数据的包，包含我们之前创建的数据。我们将这个数据包应用于我们创建的table中，方法如下:
oTable.setModel(oModel);
这样就可以试下数据的绑定了。
最后将table组件放在页面中相应的位置，利用上次讲过的placeAt方法：
oTable.placeAt("content");
这样就可以了。大家可以先到UI5的api中自己查找各种各样的组件，为table添加更多更能丰富的列。
本文由职坐标整理发布，欢迎关注职坐标WEB前端HTML5/CSS3频道，获取更多WEB前端知识！
喜欢 | 0
不喜欢 | 0
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了，明天再试试吧！
我们会在第一时间安排职业规划师联系您！
您也可以联系我们的职业规划师咨询：
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com，All Rights Reserved.
沪公网安备 31011502005948号
索取资料
答疑解惑
技术交流
职业测评
面试技巧
高薪秘笈
