Skip to content
This repository
tree: f4255df518
Fetching contributors…

Octocat-spinner-32-eaf2f5

Cannot retrieve contributors at this time

file 154 lines (129 sloc) 4.097 kb
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153
<!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"/>
  <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.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>
Something went wrong with that request. Please try again.