OData demo

1 , OData source

(1) Eclipse CDS

@AbapCatalog.sqlViewName: 'ZCDS_DEMO01_VIEW'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'CDS DEMO - ZTEST001'
@OData.publish: true   --OData services ==> /IWFND/MAINT_SERVICE 添加服務，激活
[email protected]: true
define view Zcds_Demo01 as select from ztest001 {
    key mandt as Mandt,
    key fld1  as Fld1,
    fld2      as Fld2,
    fld3      as Fld3
} 

(2) T-CODE : SEGW 

     實現 服務 （Service Implementation>>Right click>>Go to ABAP Workbench>>Method>>Inherited Methods）

2 , demo

view

<mvc:View
	controllerName="ZFIORI.controller.GridOData"
	xmlns="sap.ui.table"
	xmlns:mvc="sap.ui.core.mvc"
	xmlns:u="sap.ui.unified"
	xmlns:c="sap.ui.core"
	xmlns:m="sap.m">
	<m:Page class="sapUiContentPadding" showHeader="false" enableScrolling="false">
		<m:content>
			<Table id="Products"
				selectionMode="MultiToggle"
				enableCellFilter="{ui>/cellFilterOn}"
				ariaLabelledBy="title"
				sort="sortTable"
				rows="{/ZCDS_DEMO01Set}"
				visibleRowCount="20">
				<toolbar>
					<m:Toolbar>
						<m:Title id="title" text="Products"></m:Title>
						<m:ToolbarSpacer/>
						<m:Button
							icon="sap-icon://decline" 
							tooltip="Clear all filters"
							press="clearAllFilters"/>
						<m:SearchField
							placeholder="Filter"
							value="{ui>/globalFilter}"
							search="filterGlobally"
							width="15rem"/>
					</m:Toolbar>
				</toolbar>
				<columns>
					<Column width="5rem" filterProperty="Fld1" filterType="sap.ui.model.type.String" sortProperty="Fld1">
						<m:Label text="Product Key" />
						<template>
							<m:Text text="{Fld1}"/>
						</template>
					</Column>
					<Column width="10rem" filterProperty="Fld2" filterType="sap.ui.model.type.String" sortProperty="Fld2">
						<m:Label text="Product desc" />
						<template>
							<m:Text text="{Fld2}"/>
						</template>
					</Column>
					<Column width="10rem" >
						<m:Label text="Product Qty" />
						<template>
							<m:Text text="{Fld3}"/>
						</template>
					</Column>
				</columns>
            </Table>
		</m:content>
	</m:Page>
</mvc:View>

controller

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/odata/v2/ODataModel",
	"sap/ui/model/Filter",
	"sap/ui/model/FilterOperator",
	"sap/ui/model/Sorter"
], function(Controller,ODataModel,Filter,FilterOperator,Sorter) {
	"use strict";
 
	//var sServiceUrl =  "https://<host>:<port>/sap/opu/odata/sap/<ServiceName>/";
	//"/proxy/https/<host>:<port>/sap/opu/odata/sap/<ServiceName>/";
	
	return Controller.extend("ZFIORI.controller.GridOData", {
		onInit : function () {
		 // - 同源是可以正常使用 --跨域無法訪問  (url前加proxy沒有解決此問題)
		//var oModel = new ODataModel(sServiceUrl, true);
		//var oTable = this.getView().byId("Products");
    		//oTable.setModel(oModel);
		//oTable.bindRows("/ZCDS_DEMO01Set");      //數據集
			
		//需要有 MANIFEST.JSON 文件  與  COMPONENT.JS 文件
		  var oModel = this.getOwnerComponent().getModel();
            oModel.setUseBatch(false);
            
            var oTable = this.getView().byId("Products");
            oTable.setModel(oModel,"ui");
            oTable.bindRows("/ZCDS_DEMO01Set");
            
		  this._oGlobalFilter = null;
		},
		_filter : function () {
			var oFilter = null;
			oFilter = this._oGlobalFilter;
			this.getView().byId("Products").getBinding("rows").filter(oFilter, "Application");
		},
		filterGlobally : function(oEvent) {
			var sQuery = oEvent.getParameter("query");
			this._oGlobalFilter = null;
 
			if (sQuery) {
				this._oGlobalFilter = new Filter([
					new Filter("Fld1", FilterOperator.Contains, sQuery),
					new Filter("Fld2", FilterOperator.Contains, sQuery)
				], false);
			}
			this._filter();
		},
		sortTable : function(oEvent) {
			var oCurrentColumn = oEvent.getParameter("column");
			var sOrder = oEvent.getParameter("sortOrder");
			var oSorter = new Sorter(oCurrentColumn.getSortProperty(), sOrder === "Descending");
			this.getView().byId("Products").getBinding("rows").sort(oSorter);
		},
		clearAllFilters : function() { //oEvent
			var oTable = this.getView().byId("Products");
			
			var oUiModel = this.getView().getModel("ui");
			oUiModel.setProperty("/globalFilter", "");
 
			this._oGlobalFilter = null;
			this._filter();
			
			oTable.getBinding("rows").sort(null);
 
			var aColumns = oTable.getColumns();
			for (var i=0; i<aColumns.length; i++) {
				oTable.filter(aColumns[i], null);
				aColumns[i].setSorted(false);
			}
		}
	});
});

model

--

component

sap.ui.define(['sap/ui/core/UIComponent'],
	function(UIComponent) {
	"use strict";
	var Component = UIComponent.extend("ZFIORI.GridOData.Component", {
		metadata : {
			//rootView : "ZFIORI.view.GridOData"
			manifest : "json"
		}
	});
	return Component;
});

index.html

		<script>
			sap.ui.getCore().attachInit(function() {
				new sap.m.App ({
					pages: [
						new sap.m.Page({
							title: "Icon Tab Bar - Filter", 
							enableScrolling : true,
							content: [ new sap.ui.core.ComponentContainer({
								name : "ZFIORI.GridOData"
							})]
						})
					]
				}).placeAt("content");
			});
		</script>