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. 到底UDP和TCP是什么个概念？

    今天在论坛看到一牛人对tcp和udp的解释和区分,突然间恍然大悟. 以下全为拷贝. 在现实生活中,“要想富,先修路”:同时人总要“居有定所”,于是盖起了N多的房子.但是当你和同事商量好去做客的时候却发 ...

  2. windows远程控制ubuntu尝试--未成功

    按照百度知道上的步骤一步一步操作,下载xrdp,一切很顺利. 直至出现了,如下的語言: connecting to sesman ip 尝试找到原因第一个原因 第二次的分析解释 至今还没找出原因

  3. Fixed 鸟粪一样的TreeView下的NodeMouseDoubleClick Bug

    private void treeView1_NodeMouseDoubleClick(object sender, TreeNodeMouseClickEventArgs e) { Rectangl ...

  4. vs2013 visual studio 插件安装

          svn插件: AnkhSVN是一款在VS中管理Subversion的插件,您可以在VS中轻松的提交.更新.添加文件,而不用在命令行或资源管理器中提交.而且该插件属于开源项目· 官网:htt ...

  5. int 与 Integer--话说数组转集合

    话说是自从JDK5后,而这就可以自动进行类型转换了. 当然,区别还是有的,就是对象和“非对象”什么的.可是,今天进行一个测试,出了一个小问题,现将代码贴下: 代码0:先来一个正常点的,用String进 ...

  6. [转] JAVA多线程和并发基础面试问答

    JAVA多线程和并发基础面试问答 原文链接:http://ifeve.com/java-multi-threading-concurrency-interview-questions-with-ans ...

  7. oracle数据库的归档模式

    1:开发环境和测试环境中,数据库的日志模式和自动归档模式一般都是不设置的,这样有利于系统应用的调整,也免的生成大量的归档日志文件将磁盘空间大量的消耗. 2:生产环境时,将其设置为日志模式并自动归档就相 ...

  8. oracle 分区表的维护

    1:添加分区: ALTER TABLE SALES ADD PARTITION P3 VALUES LESS THAN(TO_DATE('2003-06-01','YYYY-MM-DD')); SAL ...

  9. 夺命雷公狗—angularjs—20—$watch监听的用法

  10. DDR3命令状态(二)

    DDR3中的状态机Diagram,详见相册. ACT:Activate,表示输出行地址,和是否自动precharge控制位. PRE:Precharge,在读写后,可以根据A10来判断是否自己进行pr ...