Skip to content

Instantly share code, notes, and snippets.

@ikiw

ikiw/listBindingObjects.js

Created July 17, 2015 13:57
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/b8d1ab2f1d848b7de351 to your computer and use it in GitHub Desktop.
Save ikiw/b8d1ab2f1d848b7de351 to your computer and use it in GitHub Desktop.
Download ZIP
List binding using Objects
Raw
listBindingObjects.js
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>Table Example</title>
<!-- Load UI5, select gold reflection theme and the "commons" and "table" control libraries -->
<script id='sap-ui-bootstrap' type='text/javascript'
src='/sapui5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_goldreflection'
data-sap-ui-libs='sap.ui.commons,sap.ui.table'></script>
<script>
// create the DataTable control
var oTable = new sap.ui.table.Table({editable:true});
// define the Table columns
var oControl = new sap.ui.commons.TextView({text:"{lastName}"}); // short binding notation
oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Last Name"}), template: oControl, sortProperty: "lastName", filterProperty: "lastName", width: "100px"}));
oControl = new sap.ui.commons.TextField().bindProperty("value", "name"); // more verbose binding notation
oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "First Name"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"}));
oControl = new sap.ui.commons.CheckBox({checked:"{checked}"});
oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Checked"}), template: oControl, sortProperty: "checked", filterProperty: "checked", width: "75px", hAlign: "Center"}));
oControl = new sap.ui.commons.Link({text:"{linkText}", href:"{href}"});
oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Web Site"}), template: oControl, sortProperty: "linkText", filterProperty: "linkText"}));
oControl = new sap.ui.commons.RatingIndicator({value:"{rating}"});
oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Rating"}), template: oControl, sortProperty: "rating", filterProperty: "rating"}));
// create some local data
var aData = {
first: {lastName: "Dente", name: "Al", checked: true, linkText: "www.sap.com", href: "http://www.sap.com", rating: 4},
second: {lastName: "Friese", name: "Andy", checked: true, linkText: "www.spiegel.de", href: "http://www.spiegel.de", rating: 2},
third: {lastName: "Mann", name: "Anita", checked: false, linkText: "www.kicker.de", href: "http://www.kicker.de", rating: 3}
};
// create a JSONModel, fill in the data and bind the Table to this model
var oModel = new sap.ui.model.json.JSONModel();
sap.ui.model.json.JSONListBinding.prototype.updateIndices = function() {
this.aIndices = [];
if (jQuery.isArray(this.oList)) {
for (var i = 0; i < this.oList.length; i++) {
this.aIndices.push(i);
}
} else {
for (var i in this.oList) {
this.aIndices.push(i);
}
}
}
sap.ui.model.json.JSONListBinding.prototype.update = function(){
var oList = this.oModel._getObject(this.sPath, this.oContext);
if (oList) {
if (jQuery.isArray(this.oList)) {
if (this.bUseExtendedChangeDetection) {
this.oList = jQuery.extend(true, [], oList);
} else {
this.oList = oList.slice(0);
}
} else {
if (this.bUseExtendedChangeDetection) {
this.oList = jQuery.extend(true, {}, oList);
} else {
this.oList = jQuery.extend(false, {}, oList);
}
}
this.updateIndices();
this.applyFilter();
this.applySort();
this.iLength = this._getLength();
} else {
this.oList = [];
this.aIndices = [];
this.iLength = 0;
}
};
oModel.setData({modelData: aData});
oTable.setModel(oModel);
oTable.bindRows("/modelData");
// finally place the Table into 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