Tree Expand And Collapse

//View.xml



<mvc:View
controllerName="tree_expand_and_collapse.Tree"
xmlns:l="sap.ui.layout"
xmlns:core="sap.ui.core"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m">
<Toolbar class="sapUiSizeCompact">
<content >
<Text text="Initially expand to Level1"/>
<ToolbarSpacer/>
<Text text="Expand to level "/>
<Select
selectedKey="1"
change="handleSelectChange">
<items>
<core:Item key="0" text="0" />
<core:Item key="1" text="1" />
<core:Item key="2" text="2" />
<core:Item key="3" text="3" />
<core:Item key="4" text="4" />
</items>
</Select>
<Button id="collapseAll" text="collapse all nodes" press="onCollapseAllPress"/>
</content>
</Toolbar>

<Tree
id="Tree"
items="{/}">
<StandardTreeItem title="{text}"/>
</Tree>
</mvc:View>





// Controller.js



sap.ui.define(['sap/ui/core/mvc/Controller', 'sap/ui/model/json/JSONModel'],
function(Controller, JSONModel) {
"use strict";

var PageController = Controller.extend("tree_expand_and_collapse.Tree", {
onInit : function (evt) {
// set explored app's demo model on this sample
var sMode=new sap.ui.model.json.JSONModel("model/Tree.json");
this.getView().setModel(sMode);
this.byId("Tree").expandToLevel(1);
},

handleSelectChange: function(oEvent) {
var iLevel = oEvent.getParameter("selectedItem").getKey();
this.byId("Tree").expandToLevel(iLevel);
},

onCollapseAllPress : function(evt) {
var oTree = this.byId("Tree");
oTree.collapseAll();
}
});

return PageController;

});



//Tree.json


 [
{
"text": "Node1",
"ref": "sap-icon://attachment-audio",
"nodes":
[
{
"text": "Node1-1",
"ref": "sap-icon://attachment-e-pub",
"nodes":[
{
"text": "Node1-1-1",
"ref": "sap-icon://attachment-html"
},
{
"text": "Node1-1-2",
"ref": "sap-icon://attachment-photo",
"nodes":[
{
"text": "Node1-1-2-1",
"ref": "sap-icon://attachment-text-file",
"nodes":[
{
"text": "Node1-1-2-1-1",
"ref": "sap-icon://attachment-video"
},
{
"text": "Node1-1-2-1-2",
"ref": "sap-icon://attachment-zip-file"
},
{
"text": "Node1-1-2-1-3",
"ref": "sap-icon://course-program"
}
]
}
]
}
]
},
{
"text": "Node1-2",
"ref": "sap-icon://create",
"nodes":[
{
"text": "Node1-2-1",
"ref": "sap-icon://attachment-html"
},
{
"text": "Node1-2-2",
"ref": "sap-icon://attachment-photo",
"nodes":[
{
"text": "Node1-2-2-1",
"ref": "sap-icon://attachment-text-file",
"nodes":[
{
"text": "Node1-2-2-1-1",
"ref": "sap-icon://attachment-video"
},
{
"text": "Node1-2-2-1-2",
"ref": "sap-icon://attachment-zip-file"
},
{
"text": "Node1-2-2-1-3",
"ref": "sap-icon://course-program"
}
]
}
]
}
]
},
{
"text": "Node1-3",
"ref": "sap-icon://create",
"nodes":[
{
"text": "Node1-3-1",
"ref": "sap-icon://attachment-html"
},
{
"text": "Node1-3-2",
"ref": "sap-icon://attachment-photo",
"nodes":[
{
"text": "Node1-3-2-1",
"ref": "sap-icon://attachment-text-file",
"nodes":[
{
"text": "Node1-3-2-1-1",
"ref": "sap-icon://attachment-video"
},
{
"text": "Node1-3-2-1-2",
"ref": "sap-icon://attachment-zip-file"
},
{
"text": "Node1-3-2-1-3",
"ref": "sap-icon://course-program"
}
]
}
]
}
]
},
{
"text": "Node1-4",
"ref": "sap-icon://attachment-e-pub",
"nodes":[
{
"text": "Node1-4-1",
"ref": "sap-icon://attachment-html"
},
{
"text": "Node1-4-2",
"ref": "sap-icon://attachment-photo",
"nodes":[
{
"text": "Node1-4-2-1",
"ref": "sap-icon://attachment-text-file",
"nodes":[
{
"text": "Node1-4-2-1-1",
"ref": "sap-icon://attachment-video"
},
{
"text": "Node1-4-2-1-2",
"ref": "sap-icon://attachment-zip-file"
},
{
"text": "Node1-4-2-1-3",
"ref": "sap-icon://course-program"
}
]
}
]
}
]
},
{
"text": "Node1-5",
"ref": "sap-icon://attachment-e-pub",
"nodes":[
{
"text": "Node1-5-1",
"ref": "sap-icon://attachment-html"
},
{
"text": "Node1-5-2",
"ref": "sap-icon://attachment-photo",
"nodes":[
{
"text": "Node1-5-2-1",
"ref": "sap-icon://attachment-text-file",
"nodes":[
{
"text": "Node1-5-2-1-1",
"ref": "sap-icon://attachment-video"
},
{
"text": "Node1-5-2-1-2",
"ref": "sap-icon://attachment-zip-file"
},
{
"text": "Node1-5-2-1-3",
"ref": "sap-icon://course-program"
}
]
}
]
}
]
},
{
"text": "Node1-6",
"ref": "sap-icon://attachment-e-pub",
"nodes":[
{
"text": "Node1-6-1",
"ref": "sap-icon://attachment-html"
},
{
"text": "Node1-6-2",
"ref": "sap-icon://attachment-photo",
"nodes":[
{
"text": "Node1-6-2-1",
"ref": "sap-icon://attachment-text-file",
"nodes":[
{
"text": "Node1-6-2-1-1",
"ref": "sap-icon://attachment-video"
},
{
"text": "Node1-6-2-1-2",
"ref": "sap-icon://attachment-zip-file"
},
{
"text": "Node1-6-2-1-3",
"ref": "sap-icon://course-program"
}
]
}
]
}
]
}
]
},
{
"text": "Node2",
"ref": "sap-icon://customer-financial-fact-sheet"
}
]




//Output










Post a Comment

Previous Post Next Post