页面效果可展开折叠
view/TreeTable.view.xml
<mvc:ViewcontrollerName="your.path.process.TreeTable"xmlns="sap.ui.table"xmlns:m="sap.m"xmlns:mvc="sap.ui.core.mvc"><TreeTableid="treeTable"selectionMode="Single"visibleRowCount="10"enableColumnReordering="false"expandFirstLevel="true"rows="{path: '/Nodes',parameters: {arrayNames: ['Nodes']}}"><columns><Column label="Description" width="200px"><template><m:Text text="{Description}" wrapping="false" /></template></Column><Column label="HierarchyLevel" width="120px"><template><m:Text text="{HierarchyLevel}" wrapping="false" /></template></Column><Column label="NodeID" width="100px"><template><m:Text text="{NodeID}" wrapping="false" /></template></Column><Column label="ParentNodeID" width="120px"><template><m:Text text="{ParentNodeID}" wrapping="false" /></template></Column></columns></TreeTable>
</mvc:View>
controller/TreeTable.controller.js
sap.ui.define(["sap/ui/core/mvc/Controller",'sap/ui/model/json/JSONModel','your.path/utils/common'
], function(Controller, JSONModel, common) {"use strict";return Controller.extend("your.path.controller.process.TreeTable", {onInit: function() {let me = this,oView = me.getView();// 构建树形结构数据let hierarchicalData = this._buildHierarchicalData();let oModel = new JSONModel(Object.assign({Nodes: hierarchicalData}, common.getDeCodeUrlObj()));oView.setModel(oModel);},_buildHierarchicalData: function() {// 原始平铺数据let flatData = [{"NodeID": 1,"Description": "1","ParentNodeID": null,},{"NodeID": 2,"Description": "2","ParentNodeID": null,},{"NodeID": 3,"Description": "3","ParentNodeID": null,},{"NodeID": 4,"Description": "1.1","ParentNodeID": 1,},{"NodeID": 5,"Description": "1.2","ParentNodeID": 1,},{"NodeID": 6,"Description": "1.2.1","ParentNodeID": 5,},{"NodeID": 7,"Description": "1.2.2","ParentNodeID": 5,},{"NodeID": 8,"Description": "2.1","ParentNodeID": 2,},{"NodeID": 9,"Description": "2.2","ParentNodeID": 2,},{"NodeID": 10,"Description": "2.3","ParentNodeID": 2,},{"NodeID": 11,"Description": "3.1","ParentNodeID": 3,},{"NodeID": 12,"Description": "3.1.1","ParentNodeID": 11,},{"NodeID": 13,"Description": "3.1.1.1","ParentNodeID": 12,},{"NodeID": 14,"Description": "3.1.1.2","ParentNodeID": 12,},{"NodeID": 15,"Description": "3.1.1.3","ParentNodeID": 12,},{"NodeID": 16,"Description": "3.1.1.4","ParentNodeID": 12,}];// 将平铺数据转换为树形结构return this._convertToHierarchical(flatData);},_convertToHierarchical: function(flatData) {let hierarchicalData = [];let lookup = {};// 创建查找表flatData.forEach(function(item) {lookup[item.NodeID] = Object.assign({}, item);lookup[item.NodeID].Nodes = [];});// 构建层级关系flatData.forEach(function(item) {if (item.ParentNodeID === null) {// 根节点hierarchicalData.push(lookup[item.NodeID]);} else {// 子节点if (lookup[item.ParentNodeID]) {lookup[item.ParentNodeID].Nodes.push(lookup[item.NodeID]);}}});return hierarchicalData;}});
});
在manifest中配置路由
...{"pattern": "TreeTable","name": "TreeTable","target": ["TreeTable"]}
...
