分类导航
程序笔记程序问答

尽管使用了层次结构注释，但 UI5 TreeTable 显示平面层次结构

程序问答   发布时间：2022-06-02  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了尽管使用了层次结构注释，但 UI5 TreeTable 显示平面层次结构，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决尽管使用了层次结构注释，但 UI5 TreeTable 显示平面层次结构？@H_675_1@ 开发过程中遇到尽管使用了层次结构注释，但 UI5 TreeTable 显示平面层次结构的问题如何解决？下面主要结合日常开发的经验，给出你关于尽管使用了层次结构注释，但 UI5 TreeTable 显示平面层次结构的解决方法建议，希望对你解决尽管使用了层次结构注释，但 UI5 TreeTable 显示平面层次结构有所启发或帮助；

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

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

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

尽管使用了层次结构注释，但 UI5 TreeTable 显示平面层次结构

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

“Einzelrollen”元素应该是“Rollen”元素的子元素，正如您在查看层次结构级别/nodEID/parentNodEID 时所看到的。

奇怪的是，Tree-Annotation-Binding 似乎起作用了，因为drillState 元素按其应有的方式运行-->“Langtext”元素下方的元素没有“expand” " 选项，因为它们是叶子。

那么为什么它不适用于分层注释元素？ 真的希望有人能帮助我，期待你们的建议！提前致谢！

代码如下：

视图.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:@R_798_3801@="{Description}" wrapPing="false" />
            </template>
        </column>

        <column label="HIErarchyLevel">
            <template>
                <m:@R_798_3801@="{HIErarchyLevel}" wrapPing="false" />
            </template>
        </column>

        <column label="NodEID">
            <template>
                <m:@R_798_3801@="{NodEID}" wrapPing="false" />
            </template>
        </column>

        <column label="parentNodEID">
            <template>
                <m:@R_798_3801@="{parentNodEID}" wrapPing="false" />
            </template>
        </column>

    </columns>
</Treetable> </mvc:VIEw>

元数据.xml

<?xml version="1.0" enCoding="utf-8"?>
<edmx:Edmx Version="1.0" xmlns:edmx="http://scheR_925_11845@as.microsoft.com/ado/2007/06/edmx" xmlns:m="http://scheR_925_11845@as.microsoft.com/ado/2007/08/dataservices/Metadata" xmlns:sap="http://www.sap.com/Protocols/SAPDAta">
    <edmx:Dataservices m:DataserviceVersion="2.0">
        <scheR_925_11845@a namespace="Z_ODATA_EXAMPLE_SRV" xml:lang="en" sap:scheR_925_11845@a-version="1" xmlns="http://scheR_925_11845@as.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"/>
        </scheR_925_11845@a>
    </edmx:Dataservices>
</edmx:Edmx>
@H_722_2@manifest.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","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.controller.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',hIErarchyDrillStateFor : 'DrillState'} }
                });
            }
        });
    });

解决方法@H_675_1@

您的示例应该按您的预期工作，我将其转换为正在运行的示例。

我唯一改变的是 NodEID 到 NodEID。

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

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

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

也在 @H_261_3@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://scheR_925_11845@as.microsoft.com/ado/2007/06/edmx" xmlns:m="http://scheR_925_11845@as.microsoft.com/ado/2007/08/dataservices/metadata" xmlns:sap="http://www.sap.com/Protocols/SAPDAta">
    <edmx:Dataservices m:DataserviceVersion="2.0">
        <scheR_925_11845@a Namespace="Z_ODATA_EXAMPLE_SRV" xml:lang="en" sap:scheR_925_11845@a-version="1" xmlns="http://scheR_925_11845@as.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"/>
        </scheR_925_11845@a>
    </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,"Description": "2",{
      "__metadata": {
        "uri": "NodeSet('3')"
      },"NodEID": 3,"Description": "3",{
      "__metadata": {
        "uri": "NodeSet('4')"
      },"NodEID": 4,"HierarchyLevel": 1,"Description": "1.1","ParentNodEID": 1,"DrillState": "leaf"
    },{
      "__metadata": {
        "uri": "NodeSet('5')"
      },"NodEID": 5,"Description": "1.2","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:@R_798_3801@="{Description}" wrapping="false" />
            </template>
        </column>

        <column label="HierarchyLevel">
          <template>
                <m:@R_798_3801@="{HierarchyLevel}" wrapping="false" />
            </template>
        </column>

        <column label="NodEID">
          <template>
                <m:@R_798_3801@="{NodEID}" wrapping="false" />
            </template>
        </column>

        <column label="ParentNodEID">
          <template>
                <m:@R_798_3801@="{ParentNodEID}" wrapping="false" />
            </template>
        </column>

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

</script>

大佬总结

以上是大佬教程为你收集整理的尽管使用了层次结构注释，但 UI5 TreeTable 显示平面层次结构全部内容，希望文章能够帮你解决尽管使用了层次结构注释，但 UI5 TreeTable 显示平面层次结构所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：但尽管使用了层次结构注释显示平面层次结构
猜你在找的程序问答相关文章
其他相关热搜词更多
phpJavaPython程序员load中如何string使用参数jquery开发安装listlinuxiosandroid工具javascriptcap