Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Updated RemoteModel to be less sample and work out of the box #195

Open
wants to merge 16 commits into
base: master
Choose a base branch
from
Open

Updated RemoteModel to be less sample and work out of the box #195

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
615171d
Throws an error when the container does not exist in the DOM
jrschumacher Mar 4, 2011
ae1fbf1
Merge remote-tracking branch 'upstream/master'
jrschumacher Mar 4, 2011
9b5269c
Updated RemoteModel to be less "sample" and more "simple" implementation
jrschumacher Jun 24, 2011
dbba1b3
Merge branch 'master' of git://github.com/mleibman/SlickGrid
jrschumacher Jun 24, 2011
5c97750
Merge remote-tracking branch 'upstream/master'
jrschumacher Aug 3, 2011
dd27acb
Updated the Remote Model to use options rather than functions.
jrschumacher Aug 3, 2011
c4aee5a
Merge https://github.com/jrschumacher/SlickGrid into remote_model
jaylevitt Oct 26, 2011
8b5827e
fix example to work with options instead of functions; add getOptions…
jaylevitt Oct 26, 2011
b1ea964
support response shaped like a Ruby .to_json collection too
jaylevitt Oct 27, 2011
ba9c255
support either jsonp or ajax/json
jaylevitt Oct 28, 2011
5b167c4
fix jsonp context
jaylevitt Oct 28, 2011
e28b4c2
use strategy instead of switch for different response shapes
jaylevitt Oct 28, 2011
a3c7ff6
Merge pull request #1 from jaylevitt/master
jrschumacher Oct 29, 2011
a322bdb
add a return to this object for chaining
jrschumacher Feb 9, 2012
cf7dcdb
Merge branch 'master' of github.com:jrschumacher/SlickGrid
jrschumacher Feb 9, 2012
f680d9b
Merge branch 'master' of git://github.com/mleibman/SlickGrid into ups…
jrschumacher Feb 9, 2012
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
332 changes: 182 additions & 150 deletions examples/example6-ajax-loading.html
View file
Open in desktop
@@ -1,153 +1,185 @@
<!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>
<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" media="screen" charset="utf-8" />
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
<link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
<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.4.3.min.js"></script>
<script src="../lib/jquery-ui-1.8.5.custom.min.js"></script>
<script src="../lib/jquery.event.drag-2.0.min.js"></script>
<script src="../lib/jquery.jsonp-2.1.4.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 data = [];
var loader = new Slick.Data.RemoteModel({
url: function(fromPage, toPage, PAGESIZE) {
return "http://services.digg.com/search/stories?"
+"query=" + search_query
+"&offset=" + (fromPage * PAGESIZE)
+"&count=" + (((toPage - fromPage) * PAGESIZE) + PAGESIZE)
+"&appkey=http://slickgrid.googlecode.com&type=javascript";
},
response_item: 'stories',
});
var search_query = 'apple';

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) {
if(args.sortCol.field == 'diggs') {
loader.setOptions({
url: function(fromPage, toPage, PAGESIZE) {
return "http://services.digg.com/search/stories?"
+"query=" + search_query
+"&offset=" + (fromPage * PAGESIZE)
+"&count=" + (((toPage - fromPage) * PAGESIZE) + PAGESIZE)
+"&sort=" + (args.sortAsc ? "digg_count-asc" : "digg_count-desc")
+"&appkey=http://slickgrid.googlecode.com"
+"&type=javascript";
}}).clear();
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) {
var search_query = $(this).val();
if (e.which == 13) {
loader.setOptions({
url: function(fromPage, toPage, PAGESIZE, sortcol, sortdir) {
return "http://services.digg.com/search/stories?"
+"query=" + search_query
+"&offset=" + (fromPage * PAGESIZE)
+"&count=" + (((toPage - fromPage) * PAGESIZE) + PAGESIZE)
+"&appkey=http://slickgrid.googlecode.com&type=javascript";
}}).clear();
var vp = grid.getViewport();
loader.ensureData(vp.top, vp.bottom);
}
});



// load the first page
grid.onViewportChanged.notify();
})
</script>
</body>
</html>
3 changes: 0 additions & 3 deletions lib/jquery.jsonp-1.1.0.min.js
View file
Open in desktop

This file was deleted.

3 changes: 3 additions & 0 deletions lib/jquery.jsonp-2.1.4.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.