Question

我正在尝试在Eclipse Neon中为SAPUI5项目创建一个层次树表。

我看过以下用于TreeTables的SDK：https://sapui5.hana.ondemand.com/#/sample/sap.ui.table.sample.TreeTable.BasicODataTreeBinding/preview

执行项目时我没有任何乐趣，Chrome浏览器中什么也没有显示。

请在下面查看我的各种代码段，我在哪里出错？

Common.view.xml：

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:tree="sap.ui.table"
        controllerName="testcommon.Common" xmlns:html="http://www.w3.org/1999/xhtml">
<Page>
    <content>

        <tree:TreeTable id="treeTable"
    selectionMode="Single"
    enableColumnReordering="false"
    expandFirstLevel="false"
    rows="{
        path : '/table',
        parameters : {
            countMode: 'Inline',
            treeAnnotationProperties : {
                hierarchyLevelFor : 'HierarchyLevel',
                hierarchyNodeFor : 'NodeID',
                hierarchyParentNodeFor : 'ParentNodeID',
                hierarchyDrillStateFor : 'DrillState'
            }
        }
    }">
    <tree:columns>
        <tree:Column label="Description">
                <Text text="Description"/>
        </tree:Column>
        <tree:Column label="HierarchyLevel">
                <Text text="HierarchyLevel" wrapping="false" />
        </tree:Column>
        <tree:Column label="NodeID">
                <Text text="NodeID" wrapping="false" />
        </tree:Column>
        <tree:Column label="ParentNodeID">
                <Text text="ParentNodeID" wrapping="false" />
        </tree:Column>
  </tree:columns>
</tree:TreeTable>
    </content>
</Page>

Common.controller.js：

sap.ui.controller("testcommon.Common", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf testcommon.Common
*/
	onInit: function() {
		var model1 = new sap.ui.model.json.JSONModel();
		model1.loadData("model/mock.json");
		this.getView().setModel(model1, "model1");	
			
		jQuery.sap.require("sap.m.MessageBox");
	},

index.html：

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
		

		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.ui.commons,sap.m,sap.ui.table"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
				sap.ui.localResources("testcommon");
				var view = sap.ui.view({id:"idCommon1", viewName:"testcommon.Common", type:sap.ui.core.mvc.ViewType.XML});
				view.placeAt("content");
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="content"></div>
	</body>
</html>

mock.json文件，该文件位于WebContent下的文件夹模型中：

{“表格”： [ { “ NodeID”：1 “ HierarchyLevel”：0， “描述”：“ 1”， “ ParentNodeID”：null， “ DrillState”：“展开” }， { “ NodeID”：2 “ HierarchyLevel”：0， “描述”：“ 2”， “ ParentNodeID”：null， “ DrillState”：“展开” }， { “ NodeID”：3， “ HierarchyLevel”：0， “描述”：“ 3”， “ ParentNodeID”：null， “ DrillState”：“展开” }， { “ NodeID”：4 “ HierarchyLevel”：1 “描述”：“ 1.1”， “ ParentNodeID”：1 “ DrillState”：“叶” }， { “ NodeID”：5 “ HierarchyLevel”：1 “描述”：“ 1.2”， “ ParentNodeID”：1 “ DrillState”：“展开” }， { “ NodeID”：6 “ HierarchyLevel”：2 “描述”：“ 1.2.1”， “ ParentNodeID”：5 “ DrillState”：“叶” }， { “ NodeID”：7 “ HierarchyLevel”：2 “描述”：“ 1.2.2”， “ ParentNodeID”：5 “ DrillState”：“叶” }， { “ NodeID”：8 “ HierarchyLevel”：1 “描述”：“ 2.1”， “ ParentNodeID”：2 “ DrillState”：“叶” }， { “ NodeID”：9 “ HierarchyLevel”：1 “描述”：“ 2.2”， “ ParentNodeID”：2 “ DrillState”：“叶” }， { “ NodeID”：10， “ HierarchyLevel”：1 “描述”：“ 2.3”， “ ParentNodeID”：2 “ DrillState”：“叶” }， { “ NodeID”：11 “ HierarchyLevel”：1 “描述”：“ 3.1”， “ ParentNodeID”：3， “ DrillState”：“展开” }， { “ NodeID”：12 “ HierarchyLevel”：2 “描述”：“ 3.1.1”， “ ParentNodeID”：11 “ DrillState”：“展开” }， { “ NodeID”：13 “ HierarchyLevel”：3， “描述”：“ 3.1.1.1”， “ ParentNodeID”：12 “ DrillState”：“叶” }， { “ NodeID”：14 “ HierarchyLevel”：3， “描述”：“ 3.1.1.2”， “ ParentNodeID”：12 “ DrillState”：“叶” }， { “ NodeID”：15 “ HierarchyLevel”：3， “描述”：“ 3.1.1.3”， “ ParentNodeID”：12 “ DrillState”：“叶” }， { “ NodeID”：16 “ HierarchyLevel”：3， “描述”：“ 3.1.1.4”， “ ParentNodeID”：12 “ DrillState”：“叶” } ]}

当将index.html作为Web App Preview运行时，我仅看到一个空白屏幕，并且在Chrome中的F12 Developer工具中没有看到任何错误。请协助。

非常感谢，标记

Answer 1

您只能将treeAnnotationProperties与OData模型一起使用。不适用于JSON模型。

尝试使用不同的结构来构造数据，并使用arrayNames参数将其绑定，如下例所示：

https://sapui5.hana.ondemand.com/#/sample/sap.ui.table.sample.TreeTable.JSONTreeBinding/code

带有XML视图的Eclipse中的SAPUI5 TreeTable

1 个答案: