SAPUI5（29）-使⽤ViewSettingsDialog实现排序分组和筛选
应⽤程序的筛选、排序和分组必不可少。为简化开发的⼯作量，SAPUI5 做了⼏个通⽤控件，包括 OpenUI5 的 ViewSettingsDialog
和 SAPUI5 的 Smart Filter Toolbar (只在 SAPUI5 中， OpenUI5 中没有)。基本上，ViewSettingsDialog 能够满⾜常规需求。本篇介绍 ViewSettingsDialog 如何帮助在 UI 中实现数据的筛选、排序和分组。
应⽤的界⾯如下：
当点击这个按钮，弹出对话框。第⼀个界⾯是排序，可以按照 Table 的所有字段，进⾏升序或降序排序。
点击切换到筛选，我们设置为允许按照【城市】进⾏筛选：
点击城市，可以看到涉及的所有城市，允许勾选：
切换到分组，设置为按【国家】进⾏分组：
应⽤代码的结构：
index.html
创建⼀个 App 的实例， App 包含⼀个 xmlView 的实例：
<!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-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{"webapp": "./"}'
data-sap-ui-theme="sap_bluecrystal">
</script>
<script>
var oApp =App({
pages:[lview("appView","webapp.view.Table")]
});
oApp.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
l
这是⼀个 View ⽂件，⽤于展⽰界⾯。View 中包含⼀个 Table，有【供应商ID】，【供应商名称】，【地址】，【城市】和【国家】五列。绑定到 Suppliers:
<core:View xmlns:core=""
xmlns:mvc="vc"
xmlns="sap.m"
controllerName="ller.Table"
xmlns:html="/1999/xhtml">
<Page title="排序，分组和筛选">
<content>
<Table items="{/Suppliers}" id="idTable" inset="true">
<headerToolbar>
<Toolbar>
<Title level="H2" text="供应商清单"/>
<ToolbarSpacer />
<Button press="onTableSettings"
icon="sap-icon://drop-down-list"/>
</Toolbar>
</headerToolbar>
<columns>
<Column id="SupplierID">
<Text text="供应商ID"/>
</Column>
<Column id="CompanyName">
<Text text="供应商名称"/>
</Column>
<Column id="Address">
<Text text="地址"/>
</Column>
<Column id="City">
<Text text="城市"/>
</Column>
<Column id="Country">
<Text text="国家"/>
</Column>
</columns>
<items>
<ColumnListItem >
<cells>
<ObjectIdentifier title="{SupplierID}"/>
<Text text="{CompanyName}"/>
<Text text="{Address}"/>
<Text text="{City}"/>
<Text text="{Country}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
view ui框架
</core:View>
l
这是⼀个 OpenUI5 的 Fragement ⽂件。新建的时候，新建⼀个⽂件，然后输⼊下⾯的内容。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。