table.view.js:
sap.ui.jsview("m.table.table", {
getControllerName : function() {
return "m.table.table";
},
createContent : function(oController) {
var oModel = new sap.ui.model.json.JSONModel([
{ value: 50, name: "ramu" },
{ value: 60, name: "ravi" },
{ value: 70, name: "raju" },
{ value: 80, name: "rao" }
]);
var oTable = new sap.m.Table({
id:"otable",
columns: [
new sap.m.Column({ header: new sap.m.Label({text: "Name"})}),
new sap.m.Column({ header: new sap.m.Label({text: "Value"})})
],
items: {
path: "/",
template: new sap.m.ColumnListItem({
cells: [
new sap.m.Text({ text: "{name}" }),
new sap.m.Text({ text: "{value}" })
]
})
},
});
oTable.setModel(oModel);
var btn1 =new sap.m.Button({
id:"bt",
text:"button2",
press:function(){
oTable.removeColumn("value");
}
}).addStyleClass("123");
return new sap.m.Page({
title: "Title",
showHeader:false ,
content: [
oTable,btn1
]
});
}
});
sap.ui.jsview("m.table.table", {
getControllerName : function() {
return "m.table.table";
},
createContent : function(oController) {
var oModel = new sap.ui.model.json.JSONModel([
{ value: 50, name: "ramu" },
{ value: 60, name: "ravi" },
{ value: 70, name: "raju" },
{ value: 80, name: "rao" }
]);
var oTable = new sap.m.Table({
id:"otable",
columns: [
new sap.m.Column({ header: new sap.m.Label({text: "Name"})}),
new sap.m.Column({ header: new sap.m.Label({text: "Value"})})
],
items: {
path: "/",
template: new sap.m.ColumnListItem({
cells: [
new sap.m.Text({ text: "{name}" }),
new sap.m.Text({ text: "{value}" })
]
})
},
});
oTable.setModel(oModel);
var btn1 =new sap.m.Button({
id:"bt",
text:"button2",
press:function(){
oTable.removeColumn("value");
}
}).addStyleClass("123");
return new sap.m.Page({
title: "Title",
showHeader:false ,
content: [
oTable,btn1
]
});
}
});
index.html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("m.table");
var app = new sap.m.App({initialPage:"idtable1"});
var page = sap.ui.view({id:"idtable1", viewName:"m.table.table", type:sap.ui.core.mvc.ViewType.JS});
app.addPage(page);
app.placeAt("content");
</script>
<style>
#otable{
background-color: yellow;
}
.123{
background-color: dodgerblue;
justify-content:flex-end;
}
</style>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
output:
No comments:
Post a Comment