diff options
Diffstat (limited to 'examples/example14-highlighting.html')
| -rw-r--r-- | examples/example14-highlighting.html | 299 |
1 files changed, 153 insertions, 146 deletions
diff --git a/examples/example14-highlighting.html b/examples/example14-highlighting.html index 3ac061f..928feae 100644 --- a/examples/example14-highlighting.html +++ b/examples/example14-highlighting.html @@ -1,149 +1,156 @@ <!DOCTYPE HTML> <html> - <head> - <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> - <title>SlickGrid example 14: Highlighting and Flashing cells</title> - <link rel="stylesheet" href="../slick.grid.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" media="screen" charset="utf-8" /> - <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" /> - <style> - .load-medium { - color: orange; - font-weight: bold; - } - .load-hi { - color: red; - font-weight: bold; - } - .changed { - background: pink; - } - .current-server { - border: 1px solid black; - background: orange; - } - </style> - </head> - <body> - <div style="position:relative"> - <div style="width:520px;"> - <div id="myGrid" style="width:100%;height:500px;"></div> - </div> - - <div class="options-panel"> - <h2>About</h2> - This example simulates a real-time display of CPU utilization in a web farm. - Data is updated in real-time, and cells with changed data are highlighted. - You can also click "Find current server" to scroll the row displaying data for the current - server into view and flash it. - <h2>Demonstrates</h2> - <ul> - <li>setHighlightedCells()</li> - <li>flashCell()</li> - </ul> - <h2>Controls</h2> - <button onclick="simulateRealTimeUpdates()">Start simulation</button> - <button onclick="findCurrentServer()">Find current server</button> - </div> - </div> - - <script src="../lib/firebugx.js"></script> - - <script src="../lib/jquery-1.7.min.js"></script> - <script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> - <script src="../lib/jquery.event.drag-2.0.min.js"></script> - - <script src="../slick.core.js"></script> - <script src="../plugins/slick.cellselectionmodel.js"></script> - <script src="../plugins/slick.rowmovemanager.js"></script> - <script src="../slick.editors.js"></script> - <script src="../slick.grid.js"></script> - - <script> - var grid; - var data = []; - var columns = [{id:"server", name:"Server", field:"server", width:180}]; - var currentServer; - - function cpuUtilizationFormatter(row, cell, value, columnDef, dataContext) { - if (value > 90) - return "<span class='load-hi'>" + value + "%</span>"; - else if (value > 70) - return "<span class='load-medium'>" + value + "%</span>"; - else - return value + "%"; - } - - for (var i=0; i<4; i++) { - columns.push({ - id: "cpu" + i, - name: "CPU" + i, - field: i, - width: 80, - formatter: cpuUtilizationFormatter - }); - } - - var options = { - editable: false, - enableAddRow: false, - enableCellNavigation: true, - cellHighlightCssClass: "changed", - cellFlashingCssClass: "current-server" - }; - - - - $(function() - { - for (var i=0; i<500; i++) { - var d = (data[i] = {}); - d.server = "Server " + i; - for (var j=0; j<columns.length; j++) { - d[j] = Math.round(Math.random()*100); - } - } - - grid = new Slick.Grid("#myGrid", data, columns, options); - - currentServer = Math.round(Math.random()*(data.length-1)); - }); - - - function simulateRealTimeUpdates() { - var changes = {}; - var numberOfUpdates = Math.round(Math.random()*(data.length/10)); - for (var i=0; i<numberOfUpdates; i++) { - var server = Math.round(Math.random()*(data.length-1)); - var cpu = Math.round(Math.random()*(columns.length-1)); - var delta = Math.round(Math.random()*50)-25; - var col = grid.getColumnIndex("cpu" + cpu); - var val = data[server][col] + delta; - val = Math.max(0,val); - val = Math.min(100,val); - - data[server][col] = val; - - if (!changes[server]) - changes[server] = {}; - - changes[server]["cpu" + cpu] = "changed"; - - grid.invalidateRow(server); - } - - grid.setCellCssStyles("highlight", changes); - grid.render(); - - setTimeout(simulateRealTimeUpdates, 500); - } - - function findCurrentServer() { - grid.scrollRowIntoView(currentServer); - grid.flashCell(currentServer,grid.getColumnIndex("server"),100); - } - - </script> - - </body> +<head> + <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> + <title>SlickGrid example 14: Highlighting and Flashing cells</title> + <link rel="stylesheet" href="../slick.grid.css" type="text/css" /> + <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css" /> + <link rel="stylesheet" href="examples.css" type="text/css" /> + <style> + .load-medium { + color: orange; + font-weight: bold; + } + + .load-hi { + color: red; + font-weight: bold; + } + + .changed { + background: pink; + } + + .current-server { + border: 1px solid black; + background: orange; + } + </style> +</head> +<body> +<div style="position:relative"> + <div style="width:520px;"> + <div id="myGrid" style="width:100%;height:500px;"></div> + </div> + + <div class="options-panel"> + <h2>About</h2> + This example simulates a real-time display of CPU utilization in a web farm. + Data is updated in real-time, and cells with changed data are highlighted. + You can also click "Find current server" to scroll the row displaying data for the current + server into view and flash it. + <h2>Demonstrates</h2> + <ul> + <li>setHighlightedCells()</li> + <li>flashCell()</li> + </ul> + <h2>Controls</h2> + <button onclick="simulateRealTimeUpdates()">Start simulation</button> + <button onclick="findCurrentServer()">Find current server</button> + </div> +</div> + +<script src="../lib/firebugx.js"></script> + +<script src="../lib/jquery-1.7.min.js"></script> +<script src="../lib/jquery-ui-1.8.16.custom.min.js"></script> +<script src="../lib/jquery.event.drag-2.0.min.js"></script> + +<script src="../slick.core.js"></script> +<script src="../plugins/slick.cellselectionmodel.js"></script> +<script src="../plugins/slick.rowmovemanager.js"></script> +<script src="../slick.editors.js"></script> +<script src="../slick.grid.js"></script> + +<script> + var grid; + var data = []; + var columns = [ + {id:"server", name:"Server", field:"server", width:180} + ]; + var currentServer; + + function cpuUtilizationFormatter(row, cell, value, columnDef, dataContext) { + if (value > 90) { + return "<span class='load-hi'>" + value + "%</span>"; + } + else if (value > 70) { + return "<span class='load-medium'>" + value + "%</span>"; + } + else { + return value + "%"; + } + } + + for (var i = 0; i < 4; i++) { + columns.push({ + id:"cpu" + i, + name:"CPU" + i, + field:i, + width:80, + formatter:cpuUtilizationFormatter + }); + } + + var options = { + editable:false, + enableAddRow:false, + enableCellNavigation:true, + cellHighlightCssClass:"changed", + cellFlashingCssClass:"current-server" + }; + + + $(function () { + for (var i = 0; i < 500; i++) { + var d = (data[i] = {}); + d.server = "Server " + i; + for (var j = 0; j < columns.length; j++) { + d[j] = Math.round(Math.random() * 100); + } + } + + grid = new Slick.Grid("#myGrid", data, columns, options); + + currentServer = Math.round(Math.random() * (data.length - 1)); + }); + + + function simulateRealTimeUpdates() { + var changes = {}; + var numberOfUpdates = Math.round(Math.random() * (data.length / 10)); + for (var i = 0; i < numberOfUpdates; i++) { + var server = Math.round(Math.random() * (data.length - 1)); + var cpu = Math.round(Math.random() * (columns.length - 1)); + var delta = Math.round(Math.random() * 50) - 25; + var col = grid.getColumnIndex("cpu" + cpu); + var val = data[server][col] + delta; + val = Math.max(0, val); + val = Math.min(100, val); + + data[server][col] = val; + + if (!changes[server]) { + changes[server] = {}; + } + + changes[server]["cpu" + cpu] = "changed"; + + grid.invalidateRow(server); + } + + grid.setCellCssStyles("highlight", changes); + grid.render(); + + setTimeout(simulateRealTimeUpdates, 500); + } + + function findCurrentServer() { + grid.scrollRowIntoView(currentServer); + grid.flashCell(currentServer, grid.getColumnIndex("server"), 100); + } + +</script> + +</body> </html> |