Академический Документы
Профессиональный Документы
Культура Документы
Instantiate a table
It can be as simple as
var oTable = new sap.ui.table.Table();
where we inherit all the default properties from the control. Please refer to the official
doc for reference.
There are a few properties that I hope to explain a little more.
SelectionMode (API)
Example
SelectionBehavior (API)
Example
var oTable = new sap.ui.table.Table({
selectionBehavior: sap.ui.table.SelectionBehavior.Row
});
Here you can control how the row can be selected such as RowOnly (mouse click on the
row only), Row (mouse click on the row and row selector) and RowSelector (mouse click on
the row selector only). Default is RowSelector.
});
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "First Name"}),
template: new sap.ui.commons.TextField({value: "{name}"})
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Still Naughty"}),
template: new sap.ui.commons.CheckBox({checked: '{stillNaughty}
'})
}));
oTable.setModel(oModel);
oTable.bindRows("/");
oTable.placeAt("content");
Observe that we do bindRows(/), this is because we have the JSON model containing an
array.
oModel.setData(naughtyList);
But if your model is created in this manner,
oModel.setData({'mydata' : naughtyList});
Then you need to do bindRows(/mydata);
And if your data is modified to
var naughtyList = [
{lastName: "Dente", name: "Al", stillNaughty: 'true'},
{lastName: "Friese", name: "Andy", stillNaughty: 'true'},
{lastName: "Mann", name: "Anita", stillNaughty: 'false'}
];
where stillNaugthy is a string and not a boolean. We can adapt to this with this change in
the column definition
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Still Naughty"}),
template: new sap.ui.commons.CheckBox({
checked: {
path: 'stillNaughty',
formatter: function(v) {
return (v === 'true')
}
}
})
}));
There are many things that you can do with formatter function. For instance if you want to
display the first and last name together uppercase the last name. we can do this. (Example)
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Name"}),
template: new sap.ui.commons.TextView(
{text:
{
parts : ['name', 'lastName'],
formatter: function(n, l) {
if (n && l) {
return n + ', ' + l.toUpperCase();
}
}
}
}
)
}));
console.log(obj);
}
}
});
Here (in the code), we can get the selected or deselected row; then we use
the isIndexSelectedfunction to check if it is selected or deselected. And by getting the
context and path, we are able to get the binding object itself.
Please note that if row 1 is already selected and now user select row #2, this event will not
fire for that deselection of row #1, an event will be fired for selection of row #2.
Here (in the code), we can get the selected or deselected rows; then we iterate through the
array and use the isIndexSelected function to check if it is selected or deselected. And by
getting the context and path, we are able to get the binding object itself. This piece of code
is almost identical to the code snippet in the single selection mode except for getting an
array of selected indices.