Skip to content

Instantly share code, notes, and snippets.

@ikiw

ikiw/TreeTable.js

Created June 23, 2015 14:00
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ikiw/4dbf9e5b9d1cee1b812b to your computer and use it in GitHub Desktop.
Save ikiw/4dbf9e5b9d1cee1b812b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
TreeTable.js
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<title>test</title>
<script id='sap-ui-bootstrap' type='text/javascript'
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_goldreflection'
data-sap-ui-libs='sap.ui.commons,sap.ui.ux3,sap.ui.table'></script>
<!-- add 'sap.ui.table' and/or other libraries if required -->
<script>
var oListItemBinding = new sap.ui.core.ListItem();
oListItemBinding.bindProperty("text","version_item");
oListItemBinding.bindProperty("key", "key");
var oDropDownBoxes = new sap.ui.commons.DropdownBox({
maxHistoryItems : 0,
searchHelpEnabled: false});
oDropDownBoxes.bindItems(
"versions",
oListItemBinding );
//new column defines
var oColumn2 = new sap.ui.table.Column({
label : new sap.ui.commons.Label({
text : "Target"
}),
template : oDropDownBoxes ,
resizable : false
});
//Define some sample data
var oData = {
root:{
name: "root",
description: "root description",
checked: false,
0: {
name: "item1",
description: "item1 description",
defaultKey: 0,
dropBoxID: 0,
versions: {
name: "I'm not missing anymore",
0: {
name: "I'm also here",
version_item: "Some random component",
key: 0
},
1: {
name: "me too!",
version_item: "Some random component",
key: 1
}
},
versionF: 0,
checked: true,
0: {
name: "subitem1-1",
description: "subitem1-1 description",
checked: true,
0: {
name: "subsubitem1-1-1",
description: "subsubitem1-1-1 description",
checked: true
},
1: {
name: "subsubitem1-1-2",
description: "subsubitem1-1-2 description",
checked: true
}
},
1: {
name: "subitem1-2",
description: "subitem1-2 description",
checked: true,
0: {
name: "subsubitem1-2-1",
description: "subsubitem1-2-1 description",
checked: true
}
}
},
1:{
name: "item2",
description: "item2 description",
checked: true,
0: {
name: "subitem2-1",
description: "subitem2-1 description",
checked: true
}
},
2:{
name: "item3",
description: "item3 description",
checked: true
}
}
};
for (var i = 0; i < 20; i++) {
oData["root"][2][i] = {
name: "subitem3-" + i,
description: "subitem3-" + i + " description",
checked: false
};
}
//Create an instance of the table control
var oTable = new sap.ui.table.TreeTable({
columns: [
new sap.ui.table.Column({label: "Patch scenario", template: "name"}),
new sap.ui.table.Column({label: "Description", template: "description"}),
oColumn2
],
selectionMode: sap.ui.table.SelectionMode.Single,
allowColumnReordering: true,
expandFirstLevel: true,
toggleOpenState: function(oEvent) {
var iRowIndex = oEvent.getParameter("rowIndex");
var oRowContext = oEvent.getParameter("rowContext");
var bExpanded = oEvent.getParameter("expanded");
alert("rowIndex: " + iRowIndex +
" - rowContext: " + oRowContext.getPath() +
" - expanded? " + bExpanded);
}
});
//Create a model and bind the table rows to this model
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(oData);
oTable.setModel(oModel);
oTable.bindRows("/root");
//Bring the table onto the UI
oTable.placeAt("content");
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment