<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Table Merge Sample</title>
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-xx-bindingSyntax="complex"
>
</script>
<style>
.textStyle{
color:#FFFFFF !important;
text-shadow: 1px 1px 2px #333333 !important;
}
</style>
<!-- XML-based view definition -->
<script id="chartView" type="sapui5/xmlview">
<mvc:View
controllerName="TableMerge.Main"
xmlns:l="sap.ui.layout"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.m"
class="viewPadding">
<App>
<pages>
<Page
title="Table Merge Cells"
class="marginBoxContent" >
<content>
<Table
id="ProductsTable"
items="{
path:'/modelData/productsData'
}" >
<columns>
<Column mergeDuplicates="true" hAlign="Center">
<header>
<Text text="Supplier" />
</header>
</Column>
<Column >
<header>
<Text text="Product" />
</header>
</Column>
<Column hAlign="Right">
<header>
<Text text="Release" />
</header>
</Column>
</columns>
<ColumnListItem>
<cells>
<Text text="{SupplierName}" class="textStyle" />
<HBox>
<items>
<Text text="{Name}" />
<Input visible="{
path: 'SupplierName',
formatter: 'inputFormatter.Visible'
}" />
</items>
</HBox>
<CheckBox visible="{
path: 'SupplierName',
formatter: 'myFormatter.Visible'
}" />
</cells>
</ColumnListItem>
</Table>
</content>
</Page>
</pages>
</App>
</mvc:View>
</script>
<script>
var inputFormatter = {
Visible: function(v) {
if(v == "Feedback" || v == "Others"){
return true;
}
else{
return false;
}
}
};
var myFormatter = {
Visible: function(v) {
if(v == "Feedback" || v == "Others"){
return false;
}
else{
return true;
}
}
};
// Controller definition
sap.ui.controller("TableMerge.Main", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf table_v01.Main
*/
onInit: function() {
var dataObject = [
{
"ProductId": "22134T",
"Name": "Webcam",
"SupplierName": "Technocom",
"Price": 59,
"CurrencyCode": "EUR"
},
{
"ProductId": "P1239823",
"Name": "Monitor Locking Cable",
"SupplierName": "Technocom",
"Price": 13.49,
"CurrencyCode": "EUR"
},
{
"ProductId": "214-121-828",
"Name": "Laptop Case",
"SupplierName": "Red Point Stores",
"Price": 78.99,
"CurrencyCode": "EUR"
},
{
"ProductId": "XKP-312548",
"Name": "USB Stick 16 GByte",
"SupplierName": "Red Point Stores",
"Price": 17.19,
"CurrencyCode": "EUR"
},
{
"ProductId": "KTZ-12012.V2",
"Name": "Deskjet Super Highspeed",
"SupplierName": "Red Point Stores",
"Price": 117.19,
"CurrencyCode": "EUR"
},
{
"ProductId": "89932-922",
"Name": "Laser Allround Pro",
"SupplierName": "Red Point Stores",
"Price": 39.99,
"CurrencyCode": "EUR"
},
{
"ProductId": "38094020.1",
"Name": "Flat S",
"SupplierName": "Very Best Screens",
"Price": 339,
"CurrencyCode": "EUR"
},
{
"ProductId": "870394932",
"Name": "Flat Medium",
"SupplierName": "Very Best Screens",
"Price": 639,
"CurrencyCode": "EUR"
},
{
"ProductId": "282948303-02",
"Name": "Flat X-large II",
"SupplierName": "Very Best Screens",
"Price": 1239,
"CurrencyCode": "EUR"
},
{
"ProductId": "OP-38800002",
"Name": "High End Laptop 2b",
"SupplierName": "Titanium",
"Price": 939,
"CurrencyCode": "EUR"
},
{
"ProductId": "977700-11",
"Name": "Hardcore Hacker",
"SupplierName": "Titanium",
"Price": 89,
"CurrencyCode": "EUR"
},
{
"SupplierName": "Feedback"
},
{
"SupplierName": "Others"
}
];
var model = new sap.ui.model.json.JSONModel();
model.setData({
modelData: {
productsData : []
}
});
sap.ui.getCore().setModel(model);
sap.ui.getCore().getModel().setProperty("/modelData/productsData", dataObject);
var oHBox = this.getView().byId("oHBox");
var oTable = this.getView().byId("ProductsTable");
oTable.addEventDelegate({
onAfterRendering:function(){
var oBody = $('#__xmlview0--ProductsTable').find('tbody')[0];
var oChildNodes = oBody.childNodes;
for(var i=0;i<oChildNodes.length;i++){
var oID = oChildNodes[i].childNodes[0];
oID.style.backgroundColor="#cc1919"
}
}
},oTable);
}
});
// Instantiate the View, assign a model
// and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#chartView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
// Code goes here
/* Styles go here */