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. bootstrap 时间选择器 datetime

    $("'#datetimepicker").datetimepicker({ format: "yyyy-mm-dd hh:ii:ss",//设置时间格式,默认 ...

  2. 基于axis2框架的两种发布webservice的方法

    这次在中韩的产品定义平台的开发,有幸接触到了通过自己写webservice给其他系统调用的项目. 具体开发背景:这个平台做了几个查询接口都是,都是用servlet方式处理请求,而这边系统之间是通过we ...

  3. Java基础之访问文件与目录——列出目录内容（ListDirectoryContents）

    控制台程序,列出目录的全部内容并使用过滤器来选择特定的条目. import java.nio.file.*; import java.io.IOException; public class List ...

  4. leetcode-5 最长回文子串(动态规划)

    题目要求: * 给定字符串,求解最长回文子串 * 字符串最长为1000 * 存在独一无二的最长回文字符串 求解思路: * 回文字符串的子串也是回文,比如P[i,j](表示以i开始以j结束的子串)是回文 ...

  5. 实验十三_编写、应用中断例程_2 & 总结

    编写并安装int 7ch中断例程,功能为完成loop指令的功能 参数:(cx)= 循环次数,(bx)= 位移 以上中断例程安装成功后,对下面的程序进行单步跟踪,尤其注意观察int.iret指令执行前后 ...

  6. [转]JVM内幕：Java虚拟机详解

    本文由 ImportNew - 挖坑的张师傅 翻译自 jamesdbloom.欢迎加入翻译小组.转载请见文末要求. 这篇文章解释了Java 虚拟机(JVM)的内部架构.下图显示了遵守Java SE 7 ...

  7. Java基础(55):Exception类详解（转）

    Java中的异常 Exception java.lang.Exception类是Java中所有异常的直接或间接父类.即Exception类是所有异常的根类. 比如程序: public class Ex ...

  8. UVA 10891 Game of Sum（DP）

    This is a two player game. Initially there are n integer numbers in an array and players A and B get ...

  9. Demo12SimpleAdapter

    /Users/alamps/AndroidStudioProjects/Demo12SimpleAdapter/Demo12SimpleAdapter/src/main/res/layout/data ...

  10. register_shutdown_function

    脚本时常死掉,而且并不总是那么好看. 我们可不想给用户显示一个致命错误,又或者一个空白页(在display_errors设为off的情况下) . PHP中有一个叫做  register_shutdow ...