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.
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.
Share Improve this question edited Apr 23, 2015 at 8:18 P. Stresow asked Apr 22, 2015 at 14:51 P. StresowP. Stresow 3083 silver badges11 bronze badges 01 Answer
Reset to default 2It'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 modo"
},
{
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 modo"
},
{
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 modo"
},
]
},
]
});
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./resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="plex"
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.mons"
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>发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745473549a4629241.html
评论列表（0条）