SAPUI5:如何在两个视图之间筛选列表

SAPUI5: How can I filter my list between two views?

本文关键字：两个 视图 之间 列表 筛选 SAPUI5      更新时间：2023-09-26

我有两个XML视图，可以使用路由在它们之间导航。在第一个视图中，我有一个包含工作日的列表，在第二个视图中我想显示与工作日相关的膳食（与ID链接）。现在我只能显示整个列表中的饭菜（未经过滤）。数据来自diet.json。

这是我的代码

您可以使用路由参数（工作日或您提到的id）来传递筛选选项。（看https://sapui5.hana.ondemand.com/#docs/guide/2366345a94f64ec1a80f9d9ce50a59ef.html)然后通过创建一个过滤器：（查看：https://sapui5.hana.ondemand.com/#docs/guide/5295470d7eee46c1898ee46c1b9ad763.html)

我建议您将工作日的名称作为路由参数传递，因为它对用户来说更好看。

这也为您提供了一个优势，即您可以在浏览器中为所选内容添加书签。

//DETAIL.controller.js

sap.ui.define([
    "sap/ui/demo/nav/controller/BaseController"
], function (BaseController) {
    "use strict";
    return BaseController.extend("sap.ui.demo.nav.controller.DETAIL", {
        onInit: function () {
            var oRouter = this.getRouter();
            oRouter.getRoute("meal").attachMatched(this._onRouteMatched, this);
        },
        _onRouteMatched : function (oEvent) {
            var oArgs, oView;
            oArgs = oEvent.getParameter("arguments");
            oView = this.getView();
            var context = new sap.ui.model.Context(oView.getModel(), "/" + oArgs.dayId);
            oView.setBindingContext(context);
            var oItemTemplate =new sap.m.StandardListItem({
                    title:"{items}"
                });
            var oList  = oView.getContent()[0].getContent()[0];
            var oBindingInfo = {
                path:"/meals",
                template: oItemTemplate,
                filters:[
                    new sap.ui.model.Filter("dayId", sap.ui.model.FilterOperator.EQ, oArgs.dayId)
                    ]
            };
            oList.bindAggregation("items",oBindingInfo);                     
        }
    });
});

//DETAIL.view.xml

<mvc:View
  controllerName="sap.ui.demo.nav.controller.DETAIL"
  xmlns="sap.m"
  xmlns:mvc="sap.ui.core.mvc">
  <Page id="mealPage" title="{i18n>Detail}"
    showNavButton="true"
    navButtonPress="onNavBack"
    class="sapUiResponsiveContentPadding">
    <content>
       <List id="mealListID" headerText="Meals" noDataText="Not Found">
    </List>
    </content>
  </Page>
</mvc:View>
相关文章：