尽管使用了层次结构注释，UI5 TreeTable仍显示平面层次结构 [英] UI5 TreeTable displays flat Hierarchy despite using Hierarchy-Annotations

查看：22
本文介绍了尽管使用了层次结构注释，UI5 TreeTable仍显示平面层次结构的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我遇到了sap.ui.table.TreeTable的问题。 我的目标是开发一个SAP Fiori应用程序，它显示通过OData V2服务接收的Tree数据。对于此项目，我使用的是SAP Business Application Studio。

以下是我使用的示例以及我希望应用程序的外观：https://sapui5.hana.ondemand.com/#/entity/sap.ui.table.TreeTable/sample/sap.ui.table.sample.TreeTable.BasicODataTreeBinding

这是我的应用程序现在的样子.

如您所见，TreeTable充满了它从我的OData服务获得的信息。我面临的问题是，它只打印元素，而没有将它们按层次顺序排列。

"；Einzelrollen"；元素应该是"；Rollen&Quot；元素的子元素，查看层次结构级别/nodeid/parentNodeId时可以看到这一点。

奇怪的是，Tree-Annotation-Binding似乎正常工作，因为drillState元素按其应有的方式工作-->；langtext"；-元素下面的元素没有"；展开"；选项，因为它们是叶子。

那么，为什么它不能与分层注释元素一起使用呢？ 真的很希望有人能帮我，期待大家的建议！提前感谢！

代码如下：

View.xml

<mvc:View
controllerName="treetable.controller.tableView"
xmlns:mvc="sap.ui.core.mvc"
displayBlock="true"
xmlns="sap.ui.table"
xmlns:m="sap.m">

<TreeTable
    id="treeTable"
    selectionMode="Single"
    enableColumnReordering="false"
    rows="{
        path : '/NodeSet',
        parameters : {
            treeAnnotationProperties : {
                hierarchyLevelFor : 'HierarchyLevel',
                hierarchyNodeFor : 'NodeId',
                hierarchyParentNodeFor : 'ParentNodeID',
                hierarchyDrillStateFor : 'DrillState'
            }
        }
    }">

    <columns>
        <Column label="Description">
            <template>
                <m:Text text="{Description}" wrapping="false" />
            </template>
        </Column>

        <Column label="HierarchyLevel">
            <template>
                <m:Text text="{HierarchyLevel}" wrapping="false" />
            </template>
        </Column>

        <Column label="NodeId">
            <template>
                <m:Text text="{NodeId}" wrapping="false" />
            </template>
        </Column>

        <Column label="ParentNodeID">
            <template>
                <m:Text text="{ParentNodeID}" wrapping="false" />
            </template>
        </Column>

    </columns>
</TreeTable> </mvc:View>

metadata.xml

<?xml version="1.0" encoding="utf-8"?>
<edmx:Edmx Version="1.0" xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:sap="http://www.sap.com/Protocols/SAPData">
    <edmx:DataServices m:DataServiceVersion="2.0">
        <Schema Namespace="Z_ODATA_EXAMPLE_SRV" xml:lang="en" sap:schema-version="1" xmlns="http://schemas.microsoft.com/ado/2008/09/edm">
            <EntityType Name="Node" sap:content-version="1">
                <Key>
                    <PropertyRef Name="NodeId"/>
                </Key>
                <Property Name="NodeId" Type="Edm.Int32" Nullable="false" sap:unicode="false" sap:label="ID" sap:hierarchy-node-for="NodeId"/>
                <Property Name="HierarchyLevel" Type="Edm.Int32" Nullable="false" sap:unicode="false" sap:hierarchy-level-for="NodeId"/>
                <Property Name="ParentNodeID" Type="Edm.Int32" sap:unicode="false" sap:hierarchy-parent-node-for="NodeId"/>
                <Property Name="DrillState" Type="Edm.String" Nullable="false" MaxLength="8" sap:unicode="false" sap:hierarchy-drill-state-for="NodeId"/>
                <Property Name="Description" Type="Edm.String" Nullable="false" MaxLength="80" sap:unicode="false"/>
            </EntityType>
            <EntityContainer Name="Z_ODATA_EXAMPLE_SRV_Entities" m:IsDefaultEntityContainer="true" sap:supported-formats="atom json xlsx">
                <EntitySet Name="NodeSet" EntityType="Z_ODATA_EXAMPLE_SRV.Node" sap:creatable="false" sap:updatable="false" sap:deletable="false" sap:pageable="false" sap:content-version="1"/>
            </EntityContainer>
            <atom:link rel="self" href="https://dae:1234/sap/opu/odata/sap/Z_ODATA_EXAMPLE_SRV/$metadata" xmlns:atom="http://www.w3.org/2005/Atom"/>
            <atom:link rel="latest-version" href="https://dae:1234/sap/opu/odata/sap/Z_ODATA_EXAMPLE_SRV/$metadata" xmlns:atom="http://www.w3.org/2005/Atom"/>
        </Schema>
    </edmx:DataServices>
</edmx:Edmx>

清单.json

{
  "_version": "1.32.0",
  "sap.app": {
    "id": "treetable",
    "type": "application",
    "i18n": "i18n/i18n.properties",
    "applicationVersion": {
      "version": "1.0.0"
    },
    "title": "{{appTitle}}",
    "description": "{{appDescription}}",
    "resources": "resources.json",
    "ach": "ach",
    "dataSources": {
      "mainService": {
        "uri": "/sap/opu/odata/sap/Z_ODATA_EXAMPLE_SRV",
        "type": "OData",
        "settings": {
          "odataVersion": "2.0",
          "localUri": "localService/metadata.xml"
        }
      }
        }
  },
  "sap.ui": {
    "technology": "UI5",
    "icons": {
      "icon": "sap-icon://task",
      "favIcon": "",
      "phone": "",
      "phone@2": "",
      "tablet": "",
      "tablet@2": ""
    },
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },

  "sap.ui5": {
    "flexEnabled": false,
    "rootView": {
      "viewName": "treetable.view.tableView",
      "type": "XML",
      "async": true,
      "id": "tableView"
    },
    "dependencies": {
      "minUI5Version": "1.66.0",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {},
        "sap.ui.layout": {},
        "sap.ui.table": {}
      }
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "models": {
      "i18n": {
        "type": "sap.ui.model.resource.ResourceModel",
        "settings": {
          "bundleName": "treetable.i18n.i18n"
        }
      },
            "testmodel": {
                "type": "sap.ui.model.odata.v2.ODataModel",
                "settings": {
                    "defaultOperationMode": "Server",
                    "defaultBindingMode": "OneWay",
                    "defaultCountMode": "Request"
                },
                "dataSource": "mainService",
                "preload": true
            }
    },
    "resources": {
      "css": [
        {
          "uri": "css/style.css"
        }
      ]
    },
    "routing": {
      "config": {
        "routerClass": "sap.m.routing.Router",
        "viewType": "XML",
        "async": true,
        "viewPath": "treetable.view",
        "controlAggregation": "pages",
        "controlId": "app",
        "clearControlAggregation": false
      },
      "routes": [
        {
          "name": "RoutetableView",
          "pattern": "RoutetableView",
          "target": ["TargettableView"]
        }
      ],
      "targets": {
        "TargettableView": {
          "viewType": "XML",
          "transition": "slide",
          "clearControlAggregation": false,
          "viewId": "tableView",
          "viewName": "tableView"
        }
      }
    }
  }
}

view.Controler.js

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/core/UIComponent",
    "sap/ui/model/odata/v2/ODataModel",
],
    /**
     * @param {typeof sap.ui.core.mvc.Controller} Controller
     */
    function (Controller) {
        "use strict";

        return Controller.extend("treetable.controller.tableView", {
            onInit: function () {
                var oModel = this.getOwnerComponent().getModel("testmodel");
                this.getView().setModel(oModel);

                var oTreeTable = this.getView().byId("treeTable").setModel(oModel);

                oTreeTable.bindRows({
                    path: "/NodeSet", 
                    parameters : {
                        treeAnnotationProperties : {
                            hierarchyLevelFor : 'HierarchyLevel',
                            hierarchyNodeFor : 'NodeId',
                            hierarchyParentNodeFor : 'ParentNodeID',
                            hierarchyDrillStateFor : 'DrillState'} }
                });
            }
        });
    });

推荐答案

您的示例应该可以按照您的预期工作，我已将其转换为运行示例。

我唯一更改的是NodeId更改为NodeID。

但是我建议您删除所有这些行。清单中定义的模型将自动传播：

 var oModel = this.getOwnerComponent().getModel("testmodel");
 this.getView().setModel(oModel);

 var oTreeTable = this.getView().byId("treeTable").setModel(oModel);

也在manifest.xml中写入"；"；，而不是"；testmodel"；。最佳做法是对odata-model使用未命名的模型。

绑定通常是在舍入器匹配某些内容后创建的。在onInit中这样做也不是最好的做法。请参见_onRouteMatched

sap.ui.require([
  "sap/ui/core/util/MockServer"
], function(MockServer) {


  var oMockServer = new MockServer({
    rootUri: "/"
  });
  // simulate against the metadata and mock data
  oMockServer.simulate(`<?xml version="1.0" encoding="utf-8"?>
<edmx:Edmx Version="1.0" xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx" xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:sap="http://www.sap.com/Protocols/SAPData">
    <edmx:DataServices m:DataServiceVersion="2.0">
        <Schema Namespace="Z_ODATA_EXAMPLE_SRV" xml:lang="en" sap:schema-version="1" xmlns="http://schemas.microsoft.com/ado/2008/09/edm">
            <EntityType Name="Node" sap:content-version="1">
                <Key>
                    <PropertyRef Name="NodeID"/>
                </Key>
                <Property Name="NodeID" Type="Edm.Int32" Nullable="false" sap:unicode="false" sap:label="ID" sap:hierarchy-node-for="NodeId"/>
                <Property Name="HierarchyLevel" Type="Edm.Int32" Nullable="false" sap:unicode="false" sap:hierarchy-level-for="NodeId"/>
                <Property Name="ParentNodeID" Type="Edm.Int32" sap:unicode="false" sap:hierarchy-parent-node-for="NodeId"/>
                <Property Name="DrillState" Type="Edm.String" Nullable="false" MaxLength="8" sap:unicode="false" sap:hierarchy-drill-state-for="NodeId"/>
                <Property Name="Description" Type="Edm.String" Nullable="false" MaxLength="80" sap:unicode="false"/>
            </EntityType>
            <EntityContainer Name="Z_ODATA_EXAMPLE_SRV_Entities" m:IsDefaultEntityContainer="true" sap:supported-formats="atom json xlsx">
                <EntitySet Name="NodeSet" EntityType="Z_ODATA_EXAMPLE_SRV.Node" sap:creatable="false" sap:updatable="false" sap:deletable="false" sap:pageable="false" sap:content-version="1"/>
            </EntityContainer>
            <atom:link rel="self" href="https://dae:1234/sap/opu/odata/sap/Z_ODATA_EXAMPLE_SRV/$metadata" xmlns:atom="http://www.w3.org/2005/Atom"/>
            <atom:link rel="latest-version" href="https://dae:1234/sap/opu/odata/sap/Z_ODATA_EXAMPLE_SRV/$metadata" xmlns:atom="http://www.w3.org/2005/Atom"/>
        </Schema>
    </edmx:DataServices>
</edmx:Edmx>`, {

    bGenerateMissingMockData: true
  });
  oMockServer.setEntitySetData("NodeSet", [{
      "__metadata": {
        "uri": "NodeSet('1')"
      },
      "NodeID": 1,
      "HierarchyLevel": 0,
      "Description": "1",
      "ParentNodeID": null,
      "DrillState": "expanded"
    },
    {
      "__metadata": {
        "uri": "NodeSet('2')"
      },
      "NodeID": 2,
      "HierarchyLevel": 0,
      "Description": "2",
      "ParentNodeID": null,
      "DrillState": "expanded"
    },
    {
      "__metadata": {
        "uri": "NodeSet('3')"
      },
      "NodeID": 3,
      "HierarchyLevel": 0,
      "Description": "3",
      "ParentNodeID": null,
      "DrillState": "expanded"
    },
    {
      "__metadata": {
        "uri": "NodeSet('4')"
      },
      "NodeID": 4,
      "HierarchyLevel": 1,
      "Description": "1.1",
      "ParentNodeID": 1,
      "DrillState": "leaf"
    },
    {
      "__metadata": {
        "uri": "NodeSet('5')"
      },
      "NodeID": 5,
      "HierarchyLevel": 1,
      "Description": "1.2",
      "ParentNodeID": 1,
      "DrillState": "expanded"
    }
  ])
  // start
  oMockServer.start();
  const oModel = new sap.ui.model.odata.v2.ODataModel("/");


  sap.ui.controller("view1.initial", {

    onInit: function(oEvent) {
      this.getView().setModel(oModel);
    }

  });

  sap.ui.xmlview("main", {
    viewContent: jQuery("#view1").html()
  }).placeAt("uiArea");
});
<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-debug="false" data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
  <mvc:View controllerName="view1.initial" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.ui.table" xmlns:m="sap.m">

    <TreeTable id="treeTable" selectionMode="Single" enableColumnReordering="false" rows="{
        path : '/NodeSet',
        parameters : {
            treeAnnotationProperties : {
                 hierarchyLevelFor : 'HierarchyLevel',
                    hierarchyNodeFor : 'NodeID',
                    hierarchyParentNodeFor : 'ParentNodeID',
                    hierarchyDrillStateFor : 'DrillState'
            }
        }
    }">

      <columns>
        <Column label="Description">
          <template>
                <m:Text text="{Description}" wrapping="false" />
            </template>
        </Column>

        <Column label="HierarchyLevel">
          <template>
                <m:Text text="{HierarchyLevel}" wrapping="false" />
            </template>
        </Column>

        <Column label="NodeId">
          <template>
                <m:Text text="{NodeID}" wrapping="false" />
            </template>
        </Column>

        <Column label="ParentNodeID">
          <template>
                <m:Text text="{ParentNodeID}" wrapping="false" />
            </template>
        </Column>

      </columns>
    </TreeTable>
  </mvc:View>

</script>

这篇关于尽管使用了层次结构注释，UI5 TreeTable仍显示平面层次结构的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆