面板内部的SAPUI5过滤列表

Question

我正在尝试创建一个页面，它需要一个包含过滤列表的Panel。

我之前拥有的是“组”和“系统”的单独JSON文件，但随后将它们合并到一个。

下面是我的新JSON文件：

{
  "TECHOPSSet" : [
    {
        "GROUP" : "1",
        "SYSTEMS": [
            {
              "SysID" : "sys1",
              "SysDesc" : "System1",
              "Availability" : "1",
              "Performance" : "1",
              "Exception" : "3",
              "Configuration" : "2"
            }
        ]
    },   
    {
        "GROUP" : "2",
        "SYSTEMS": [
            {
              "SysID" : "sys2",
              "SysDesc" : "System2",
              "Availability" : "1",
              "Performance" : "1",
              "Exception" : "3",
              "Configuration" : "2"
            },
                        {
              "SysID" : "sys3",
              "SysDesc" : "System3",
              "Availability" : "2",
              "Performance" : "1",
              "Exception" : "2",
              "Configuration" : "3"
            }
        ]
    },    
    {
        "GROUP" : "3",
        "SYSTEMS": [
            {
              "SysID" : "sys4",
              "SysDesc" : "System4",
              "Availability" : "1",
              "Performance" : "1",
              "Exception" : "1",
              "Configuration" : "1"
            },
            {
              "SysID" : "sys5",
              "SysDesc" : "System5",
              "Availability" : "2",
              "Performance" : "2",
              "Exception" : "3",
              "Configuration" : "1"
            },
            {
              "SysID" : "sys6",
              "SysDesc" : "System6",
              "Availability" : "1",
              "Performance" : "1",
              "Exception" : "2",
              "Configuration" : "3"
            }
        ]
    },    
    {
        "GROUP" : "4",
        "SYSTEMS": [
            {
              "SysID" : "sys7",
              "SysDesc" : "System7",
              "Availability" : "1",
              "Performance" : "1",
              "Exception" : "3",
              "Configuration" : "2"
            }
        ]
    },
        {
        "GROUP" : "5",
        "SYSTEMS": [
            {
              "SysID" : "sys8",
              "SysDesc" : "System8",
              "Availability" : "1",
              "Performance" : "1",
              "Exception" : "3",
              "Configuration" : "2"
            }
        ]
    }
  ]
}

以下是我提出的不起作用的观点的一部分。我想一定有什么“物品路径”，但我不知道如何修复它。

    <core:FragmentDefinition xmlns:l="sap.ui.layout"
xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core" xmlns="sap.m">

<List id="homelistID" items="{ path: '/TECHOPSSet/GROUP' }" >
    <items>
        <CustomListItem type="Inactive">
            <Panel id="homePanelID" expandable="true" expanded="false" headerText="{GROUP}">
                <Toolbar height="2rem">
                    <Text text="Technical" />
                    <ToolbarSpacer />
                    <Text text="Monitoring" />
                    <ToolbarSpacer />
                    <Text text="Business" />
                </Toolbar>
                    <List id="techopsListID" items="{ path: '/TECHOPSSet/SYSTEMS'}">
                        <items>
                            <CustomListItem type="Active">
                                <l:HorizontalLayout>
                                    <Image src="{parts: ['Availability', 'Performance', 'Exception'] , formatter: 'sap.ui.proj.util.Formatter.techMonSummary'}" />
                                    <Text text="{SysDesc}" />
                                    <!--<Image src="{parts: ['enter BizOps parts here'] , formatter: 'sap.ui.proj.util.Formatter.bizMonSummary'}" /> -->
                                </l:HorizontalLayout>
                            </CustomListItem>
                        </items>
                    </List>
            </Panel>
        </CustomListItem>
    </items>
</List>

​

这是我的控制器片段..。

    onInit : function() {
    var homePage = this.getView().byId("homePage");

    var oPanelGroup = new sap.ui.model.json.JSONModel(
            "model/panelgroup.json");
    var oPanelItems = new sap.ui.model.json.JSONModel(
            "model/TECHOPSSet.json");

    var HomePanel = sap.ui.xmlfragment("sap.ui.proj.fragment.HomePanel");

    //      sap.ui.getCore().byId("homelistID").setModel(oPanelGroup);
    sap.ui.getCore().byId("homelistID").setModel(oPanelItems);
    console.log(oPanelGroup);

    sap.ui.getCore().byId("techopsListID").setModel(oPanelItems);
    console.log(oPanelItems);

    homePage.addContent(HomePanel);
    },

因此，基本上，如何在SAPUI5中实现这一点，使“组”是面板，而“系统”是该面板中的列表？

Answer 1

将第一个列表的路径更改为"{ path：'/TECHOPSSet‘}“，将第二个列表的路径更改为"{ path：'SYSTEMS'}”。如果不对绑定应用进一步的设置，则可以使用简短的形式，例如"{SYSTEMS}“。再一条提示。与将模型设置为每个控件不同，您只需利用属性将自动传播到子组件的事实。

 var view = this.getView();
 view.setModel(oPanelItems);
 view.addDependent(HomePanel);