SAPUI5 - 展开面板时，如何关闭所有其他面板？答案

【问题标题】：SAPUI5 - When panel is expanded, how do I close all others?SAPUI5 - 展开面板时，如何关闭所有其他面板？
【发布时间】：2018-04-15 06:47:36
【问题描述】：

我正在从视图>类别中生成面板，因此面板的数量是未知的。因此，我无法为他们指定具体的 Id's。

当我展开一个面板时，我需要关闭所有其他面板，那么如何确定其他面板是如何识别以关闭它们的呢？

我不能使用 byId，所以我可以使用 JQuery 搜索吗？

<List id="idList" items="{view>/categories}">
                    <items>
                        <CustomListItem>
                            <Panel expandable="true" expanded="false" headerText="{view>categoryDesc}" onExpand="onExpand">

【问题讨论】：

标签： jquery sapui5 panel

【解决方案1】：

我会通过绑定（添加另一个“扩展”属性）到类别来做到这一点，就像这样：

查看：

<List id="idList" items="{view>/categories}">
    <items>
        <CustomListItem>
            <Panel expandable="true" expanded="{view>expanded}" headerText="{view>categoryDesc}" expand="onExpand" />

控制器：

onExpand: function(oEvent) {
    if (oEvent.getParameters().expand) {
        var oModel = this.getView().getModel("view");
        var aPath = oEvent.getSource().getBindingContext("view").getPath().split("/");
        var selectedIndex = +aPath[aPath.length - 1];
        var aCategories = oModel.getProperty("/categories");
        for (var i = 0; i < aCategories.length; i++) {
            if (i !== selectedIndex) {
                aCategories[i].expanded = false;
            }
        }
        oModel.updateBindings();
    }
},

别忘了初始化“扩展”属性...

【讨论】：

非常感谢！我明天会测试这个:)
唯一的问题是 aCategories 没有 .length 属性。有什么方法可以申请吗？
嗯它来自哪里？是数组吗？
每个都使用了 momentJS。辛苦了！

【解决方案2】：

@SergeiVavilov 为我指明了正确的方向，值得称赞。

这是他的手风琴解决方案的更新版本，其中包含完整的工作代码，它可以联锁多个面板的展开状态，此外还使面板标题也可点击。这使得手风琴处理更加直观。

Plunker 演示：
https://embed.plnkr.co/TXXLm12UvlMKYm7biaWQ/

查看：

<mvc:View xmlns="sap.m" xmlns:f="sap.f" xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" controllerName="demo.controller.Home" displayBlock="true" async="true">
  <Page id="homePage" title="Home">

    <List id="idList" items="{accordion>/accodata}">
      <items>
          <CustomListItem>
              <Panel expandable="true" expanded="{accordion>expanded}" expand="onPanelExpand">
                <headerToolbar>
                  <Toolbar active="true" press="onPanelToolbar">
                    <content>
                      <Text text="{accordion>title}" />
                    </content>
                  </Toolbar>
                </headerToolbar>
                <content>
                  <Text text="{accordion>content}" />
                </content>
              </Panel>
          </CustomListItem>
      </items>
    </List>

  </Page>
</mvc:View>

控制器：

sap.ui.define([
  "sap/ui/core/mvc/Controller"
], function(Controller) {
  "use strict";

  return Controller.extend("demo.controller.Home", {
    onInit: function() {

      var oMyModel = new sap.ui.model.json.JSONModel({
          accodata: [{
            expanded: false,
            title: 'Title A',
            content: 'Content AAA'
          }, {
            expanded: true,
            title: 'Title B (expanded on init)',
            content: 'Content BBB'
          }, {
            expanded: false,
            title: 'Title C',
            content: 'Content CCC'
          }, {
            expanded: false,
            title: 'Title D',
            content: 'Content DDD'
          }]
        }

      );
      this.getView().setModel(oMyModel, "accordion");

    },


    onPanelExpand: function(oEvent) {
      if (oEvent.getParameters().expand) {
        var oModel = this.getView().getModel("accordion");
        var aPath = oEvent.getSource().getBindingContext("accordion").getPath().split("/");
        var selectedIndex = +aPath[aPath.length - 1];
        var aAccordion = oModel.getProperty("/accodata");
        for (var i = 0; i < aAccordion.length; i++) {
          if (i !== selectedIndex) {
            aAccordion[i].expanded = false;
          }
        }
        oModel.updateBindings();
      }
    },

    onPanelToolbar: function(oEvent) {
      var oPanel = oEvent.getSource().getParent();
      oPanel.setExpanded(!oPanel.getExpanded());
    }

  });
});

【讨论】：