SlickGrid example 6:Ajax加载

Ajax加载。
代码：
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <title>SlickGrid example 6: AJAX Load</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>
    .cell-story {
      white-space: normal !important;
      line-height: 19px !important;
    }

    .loading-indicator {
      display: inline-block;
      padding: 12px;
      background: white;
      -opacity: 0.5;
      color: black;
      font-weight: bold;
      z-index: 9999;
      border: 1px solid red;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-box-shadow: 0 0 5px red;
      -webkit-box-shadow: 0px 0px 5px red;
      -text-shadow: 1px 1px 1px white;
    }

    .loading-indicator label {
      padding-left: 20px;
      background: url('../images/ajax-loader-small.gif') no-repeat center left;
    }
  </style>
</head>
<body>
<div style="700px;float:left;">
  <div class="grid-header" style="100%">
    <label>Digg stories</label>
        <span style="float:right;display:inline-block;">
          Search:
          <input type="text" id="txtSearch" value="apple">
        </span>
  </div>
  <div id="myGrid" style="100%;height:600px;"></div>
  <div id="pager" style="100%;height:20px;"></div>
</div>
<div style="margin-left:750px;margin-top:40px;;">
  <h2>Demonstrates:</h2>
  <ul>
    <li>loading data through AJAX</li>
    <li>custom row height</li>
  </ul>

  <h2>WARNING:</h2>
  <ul>
    <li>Digg API uses request rate limiting. You may occasionally get an error if you do a frequent
      scrolling/resorting/searching.
    </li>
  </ul>
</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="../lib/jquery.jsonp-1.1.0.min.js"></script>

<script src="../slick.core.js"></script>
<script src="../slick.remotemodel.js"></script>
<script src="../slick.grid.js"></script>

<script>
  var grid;
  var loader = new Slick.Data.RemoteModel();

  var storyTitleFormatter = function (row, cell, value, columnDef, dataContext) {
    return "<b><a href='" + dataContext["link"] + "' target=_blank>" +
        dataContext["title"] + "</a></b><br/>" + dataContext["description"];
  };


  var columns = [
    {id: "num", name: "#", field: "index",  40},
    {id: "story", name: "Story",  580, formatter: storyTitleFormatter, cssClass: "cell-story"},
    {id: "diggs", name: "Diggs", field: "diggs",  60, sortable: true}
  ];

  var options = {
    rowHeight: 64,
    editable: false,
    enableAddRow: false,
    enableCellNavigation: false
  };

  var loadingIndicator = null;


  $(function () {
    grid = new Slick.Grid("#myGrid", loader.data, columns, options);

    grid.onViewportChanged.subscribe(function (e, args) {
      var vp = grid.getViewport();
      loader.ensureData(vp.top, vp.bottom);
    });

    grid.onSort.subscribe(function (e, args) {
      loader.setSort(args.sortCol.field, args.sortAsc ? 1 : -1);
      var vp = grid.getViewport();
      loader.ensureData(vp.top, vp.bottom);
    });

    loader.onDataLoading.subscribe(function () {
      if (!loadingIndicator) {
        loadingIndicator = $("<span class='loading-indicator'><label>Buffering...</label></span>").appendTo(document.body);
        var $g = $("#myGrid");

        loadingIndicator
            .css("position", "absolute")
            .css("top", $g.position().top + $g.height() / 2 - loadingIndicator.height() / 2)
            .css("left", $g.position().left + $g.width() / 2 - loadingIndicator.width() / 2);
      }

      loadingIndicator.show();
    });

    loader.onDataLoaded.subscribe(function (e, args) {
      for (var i = args.from; i <= args.to; i++) {
        grid.invalidateRow(i);
      }

      grid.updateRowCount();
      grid.render();

      loadingIndicator.fadeOut();
    });

    $("#txtSearch").keyup(function (e) {
      if (e.which == 13) {
        loader.setSearch($(this).val());
        var vp = grid.getViewport();
        loader.ensureData(vp.top, vp.bottom);
      }
    });

    // load the first page
    grid.onViewportChanged.notify();
  })
</script>
</body>
</html>