面板内的 SAPUI5 过滤列表

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"
            }
        ]
    }
  ]
}

这是我创建的视图的片段，但它不起作用。我认为 "items path" 一定有问题，但我不知道如何修复它。

    <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" 是面板而 "SYSTEMS" 是该面板内的列表的方式实现它？

Answer 1

将第一个列表的路径更改为“{path:'/TECHOPSSet'}”，将第二个列表的路径更改为“{path:'SYSTEMS'}。如果没有进一步的设置，则不应应用到您可以使用缩写形式的绑定，例如“{SYSTEMS}”。再来一个提示。您可以利用属性将自动传播到子组件这一事实，而不是将模型设置到每个控件。

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

面板内的 SAPUI5 过滤列表

SAPUI5 Filtered List inside Panels

xml

data-binding

mobile

json

sapui5