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="width:700px;float:left;">

  <div class="grid-header" style="width: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="width:100%;height:600px;"></div>

  <div id="pager" style="width: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", width: 40},

    {id: "story", name: "Story", width: 580, formatter: storyTitleFormatter, cssClass: "cell-story"},

    {id: "diggs", name: "Diggs", field: "diggs", width: 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>

SlickGrid example 6:Ajax加载的更多相关文章

  1. Angular使用$compile为从Ajax加载的HTML绑定ng-click事件

    这是一个Angular使用$compile为从Ajax加载的HTML绑定ng-click事件的实现方式,由于近期忙碌,就先放代码.代码如下: <table data-ng-table=" ...

  2. jq mobile非ajax加载，ready执行两次

    jqm只有通过ajax加载的页面才只执行一次ready(正常情况) 页面刷新(同非ajax加载的页面)都会执行两次ready,包括pageinit和pageshow事件也是如此. 两种避免的方法是: ...

  3. 360chrome,google chrome浏览器使用jquery.ajax加载本地html文件

    使用360chrome和google chrome浏览器加载本地html文件时,会报错,提示: XMLHttpRequest cannot load file:///Y:/jswg/code/html ...

  4. Ajax加载子域跨站cookie丢失的问题.

    我们有两个网站一个是main.xxx.cn 一个是 preveiw.xxx.cn main.xxx.cn 页面需要加载preview.xxx.cn的内容. 项目里面出现了两种的加载preview.xx ...

  5. jQuery-瀑布流-绝对定位布局（二）(延迟AJAX加载图片)

    jQuery-瀑布流-绝对定位布局(二)(延迟AJAX加载图片)   瀑布流-绝对定位布局,与浮动布局的区别在于 1.布局不一样: 绝对定位:一个UL里面放置所有的绝对定位的LI: 浮动布局:多个(一 ...

  6. jQuery Mobile 手动显示ajax加载器，提示加载中...

    在使用jQuery Mobile开发时,有时候我们需要在请求ajax期间,显示加载提示框(例如:一个旋转图片+一个提示:加载中...).这个时候,我们可以手动显示jQuery Mobile的加载器,大 ...

  7. java调用phantomjs采集ajax加载生成的网页

    java调用phantomjs采集ajax加载生成的网页 日前有采集需求,当我把所有的对应页面的链接都拿到手,准备开始根据链接去采集(写爬虫爬取)对应的终端页的时候,发觉用程序获取到的数据根本没有对应 ...

  8. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  9. css3 ajax加载进度线

    最近想了想ajax加载时的进项,便着手写了这个,我想css3的支持度已经够了 <button onclick="start()">button</button&g ...

随机推荐

  1. tcp/ip分片

    from http://blog.csdn.net/cumirror/article/details/5071234 前段时间要做一个关于网络嗅探的程序,里面要重组IP分片,TCP分片. 但做的时候忽 ...

  2. 客户端 ios与android 的判断

    <script> if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //alert(navigator.userAgen ...

  3. Browserify

    NodeJS 把 JavaScript 的使用从浏览器端扩展到了服务器端,使得前端开发人员可以用熟悉的语言编写服务器端代码.这一变化使得 NodeJS 很快就流行起来.在 NodeJS 社区中有非常多 ...

  4. window.cookie

    本地测试cookie用火狐来测试 首先cookie是document上的一个属性. 先弹出一个cookie alert(document.cookie); //弹出是空的 设置cookie,格式是有一 ...

  5. JavaScript——DOM操作——Window.document对象

    一.找到元素: docunment.getElementById("id"):根据id找,最多找一个:    var a =docunment.getElementById(&qu ...

  6. php面向对象(OOP)编程完全教程

    摘自:http://www.php-note.com/article/detail/41 面向对象编程(OOP)是我们编程的一项基本技能,PHP5对OOP提供了良好的支持.如何使用OOP的思想来进行P ...

  7. SQL Sever 身份验证 sa用户设置

    1.用windows身份验证登陆数据库找到sa用户 2.鼠标右键sa->属性->常规,设置密码. 3.选择状态->登陆选择已启用 4.选中当前数据库 鼠标右键->属性 5.选择 ...

  8. 最大权闭合图最大获益（把边抽象为点）HDU3879

    题意:给出一个无向图,每个点都有点权值代表花费,每条边都有利益值,代表形成这条边就可以获得e[i]的利益,问选择那些点可以获得最大利益是多少? 分析:把边抽象成点,s与该点建边,容量是利益值,每个点与 ...

  9. java中创建线程的几种方法及区别

    1,实现Runnable接口创建线程 特点: A:将代码和数据分开,形成清晰的模型 B:线程体run()方法所在的类可以从其它类中继承一些有用的属性和方法 C:有利于保持程序风格的一致性 2,继承Th ...

  10. （转）SQL对Xml字段的操作

    T-Sql操作Xml数据 一.前言 SQL Server 2005 引入了一种称为 XML 的本机数据类型.用户可以创建这样的表,它在关系列之外还有一个或多个 XML 类型的列:此外,还允许带有变量和 ...