Question

我正在从视图＆gt;类别生成面板，因此面板数量未知。因此，我无法将具体的内容分配给他们。

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

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

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

Answer 1

我会通过绑定（将另一个属性“expand”）添加到类别中，类似于：

视图：

<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();
    }
},

并且不要忘记初始化“扩展”属性......

Answer 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());
    }

  });
});

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

2 个答案: