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. PostgreSQL Configuration – managing scary settings

    When it comes to highly available database servers and configuration, a very important aspect is whe ...

  2. pgbouncer+pg(fdw)+pg(datanode)分表方案

    pgbouncer+pg(fdw)+pg(datanode)分表方案 (环境RHEL6.5,PG9.4.5,pgbouncer1.5.4,libevent2.0.22) 方案架构图如下: pgboun ...

  3. session 实现保存用户信息

    index.jsp <body> <div style="margin: 0 auto; width: 500px; text-align: center;"&g ...

  4. [转] linux中常用的命令

    系统信息 arch 显示机器的处理器架构(1) uname -m 显示机器的处理器架构(2) uname -r 显示正在使用的内核版本 dmidecode -q 显示硬件系统部件 - (SMBIOS ...

  5. Java基础(63):正则表达式的运用

    Java 正则表达式 正则表达式定义了字符串的模式. 正则表达式可以用来搜索.编辑或处理文本. 正则表达式并不仅限于某一种语言,但是在每种语言中有细微的差别. Java正则表达式和Perl的是最为相似 ...

  6. extjs 常见的小问题

    今天,小白就来总结下extjs的使用的时候的各种小问题或者说是小技巧.希望能够给各位刚接触extjs的朋友一点帮助. 1.当存在store的各种组件的store的autoload属性为false的时候 ...

  7. paper 13：计算机视觉研究群体及专家主页汇总

    做机器视觉和图像处理方面的研究工作,最重要的两个问题:其一是要把握住国际上最前沿的内容:其二是所作工作要具备很高的实用背景.解决第一个问题 的办法就是找出这个方向公认最高成就的几个超级专家(看看他们都 ...

  8. RMAN连接数据库

    连接本地数据库: 方法1: C:\Documents and Settings\Administrator>set oracle_sid=jssweb C:\Documents and Sett ...

  9. eclipse的自动提示功能

    一般情况下按ALT+/即可提示,若想按任意字母都有提示,则可以打开eclipse的自动提示功能,打开或关闭该提示功能的步骤如下: 打开eclipse后一次点Window->Perferences ...

  10. zw版【转发·台湾nvp系列例程】HALCON MirrorRegion (Delphi)

    zw版[转发·台湾nvp系列例程]HALCON MirrorRegion (Delphi) procedure TForm1.Button1Click(Sender: TObject);var img ...