Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
  
<head>
<meta name="description" content="Highlight table row fields" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
​
    <title>OData Date Table Multiple Sorters</title>
   <style type="text/css">
        .overdue {
            -webkit-animation: anim-overdue 10000ms;
        }
​
        .overdue p.sapMSLIDescription{
            color: red;
        }
​
        @-webkit-keyframes anim-overdue {
            50%  {
                background-color: red;
            }
        }
   </style>
​
    <script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.ui.core,sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_goldreflection">
    </script>
    <script> 
//Define some sample data 
var aData = [
    {lastName: "Dente", name: "Al", checked: true, linkText: "www.sap.com", href: "http://www.sap.com"},
    {lastName: "Friese", name: "Andy", checked: true, linkText: "www.sap.com", href: "http://www.sap.com"},
    {lastName: "Mann", name: "Anita", checked: false, linkText: "www.sap.com", href: "http://www.sap.com"},
    {lastName: "Schutt", name: "Doris", checked: true, linkText: "www.sap.com", href: "http://www.sap.com"},
    {lastName: "Open", name: "Doris", checked: true, linkText: "www.sap.com", href: "http://www.sap.com"},
    {lastName: "Dewit", name: "Kenya", checked: false, linkText: "www.sap.com", href: "http://www.sap.com"}
];
​
//Create an instance of the table control
var oTable = new sap.ui.table.Table({
    title: "Highlight Overdue Rows",
    visibleRowCount: 7,
    firstVisibleRow: 3,
    selectionMode: sap.ui.table.SelectionMode.Single,
    showNoData: true,
    columnHeaderHeight: 10,
});
​
//Define the columns and the control templates to be used
oTable.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Last Name"}),
    template: new sap.ui.commons.TextView().bindProperty("text", "lastName"),
    sortProperty: "lastName",
    filterProperty: "lastName",
    width: "200px"
}));
​
oTable.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "First Name"}),
    template: new sap.ui.commons.TextField().bindProperty("value", "name"),
    sortProperty: "name",
    filterProperty: "name",
    width: "200px"
}));
oTable.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Checked"}),
    template: new sap.ui.commons.CheckBox().bindProperty("checked", "checked"),
    sortProperty: "checked",
    filterProperty: "checked",
    width: "200px",
    hAlign: "Center"
}));
oTable.addColumn(new sap.ui.table.Column({
    label: new sap.ui.commons.Label({text: "Web Site"}),
    template: new sap.ui.commons.Link().bindProperty("text", "linkText").bindProperty("href", "href"),
    sortProperty: "linkText",
    filterProperty: "linkText",
    width: "400px"
}));
​
​
//Create a model and bind the table rows to this model
var oModel2 = new sap.ui.model.json.JSONModel();
oModel2.setData({modelData: aData});
oTable.setModel(oModel2);
oTable.bindRows("/modelData");
​
​
//Bring the table onto the UI 
oTable.placeAt("content");
​
// onAfterRendering 
$( document ).ready(function() {
    jQuery.each(oTable.getRows(), function( index, row ) {
        if( index  % 2){
            row.$().addClass("overdue");
        }
        
    });
    
});
      </script>
​
</head>
​
<body class="sapUiBody" role="application">
    <div id="content"></div>
</body>
​
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jasper07pro
0viewers