SAPUI5 TreeTable - 节点扩展行为

Question

Problem is:

I'm trying to keep the nodes in a TreeTable expanded, when I'm adding rows at runtime. Default behavior of a TreeTable is, when something happens with it, it get's rendered again and all nodes are collapsed.

The API only provides methods to keep the first level expanded, but I like to keep lower level nodes expanded, too. How can I achieve that?

Before adding a row:

After adding a row:

Expectation:

[EDIT]

I've already tried to to get the right behavior by using expand(iRowIndex), but in my case, the lifecycle of that TreeTable (Adding content, getting rerendered), is not helpful.

What I'm doing:

I'm trying to add data by using Drag&Drop functions. As soon, as we're trying to add content to a specific position into the TreeTable, we have to get the right positions of the parent and child elements. Unfortunately the second+ level is hidden after adding said content and that messes with my Drag&Drop, because the table rows have different IDs, when they're collapsing.

Basically I need a TreeTable function like ."setExpandFirstLevel(true)" for all other levels.

Answer 1

It's a bit dirty, but you could use the TreeTable 's expand(iRowIndex) method by calling it while iterating over every row item

---

EDIT : I have created a working example (see below), showing you don't need to use the rowID or add any control to the DOM. The only thing the drag/drop should do is add a child node to the selected node using the model only .
But in effect, the expand(rowIndex) works perfectly fine, all visible rows are instantly expanded (but see NB2 below)

NB1: for simplicity sake, I have not created a full drag/drop example, but clicking the 'add child node' button should mimic the 'drop' event.

NB2: Apparently there is a bug in the expand method: It only expands the visible tree items. Any items after the scroll are not expanded...

 sap.ui.controller("view1.initial", { onInit : function(oEvent) { var oModel = new sap.ui.model.json.JSONModel(); oModel.setData({ data : [ { name : "node1", description : "Lorem ipsum dolor sit amet", data : [ { name : "node1.1", description : "Cras pretium nisl ac ex congue posuere" }, { name : "node1.2", description : "Consectetur adipiscing elit", data: [ { name : "node1.2.1", description : "Maecenas accumsan ipsum diam" } ] }, { name : "node1.3", description : "Sed tristique diam non imperdiet commodo" }, { name : "node1.4", description : "Consectetur adipiscing elit", data: [ { name : "node1.4.1", description : "Maecenas accumsan ipsum diam", data: [ { name : "node1.4.1.1", description : "Maecenas accumsan ipsum diam", data: [ { name : "node1.4.1.1.1", description : "Maecenas accumsan ipsum diam", data: [ { name : "node1.4.1.1.1.1", description : "Maecenas accumsan ipsum diam" } ] } ] } ] } ] }, { name : "node1.5", description : "Sed tristique diam non imperdiet commodo" }, { name : "node1.6", description : "Consectetur adipiscing elit", data: [ { name : "node1.6.1", description : "Maecenas accumsan ipsum diam" } ] }, { name : "node1.7", description : "Sed tristique diam non imperdiet commodo" }, ] }, ] }); this.getView().setModel(oModel); }, onAfterRendering : function() { this._doExpandAll(); }, addNode : function(oEvent) { var oContext = oEvent.getSource().getBindingContext(); var obj = oContext.getObject(); var oNew = { name : "New node", description : "New description"}; if (!obj.data) obj.data = []; //if no child array, create empty one obj.data.push(oNew); this.getView().getModel().setProperty(oContext.getPath(), obj); this._doExpandAll(); }, _doExpandAll : function() { var oTTbl = this.getView().byId("tbl"); for (var i=0; i<oTTbl.getRows().length; i++) { oTTbl.expand(i); } } }); var app = new sap.m.App({}); var oView = sap.ui.xmlview({ viewContent: jQuery("#view1").html() }); app.addPage(oView); app.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-libs="sap.m"></script> <script id="view1" type="ui5/xmlview"> <mvc:View controllerName="view1.initial" xmlns:t="sap.ui.table" xmlns="sap.ui.commons" xmlns:mvc="sap.ui.core.mvc" > <t:TreeTable id="tbl" rows="{path:'/',parameters:{arrayNames:['data']}}" visibleRowCount="10"> <t:columns> <t:Column> <t:label><Label text="name" /></t:label> <t:template><TextView text="{name}" /></t:template> </t:Column> <t:Column> <t:label><Label text="description" /></t:label> <t:template><TextView text="{description}" /></t:template> </t:Column> <t:Column> <t:label><Label text="" /></t:label> <t:template><Button text="Add child node" press="addNode"/></t:template> </t:Column> </t:columns> </t:TreeTable> </mvc:View> </script> <div id="uiArea"></div>