SAPUI5 (28) - 基于 ODataModel 的排序和分组

最新推荐文章于 2024-05-06 15:57:09 发布
最新推荐文章于 2024-05-06 15:57:09 发布
阅读量2.5k 收藏 5
点赞数 1
分类专栏： # SAPUI5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/stone0823/article/details/66968510
版权

OData 如何排序

OData 支持使用 $orderby 参数实现数据排序。排序的时候有两种顺序：升序 (asc) 和降序 (desc)，默认是升序。我们以 Northwind OData 数据服务为例：

http://services.odata.org/V3/Northwind/Northwind.svc/Products?$orderby=ProductName

查询所有的产品，按 ProductName 排序。在浏览器中输入上面的请求，或者使用 Chrome 的插件 Postman , 可以查看服务器返回的数据。常用的排序参数：

  • 单字段排序，默认升序：/Products?$orderby=ProductName
  • 单字段排序，显式使用升序：/Products?$orderby=ProductName asc
  • 多字段排序, 产品名称升序，类别名称降序：/Products?$ordery=ProductName, Category/CategoryName desc

oDataModel 的实现数据排序

oDataModel 是服务器端模型，排序采用的方法是 sap.ui.model.ListBinding 对象的 sort() 方法触发向服务器端发送 http 请求，服务器端将排序后的数据返回给客户端显示。一般代码如下：

var oListBinding = xxx;
oListBinding.sort(aSorters);

oListBinding.sort() 方法的参数可以是一个 sap.ui.model.Sorter 对象，或者 sap.ui.model.Sorter 的数组。若为单个对象，表示按单一条件排序，如果为数组，表示按多个条件排序。接下来给出示例。要实现的功能如下图：

点击 “供应商ID” 和 “供应商名称”，对相应字段进行排序。因为代码全部放在同一个 html 文件中，所以只贴出 javascript 代码：

// Application model
var sServiceUrl = "https://cors-anywhere.herokuapp.com/" 
                + "http://services.odata.org/V3/Northwind/Northwind.svc/";
var oModel = new sap.ui.model.odata.v2.ODataModel(sServiceUrl);
oModel.setUseBatch(false);
sap.ui.getCore().setModel(oModel);

// 定义两个 Sorter 对象，第二个参数表示是否 Descending
var oIDSorter = new sap.ui.model.Sorter("SupplierID", false);
var oNameSorter = new sap.ui.model.Sorter("CompanyName", false);

// 按 SupplierID 排序
var onSortByID = function(oEvent){
    oIDSorter.bDescending = !oIDSorter.bDescending;
    
    var oTable = sap.ui.getCore().byId("suppliersTable");
    var oListBinding = oTable.getBinding("items"); 				
    oListBinding.sort(oIDSorter);	 
};

// 按 CompanyName 排序
var onSortByName = function(oEvent){
    oNameSorter.bDescending = !oNameSorter.bDescending;
    
    var oTable = sap.ui.getCore().byId("suppliersTable");
    var oListBinding = oTable.getBinding("items"); 				
    oListBinding.sort(oNameSorter); 	
};		

sap.ui.getCore().attachInit(function(){		
    
    var oTable = new sap.m.Table("suppliersTable", {
        width: "auto",
        noDataText: "Loading...",					
        
        // header toolbar
        headerToolbar: new sap.m.Toolbar({
            content: [
                new sap.m.Title({text: "供应商清单"}),
                new sap.m.ToolbarSpacer()
            ]
        }),
        
        // columns
        columns: [
            new sap.m.Column({
                header: new sap.m.Toolbar({
                    content: [
                        new sap.m.Text({text: "供应商ID"}),
                        new sap.m.Button({
                            icon: "sap-icon://sort",
                            press: onSortByID
                        })
                    ]
                })
            }),
            new sap.m.Column({
                header: new sap.m.Toolbar({
                    content: [
                        new sap.m.Text({text: "供应商名称"}),
                        new sap.m.Button({
                            icon: "sap-icon://sort",
                            press: onSortByName
                        })
                    ]
                })
            }),
            new sap.m.Column({
                header: new sap.m.Toolbar({ 
                    content: [new sap.m.Text({text: "城市"})]
                })
            }), 
            new sap.m.Column({
                header: new sap.m.Toolbar({
                    content: [new sap.m.Label({text: "国家"})]
                })
            }),
        ],
        
        // items
        items: {
            path: "/Suppliers",
            sorter: oIDSorter,						
            template: new sap.m.ColumnListItem({
                cells: [
                    new sap.m.Text({text: "{SupplierID}"}),
                    new sap.m.Text({text: "{CompanyName}"}),
                    new sap.m.Text({text: "{City}"}),
                    new sap.m.Text({text: "{Country}"})
                ]
            })						
        }
    });			
    
    var oApp = new sap.m.App({
        pages: [
            new sap.m.Page({
                title: "oDataModel 排序",
                content: [oTable]
            })  
        ]
    });
    
    oApp.placeAt("content");
});

解释一下排序相关的代码：

  • 定义两个 sap.ui.model.Sorter对象，分别按 供应商ID 和 供应商名称 进行升序排列：
var oIDSorter = new sap.ui.model.Sorter("SupplierID", false);
var oNameSorter = new sap.ui.model.Sorter("CompanyName", false);
  • 初始按 供应商ID 进行排序：
var oTable = new sap.m.Table("productTable", {
    ...
    items: {
        path: "/Suppliers",
        sorter: oIDSorter,						
        template: new sap.m.ColumnListItem({
            cells: [
                ...
            ]
        })						
    }
})
  • 如果用户点击 供应商ID 旁边的按钮，则对该字段进行排序：
// 按 SupplierID 排序
var onSortByID = function(oEvent){
    oIDSorter.bDescending = !oIDSorter.bDescending;
    
    var oTable = sap.ui.getCore().byId("suppliersTable");
    var oListBinding = oTable.getBinding("items"); 				
    oListBinding.sort(oIDSorter);	 
};

按供应商名称排序类似。

在 Chrome 浏览器中运行，F12 查看 Network trace，每次排序都向服务器端发送一个 http 请求， Query String Parameter 为 $orderby= XXX：

客户端排序

oData Model是服务器端 Model，按 SAP Help, 不可以在客户端进行排序和筛选：

https://help.sap.com/saphelp_nw74/helpdata/en/e1/b625940c104b558e52f47afe5ddb4f/content.htm

The OData model enables binding of controls to data from OData services. The OData model is a server-side model: the dataset is only available on the server and the client only knows the currently visible rows and fields. This also means that sorting and filtering on the client is not possible. For this, the client has to send a request to the server. The OData model currently supports OData version 2.0.

但每一次排序或者筛选，都需要向服务器提交请求，导致性能比较低，所以 SAP 后来又支持 oData Model (v2) 在客户端的排序和筛选。通过设置 ListBinding 的 OperationMode 来实现。默认情况下，OperationMode 是服务器端模式。

将上面的代码稍作变更：

var oTable = new sap.m.Table("suppliersTable", {
    width: "auto",
    noDataText: "Loading...",	
    ...	

    items: {
        path: "/Suppliers",
        sorter: oIDSorter,
        parameters: {
                operationMode: sap.ui.model.odata.OperationMode.Client
        },
        template: new sap.m.ColumnListItem({
            cells: [...]
        })						
    }

再点击一下排序按钮，是不是快多了呢？

多字段排序

多字段排序，只需要 ListBinding.sort() 的参数为 Sorter 对象的数组即可。比如，下面的示例，在之前代码的基础上，按照国家+公司名的方式进行排序：

var oIDSorter = new sap.ui.model.Sorter("SupplierID", false);
var oNameSorter = new sap.ui.model.Sorter("CompanyName", false);
var oCountrySorter = new sap.ui.model.Sorter("Country", false);

var onMultipleSort = function(oEvent){
    var oTable = sap.ui.getCore().byId("suppliersTable");
        var oListBinding = oTable.getBinding("items"); 	
        oListBinding.sort([oCountrySorter, oNameSorter]);
}

数据分组

new sap.ui.model.Sorter(sPath, bDescending?, vGroup?, fnComparator?)

数据分组 (Grouping) 是一种特殊类型的排序，在 sap.ui.modelSorter 对象实例化时，第三个参数为 true 则，按这个排序的 Path 分组。也可以是一个函数，这个函数获取上下文 (Context) 的值，并按这个上下文的值进行分组。比如，oContext.getProperty("date").getYear() 实现按年度排序。

下面的示例在 UI 中增加一个按钮，点击的时候按国家进行分组，再次点击取消分组：

<!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="../../resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.m"
				data-sap-ui-theme="sap_bluecrystal">
		</script>

		<script>
		
			// Application model
			var sServiceUrl = "https://cors-anywhere.herokuapp.com/" 
			                + "http://services.odata.org/V3/Northwind/Northwind.svc/";
			var oModel = new sap.ui.model.odata.v2.ODataModel(sServiceUrl);
			oModel.setUseBatch(false);
			sap.ui.getCore().setModel(oModel);
			
			// 定义两个 Sorter 对象，第二个参数表示是否 Descending
			var oIDSorter = new sap.ui.model.Sorter("SupplierID", false);
			var oNameSorter = new sap.ui.model.Sorter("CompanyName", false);
			
			// 按 SupplierID 排序
			var onSortByID = function(oEvent){
				oIDSorter.bDescending = !oIDSorter.bDescending;
				
				var oTable = sap.ui.getCore().byId("suppliersTable");
 				var oListBinding = oTable.getBinding("items"); 				
 				oListBinding.sort(oIDSorter);
			};
			
			// 按 CompanyName 排序
			var onSortByName = function(oEvent){
				oNameSorter.bDescending = !oNameSorter.bDescending;
				
				var oTable = sap.ui.getCore().byId("suppliersTable");
 				var oListBinding = oTable.getBinding("items"); 				
 				oListBinding.sort(oNameSorter); 	
			};		
			
			// 按国家分组
			var onGroupByCountry = function(oEvent){
				var oButton = sap.ui.getCore().byId("groupByCountryBtn");
				var action; // 1: 执行分组; 2: 取消分组
								
				if (oButton.getText()=="按国家分组"){
					oButton.setText("取消分组");
					action = 1;
				}else{
					oButton.setText("按国家分组");
					action = 2;
				}
				
				var aSorters = [];
				
				if (action == 1){
				    var vGroup = function(oContext) {
					    var name = oContext.getProperty("Country");
						return {
						     key: name,
						     text: name
						};
				    };
				    
				    var oCountrySorter = new sap.ui.model.Sorter("Country", false, vGroup);
					aSorters.push(oCountrySorter);
				}
				
				// apply sort
				var oTable = sap.ui.getCore().byId("suppliersTable");
 				var oListBinding = oTable.getBinding("items"); 				
 				oListBinding.sort(aSorters); 	
			};
			
			sap.ui.getCore().attachInit(function(){		
				
				var oTable = new sap.m.Table("suppliersTable", {
					width: "auto",
					noDataText: "Loading...",					
					
					// header toolbar
					headerToolbar: new sap.m.Toolbar({
						content: [
							new sap.m.Title({text: "供应商清单"}),
							new sap.m.ToolbarSpacer(),
							new sap.m.Button({
								id: "groupByCountryBtn",
								text: "按国家分组",
								press: onGroupByCountry
							})
						]
					}),
					
					// columns
					columns: [
						new sap.m.Column({
							header: new sap.m.Toolbar({
								content: [
								    new sap.m.Text({text: "供应商ID"}),
								    new sap.m.Button({
								    	icon: "sap-icon://sort",
								    	press: onSortByID
								    })
								]
							})
						}),
						new sap.m.Column({
                			header: new sap.m.Toolbar({
                				content: [
    								new sap.m.Text({text: "供应商名称"}),
    								new sap.m.Button({
    								   icon: "sap-icon://sort",
    								   press: onSortByName
    								})
    							]
							})
            			}),
            			new sap.m.Column({
                			header: new sap.m.Toolbar({ 
                				content: [new sap.m.Text({text: "城市"})]
                			})
            			}), 
            			new sap.m.Column({
                			header: new sap.m.Toolbar({
                				content: [new sap.m.Label({text: "国家"})]
                			})
            			}),
					],
					
					// items
					items: {
						path: "/Suppliers",
						sorter: oIDSorter,
						parameters: {
						      operationMode: sap.ui.model.odata.OperationMode.Client
						},
						template: new sap.m.ColumnListItem({
							cells: [
							    new sap.m.Text({text: "{SupplierID}"}),
								new sap.m.Text({text: "{CompanyName}"}),
								new sap.m.Text({text: "{City}"}),
								new sap.m.Text({text: "{Country}"})
							]
						})						
					}
				});			
				
				var oApp = new sap.m.App({
					pages: [
						new sap.m.Page({
							title: "oDataModel 排序和分组",
							content: [oTable]
						})  
					]
				});
				
				oApp.placeAt("content");
			});			
			
		</script>

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

按国家分组的关键代码如下：

// 按国家分组
var onGroupByCountry = function(oEvent){
    var oButton = sap.ui.getCore().byId("groupByCountryBtn");
    var action; // 1: 执行分组; 2: 取消分组
                    
    if (oButton.getText()=="按国家分组"){
        oButton.setText("取消分组");
        action = 1;
    }else{
        oButton.setText("按国家分组");
        action = 2;
    }
    
    var aSorters = [];
    
    if (action == 1){
        var vGroup = function(oContext) {
            var name = oContext.getProperty("Country");
            return {
                    key: name,
                    text: name
            };
        };
        
        var oCountrySorter = new sap.ui.model.Sorter("Country", false, vGroup);
        aSorters.push(oCountrySorter);
    }
    
    // apply sort
    var oTable = sap.ui.getCore().byId("suppliersTable");
    var oListBinding = oTable.getBinding("items"); 				
    oListBinding.sort(aSorters); 	
};

源代码

28_zui5_odata_filter_sort_group

References

stone0823
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
sort与二分法
helongyang的专栏
12-10 759
1.  Sort中的排序的问题    abap默认的排序是升序的    如果要降序呢，我们就需要加一个DESCENDING 关键字，如：   (a) SORT gt_gifl DESCENDING by vbeln tplnr.   (b) SORT gt_gifl  by vbeln tplnr DESCENDING.   关键字DESCENDING 所在的位置不一样，会导致排序结果不
sapui5-reference:SAPUI5代码示例供快速参考
05-02
标题" sapui5-reference "暗示了这是一个关于SAPUI5的代码参考资源，可能包含多个示例和代码片段，帮助开发者快速查找和理解如何使用SAPUI5的各种功能。 描述中提到的"Mega速查表"通常是指一个全面的、组织有序的...
SAP 关于DELETE的用法
matinal 當冬夜漸暖 。公众号：matinal
04-10 973
3、可以使用指定条件进行比较处理 COMPARING ... ，此时，需要所有指定字段在相邻处相同，否则不会删除。发现delete duplicate只删除相邻行的重复项，保留第一条记录，所以在对内表进行delete duplicate。1、如果没有定义non-nuique键，并且在删除的时候没有指定条件，则将比较所有的字段；2、如果有non-unique键，则在没有删除的比较条件时比较该key，删除相邻的重复项。如果对比较的字段进行了事先的排序，则可以将所有该字段重复的行全部删除。
SAPUI5 (25) - 了解 OData 和 OpenUI5 的 OData Model
王敏的专栏
03-10 6062
本篇介绍几个比较重要的概念，REST 和 OData，并介绍 OpenUI5 OData model的基本使用方法。
SAPUI5基础知识1 - 概览，库，支持工具，自学教程
最新发布
SAP领域技术博客
05-06 1323
本文介绍了SAPUI5的基础概念，常用库，调试工具和支持工具，同时给出了自学SAPUI5的demo教程的访问方式。
SAP ODATA动态排序使用
大步甩起来
03-22 355
ODATA入参orderby到gui端时，会到函数提供的internal table (it_order)中。 这样我们用正常的sort语句是行不通的，不过SAP提供了另外一种方法 可以看到该结构提供了DESCENDING字段 X为降序 space 为升序， NAME则是字段名，根据这种方法则可以根据ODATA入参多字段进行排序 ...
SAPUI5 (13) - 数据绑定之聚合绑定(aggregation binding)
王敏的专栏
01-14 4914
属性绑定用于绑定单条数据。如果需要绑定多条数据，则需要使用聚合绑定(aggregation binding)，比如我们常见的ListBox, Combox或者表格，都是含有多条数据的。概念比较容易理解，关键是绑定的语法。本文介绍aggregation binding的语法和要点
ui5-cap-event-app:在自由式SAPUI5应用程序和SAP Fiori elements应用程序中以草稿模式展示SAP Cloud Application Programming Model和OData V4
04-29
该应用程序由三部分组成：以自由式SAPUI5实现的最终用户UI，使用Fiori元素生成的元数据驱动的管理员UI和基于Node.js的CAP后端。 虽然代码实现了完整的端到端全栈应用程序，但它应保持尽可能的简单，并且主要重点是...
sapui5-grunt：用于SAPUI5 CI的package.json和Gruntfile.js
01-31
SAPUI5项目中的Gruntfile.js和npm package.json。 应用程序文件必须位于webapp文件夹中。 但是，可以在Gruntfile.js中更改名称和路径。 安装 安装Node.js以获取npm。 安装咕unt声： npm install -g grunt-cli ...
SAP UI5 OData开发
08-29
SAP UI5作为前端开发框架，使用SAP Gataway开发后端OData Service
SAPUI5-OData-V4:为学习目的而创建的SAPUI5应用程序，特别是为了了解如何访问，修改，聚合和过滤OData V4模型中的数据
04-03
2. **数据访问**：在SAPUI5中，可以通过`sap.ui.model.odata.v4.ODataModel`来创建和实例化OData V4模型。通过这个模型，可以轻松地读取数据集，获取单个实体，或者执行查询。 3. **数据绑定**：SAPUI5的核心功能之...
SAPUI5 (29) - 使用 ViewSettingsDialog 实现排序分组和筛选
王敏的专栏
04-04 2172
应用程序的筛选、排序和分组必不可少。为简化开发的工作量，SAPUI5 做了几个通用控件，包括 OpenUI5 的 sap.m.ViewSettingsDialog 和 SAPUI5 的 Smart Filter Toolbar。本篇介绍 `ViewSettingsDialog` 如何帮助在 UI 中实现数据的筛选、排序和分组。
SAPUI5-List
Liuyingao_dao的专栏
07-16 1283
SAPUI5-List
Fiori2.0-在SAPUI5中控制一个“块”的隐藏与显示：setVisible
期待一个富婆
12-21 1054
在开发中，我们可能会遇到像通过控制一些控件来跳转两个部分极为相似的页面。如果通过路由的跳转则会造成view的滥用，为路由增添负担，影响加载效率。或者可以通过一个view两个fragment来切换部分不相似的部分。但是今天我介绍的方法要比上面两个都要简单实用，我们可以想到就是利用类似JS中的display属性，但是SAPUI5并不支持原生JS，那么我们该如何实现呢？
ALV_GRID介绍
cqxl70537的博客
06-02 528
一.ALV介绍 The ALV Grid Control (ALV = SAP List Viewer)是一个显示列表的灵活的工具,它提供了基本功能的列表操作,也可以通过自定义来进行增强,因此可以允许你可以在大型的应用程序中...
SAPUI5学习第十天-----（14）Custom Formatters自定义格式化
'尤其是十月的风'的博客
07-15 394
Custom Formatters 如果我们想用更复杂的逻辑来格式化数据模型的属性，我们还可以编写自定义格式化函数。现在，我们将使用自定义格式化程序添加本地化状态，因为数据模型中的状态是一种技术性很强的格式。 Coding webapp/model/formatter.js (新建) sap.ui.define([], function () { "use strict"; return { statusText: function (sStatus) { var resourceBund
SAPUI5学习第五天-----（08）页面控件：Pages and Panels，Shell Control as Container，Margins and Paddings
'尤其是十月的风'的博客
06-11 409
Pages and Panels 官网代码 在完成了所有关于应用结构的工作之后，是时候改善我们的应用的外观了。我们将使用来自sap.m库的两个控件来为我们的UI添加更多的“bling”。在此步骤中，您还将了解有关控件聚合的知识。 先看效果吧 上一步的： 这一步的：现在有一个面板显示前面步骤中的控件 代码： webapp/view/App.view.xml <mvc:View controllerName="sap.ui.demo.walkthrough.controller.App"
SAP UI5 初学 ( 一 )、简介
weixin_42646630的博客
06-23 3121
SAPUI5
Fiori2.0学习笔记-UI5 of Table & List
期待一个富婆
11-16 1498
List和Table是两个在fiori中经常用到的两个布局方式
sapui5 详情页如何绑定odata返回的数据
01-01
在SAPUI5中，要绑定ODATA返回的数据到详情页，可以通过以下步骤实现： 1. 第一步是创建一个详情页的视图和控制器。在视图中，定义一个绑定到ODATA返回数据的模型。可以使用`sap.ui.model.odata.v2.ODataModel`来创建一个ODATA模型，然后在控制器中设置这个模型。同时，在视图中定义好需要展示ODATA数据的属性和控件。 2. 在控制器中，通过ODATA模型发起一个读取数据的请求。可以使用`read`方法传入需要读取数据的URL和参数，然后在成功回调函数中获取返回的数据，并将数据绑定到视图上。 3. 将ODATA返回的数据绑定到视图的属性或控件上，可以使用`bindElement`方法将数据与视图中的某个元素进行绑定。在这个方法中，可以传入需要绑定数据的路径，然后将返回的数据与视图进行关联。 4. 最后，在视图中使用绑定的方式展现ODATA返回的数据。可以通过使用`{{}}`插值的方式将数据展示在文本控件中，或者使用`items`和`template`的方式将数据展示在列表控件中。 通过以上步骤，就可以在SAPUI5的详情页中成功绑定ODATA返回的数据，实现数据的展示和交互功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值