这回研究了一下UI5中的fragment 各种过滤器以及odata提供的API，根据这回在git上clone下来的demo,并且我结合了上一篇博客加入了UI组件化以及路由配置实现了产品细节查看效果，总体来说还可以，稍微有些不足的地方我会找时间再继续研究一下
按照惯例，我还是把整个页面都放进了Shell组件中，界面我反正感觉还是美观了不少的，虽然没有了全屏显示数据的感觉，因为我使用了官方提供的API，并且，我在两个controller中都加载了一次，所以查看细节和全览的功能都会有点延迟，最开始作者的代码我貌似是找不着了，等我找到了会回来再编辑一次加上去，首先附上目录结构 这次很多文件都没有用上，所以我就不展开了，多语言环境大家可以根据我前面的博客进行配置，玩一次就好了，不用次次都玩吧= =
当然还是老规矩，重新温习一遍套路
在manifest.json中配置路由信息，加入层级，命名路由，指定模式以及要传递的数据编写App.view.xml，配置根路由，然后让首页先行现实在根目录上编写各自的controller，并且把获取到的API加载到model里
这次主要还是研究一下过滤器以及fragment的奥妙
Table.controller.js
sap.ui.define(["sap/ui/core/mvc/Controller", "sap/ui/model/odata/v2/ODataModel", "sap/ui/model/json/JSONModel", "sap/ui/model/Sorter", "sap/ui/model/Filter", "sap/ui/core/UIComponent" ], function (Controller, ODataModel, JSONModel, Sorter, Filter, UIComponent) { "use strict"; return Controller.extend("webapp.controller.Table", { // ------------------------------- // Initialization event // ------------------------------- onInit: function () { // Application model var sServiceUrl = "https://cors-anywhere.herokuapp.com/" + "http://services.odata.org/V3/Northwind/Northwind.svc/"; //从odata官方提供的API中获取到数据，服务器名为northwind var oModel = new ODataModel(sServiceUrl); oModel.setUseBatch(false); this.getView().setModel(oModel); }, onListPress: function(event) { var oRouter = UIComponent.getRouterFor(this); var oItem = event.getSource(); var sPath = oItem.getBindingContext(); //MessageToast.show(sPath); oRouter.navTo("Page", { SuppliersPath: encodeURIComponent(sPath) }); }, // --------------------------------------------- // 设置 Table 的 排序，分组和筛选 // 由于分组和筛选都是改变了下面表格的格局，所以我们要新建立一个数组去储存结果集 // --------------------------------------------- onTableSettings: function () { var oDialog = this.getView().byId("SettingsDialog"); //这个id不代表标签ID，代表的是fragment的名称 if (!oDialog) { oDialog = sap.ui.xmlfragment("webapp.view.SettingsDialog", this); } //声明路径 oDialog.open(); }, onConfirm: function (oEvent) {//fragment中的方法 var oBinding = this.getView().byId("idTable").getBinding("items");//获取需要排序的整个table的列表items绑定值 var mParams = oEvent.getParameters();//获取点击事件中的值，用if判断点击按钮所提供的类型 // Apply grouping分组 var aSorters = []; if (mParams.groupItem) { var sGroupKey = mParams.groupItem.getKey();//key详见fragment的标签中，代表了排序所遵循的标准 var bDescending = mParams.groupDescending; aSorters.push(new Sorter(sGroupKey, bDescending, true)); } // Apply sorter排序 if (mParams.sortItem) { var sSortKey = mParams.sortItem.getKey(); aSorters.push(new Sorter(sSortKey, bDescending)); //由于js特性，所以var声明后的变量相当于全局变量，在这里不需要再次声明bDescending } oBinding.sort(aSorters); // Apply filters筛选 var aFilters = []; if (mParams.filterItems) { var count = mParams.filterItems.length;//遍历筛选过后的数组长度 for (var i = 0; i < count; i++) { var oFilterItem = mParams.filterItems[i]; var oFilter = new Filter(oFilterItem.getKey(), sap.ui.model.FilterOperator.EQ, oFilterItem.getText()); aFilters.push(oFilter); } } oBinding.filter(aFilters); } // end of onConfirm }); });SettingsDialog.fragment.xml
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m"> <ViewSettingsDialog confirm="onConfirm"> <!--已经在controller中定义方法onConfirm--> <sortItems> <ViewSettingsItem selected="true" key="CompanyName" text="供应商名称" /> <ViewSettingsItem key="City" text="城市" /> </sortItems> <groupItems> <ViewSettingsItem key="Country" text="国家"/> </groupItems> <filterItems> <ViewSettingsFilterItem text="城市" key="City"> <items> <ViewSettingsItem key="City" text="Tokyo"/> <ViewSettingsItem key="City" text="London"/> <ViewSettingsItem key="City" text="Manchester"/> </items> </ViewSettingsFilterItem> </filterItems> </ViewSettingsDialog> </core:FragmentDefinition>我们先来看Fragment中的写法，用了一个dialog的标签声明了是弹出框的形式，然后每个选项当中，都有一个key选项，这个key是要与odata中的数据项保持一致的，作为筛选的依据，text就是筛选的呈现文字，这边作者非常贴心，分别使用了三种过滤并且写出了单选复选两种模式，当然这么多代码注释都是我后来补上去的= =
方法类我代码里面注释的很详细了，我就不细说了，下面说说这个API的问题
onInit: function () { // Application model var sServiceUrl = "https://cors-anywhere.herokuapp.com/" + "http://services.odata.org/V3/Northwind/Northwind.svc/"; //从odata官方提供的API中获取到数据，服务器名为northwind var oModel = new ODataModel(sServiceUrl); oModel.setUseBatch(false); this.getView().setModel(oModel); },我们先进第一段URL看看 可以看到这是官方的一段示例说明，而且注明这个API是可以被使用的，有贴上了示例链接 再进第二个URL看一看 可以看到这里面已经都是数据了，每个带有href的标签都是一个数据源，我们可以右键查看源代码，然后点击href中的链接，就可以看到相应的xml源码，如果觉得看不清可以复制去网上找一下xml转json工具，就可以看到里面完整格式的数据细节，这里我用的是Supplisers表
细节不多说，我直接在最后附上源码大家自行查看即可 路由配置以及细节查看教程 博客源码
