Question

我正在尝试创建一个页面，里面需要一个带过滤列表的面板。

我之前拥有的是“GROUPS”和“SYSTEMS”的单独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中实现这一点，以便“GROUPS”是Panels，而“SYSTEMS”是该面板内的列表？

Answer 1

将第一个列表的路径更改为＆＃34; {path：＆＃39; / TECHOPSSet＆＃39; }＆＃34;以及第二个到＆＃34; {路径：＆＃39; SYSTEMS＆＃39;}的路径。如果没有进一步的设置应用于绑定，您可以使用简短形式，例如＆＃34; {SYSTEMS}＆＃34 ;. 还有一点提示。您可以使用属性自动传播到子组件的事实，而不是将模型设置为每个控件。

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

面板内的SAPUI5过滤列表

1 个答案: