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. mysql：键缓存

    myisam的主要优化参数: key_buffer_size - 这对MyISAM表来说非常重要,是用来设置整个MySQL中常规Key Cache的大小.一般来说,如果MySQL运行在32位平台,此值 ...

  2. Swift游戏实战-跑酷熊猫 03 熊猫跑动动画

    这节内容,我们一起来利用SKAction的来为熊猫创建动画,我们将学会通过纹理组产生动画,使用永远循环的SKAction让熊猫不停的跑动. 要点: 枚举的使用:用来记录熊猫的动作状态 enum Sta ...

  3. ibatis学习过程

    ibatis 中map in查询的做法 1:如果传过来的对象就是直接的map数组   list<hashmap<key,value>>的形式  [{1:1},{1:1}}的形式 ...

  4. struts配置通配符*来匹配方法，实现动态调用

    01:web.xml中配置,启动struts2 <?xml version="1.0" encoding="UTF-8"?> <web-app ...

  5. 解决Android抽屉被击穿问题

    1,创建一个抽屉DrawerLayout,在V4包下android.support.v4.widget.DrawerLayout,在要设置抽屉的布局中设置android:layout_gravity= ...

  6. spark history-server的使用

    为什么需要historyServer? 在运行Spark Application的时候,Spark会提供一个WEBUI列出应用程序的运行时信息:但该WEBUI随着Application的完成(成功/失 ...

  7. oracle查询表的索引

    select * from user_indexes where table_name='表名'; select * from user_ind_columns where index_name='索 ...

  8. EBS多OU和多帐套客户化总结

    (一) 多OU总结 . Form多OU实现 ) 创建一个Table,以CUX_AP_CHECK_HEADER_ALL为例 ) 创建Table的两个Synonym(一个不含_ALL,一个以_ALL结尾) ...

  9. json和字符串/数组/集合的互相转换の神操作总结

    一:前端字符串转JSON的4种方式 1,eval方式解析,恐怕这是最早的解析方式了. function strToJson(str){ var json = eval('(' + str + ')') ...

  10. Oracle游标整理二

    1.概念     游标是指向SQL处理的内存区的句柄或指针.当使用一个PL/SQL块来执行DML语句或只返回一行结果的SELECT语句时,系统将自动创建一个隐式游标.如果SQL语句返回多个结果,就必须 ...