diff options
| -rw-r--r-- | examples/example6-ajax-loading.html | 68 | ||||
| -rw-r--r-- | examples/examples.css | 7 | ||||
| -rw-r--r-- | lib/jquery.jsonp-1.1.0.min.js | 3 | ||||
| -rw-r--r-- | slick.editors.js | 2 | ||||
| -rw-r--r-- | slick.remotemodel.js | 61 |
5 files changed, 100 insertions, 41 deletions
diff --git a/examples/example6-ajax-loading.html b/examples/example6-ajax-loading.html index 145c01d..0a5d6fc 100644 --- a/examples/example6-ajax-loading.html +++ b/examples/example6-ajax-loading.html @@ -17,7 +17,28 @@ .sort-desc {
background: silver url('../images/sort-desc.png') no-repeat right center !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: 0px 0px 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>
@@ -27,6 +48,7 @@ <script language="JavaScript" src="../lib/jquery.getScrollbarWidth.js"></script>
<script language="JavaScript" src="../lib/jquery.rule-1.0.1-min.js"></script>
<script language="JavaScript" src="../lib/jquery.event.drag-1.5.min.js"></script>
+ <script language="JavaScript" src="../lib/jquery.jsonp-1.1.0.min.js"></script>
<script language="JavaScript" src="../slick.remotemodel.js"></script>
<script language="JavaScript" src="../slick.grid.js"></script>
@@ -37,19 +59,13 @@ <tr>
<td valign="top" width="50%">
<div id="myGrid" style="width:800px;height:700px;"></div>
-
- <hr/>
- <br/>
- <b><u>Status:</u></b> <span id="status"></span>
</td>
<td valign="top">
<h2>Demonstrates:</h2>
-
<ul>
<li>loading data through AJAX</li>
<li>custom row height</li>
</ul>
-
</td>
</tr>
</table>
@@ -65,14 +81,11 @@ return "<b><a href='" + dataContext["link"] + "' target=_blank>" + dataContext["title"] + "</a></b><br/>" + dataContext["description"];
};
- var userIconFormatter = function(row, cell, value, columnDef, dataContext) {
- return "<img src='" + dataContext["user"].icon + "'>";
- };
var columns = [
- {id:"num", name:"#", field:"index", width:40},
- {id:"author", name:"Author", width:40, formatter:userIconFormatter, width:50},
- {id:"story", name:"Story", width:670, formatter:storyTitleFormatter, cssClass:"cell-story"}
+ {id:"num", name:"#", field:"index", width:40, sortable:false},
+ {id:"story", name:"Story", width:670, formatter:storyTitleFormatter, cssClass:"cell-story", sortable:false},
+ {id:"diggs", name:"Diggs", field:"diggs", width:60}
];
var options = {
@@ -82,7 +95,7 @@ enableCellNavigation: false
};
-
+ var loadingIndicator = null;
@@ -92,14 +105,28 @@ grid.onViewportChanged = function() {
var vp = grid.getViewport();
- var pagesize = vp.bottom - vp.top;
-
- loader.ensureData(vp.top - 2*pagesize, vp.bottom + 2*pagesize);
+ loader.ensureData(vp.top, vp.bottom);
}
+ grid.onSort = function(sortCol,sortAsc) {
+ loader.setSort(sortCol.field,sortAsc?1:-1);
+ var vp = grid.getViewport();
+ loader.ensureData(vp.top, vp.bottom);
+ }
loader.onDataLoading.subscribe(function() {
- $("#status").text("Loading...");
+ 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(args) {
@@ -110,17 +137,14 @@ grid.updateRowCount();
grid.render();
- $("#status").text("Ready.");
+ loadingIndicator.fadeOut();
});
// load the first page
grid.onViewportChanged();
-
})
-
</script>
-
</body>
</html>
diff --git a/examples/examples.css b/examples/examples.css index 8163aae..50416e4 100644 --- a/examples/examples.css +++ b/examples/examples.css @@ -68,6 +68,13 @@ li { text-align: left;
}
+.percent-complete-bar {
+ display: inline-block;
+ height: 6px;
+ -moz-border-radius: 3px;
+ -webkit-border-radius: 3px;
+}
+
/* TextCellEditor, DateCellEditor */
diff --git a/lib/jquery.jsonp-1.1.0.min.js b/lib/jquery.jsonp-1.1.0.min.js new file mode 100644 index 0000000..7c47fbd --- /dev/null +++ b/lib/jquery.jsonp-1.1.0.min.js @@ -0,0 +1,3 @@ +// jquery.jsonp 1.1.0 (c)2009 Julian Aubourg | MIT License +// http://code.google.com/p/jquery-jsonp/ +(function(d){var b=function(n){return n!==undefined&&n!==null},m=function(p,n,o){b(p)&&p.apply(n,o)},e=function(n){setTimeout(n,0)},f="",a="&",k="?",l="success",g="error",i=d("head"),h={},c={callback:"C",url:location.href},j=function(s){s=d.extend({},c,s);var r=s.beforeSend,A=0;s.abort=function(){A=1};if(b(r)&&(r(s,s)===false||A)){return s}var q=s.success,o=s.complete,v=s.error,C=s.dataFilter,G=s.callbackParameter,w=s.callback,D=s.cache,n=s.pageCache,t=s.url,I=s.data,x=s.timeout,z,H,F,E;t=b(t)?t:f;I=b(I)?((typeof I)=="string"?I:d.param(I)):f;b(G)&&(I+=(I==f?f:a)+escape(G)+"=?");!D&&!n&&(I+=(I==f?f:a)+"_"+(new Date()).getTime()+"=");z=t.split(k);if(I!=f){H=I.split(k);E=z.length-1;E&&(z[E]+=a+H.shift());z=z.concat(H)}F=z.length-2;F&&(z[F]+=w+z.pop());var p=z.join(k),B=function(J){b(C)&&(J=C.apply(s,[J]));m(q,s,[J,l]);m(o,s,[s,l])},y=function(J){m(v,s,[s,J]);m(o,s,[s,J])},u=h[p];if(n&&b(u)){e(function(){b(u.s)?B(u.s):y(g)});return s}e(function(){if(A){return}var J=d("<iframe />").appendTo(i),L=J[0],N=L.contentWindow||L.contentDocument,P=N.document,K,Q,R=function(S,T){n&&!b(T)&&(h[p]=f);K();y(b(T)?T:g)},M=function(T){N[T]=undefined;try{delete N[T]}catch(S){}},O=w=="E"?"X":"E";if(!b(P)){P=N;N=P.getParentNode()}P.open();N[w]=function(S){A=1;n&&(h[p]={s:S});e(function(){K();B(S)})};N[O]=function(S){(!S||S=="complete")&&!A++&&e(R)};s.abort=K=function(){clearTimeout(Q);P.open();M(O);M(w);P.write(f);P.close();J.remove()};P.write(['<html><head><script src="',p,'" onload="',O,'()" onreadystatechange="',O,'(this.readyState)"><\/script></head><body onload="',O,'()"></body></html>'].join(f));P.close();x>0&&(Q=setTimeout(function(){!A&&R(f,"timeout")},x))});return s};j.setup=function(n){d.extend(c,n)};d.jsonp=j})(jQuery);
\ No newline at end of file diff --git a/slick.editors.js b/slick.editors.js index 1b63bf8..10e7774 100644 --- a/slick.editors.js +++ b/slick.editors.js @@ -24,7 +24,7 @@ var GraphicalPercentCompleteCellFormatter = function(row, cell, value, columnDef else
color = "green";
- return "<span style='display:inline-block;background:" + color + ";height:6px;width:" + value + "%'></span>";
+ return "<span class='percent-complete-bar' style='background:" + color + ";width:" + value + "%'></span>";
};
var YesNoCellFormatter = function(row, cell, value, columnDef, dataContext) {
diff --git a/slick.remotemodel.js b/slick.remotemodel.js index 869b071..f59ae4d 100644 --- a/slick.remotemodel.js +++ b/slick.remotemodel.js @@ -26,10 +26,12 @@ function EventHelper() { */
function RemoteModel() {
// private
+ var PAGESIZE = 100;
var data = {length:0};
var sortcol = null;
var sortdir = 1;
var h_request = null;
+ var req = null; // ajax request
// events
var onDataLoading = new EventHelper();
@@ -51,7 +53,10 @@ function RemoteModel() { function clear() {
- data = {length:0};
+ for (var key in data) {
+ delete data[key];
+ }
+ data.length = 0;
}
@@ -59,43 +64,60 @@ function RemoteModel() { if (from < 0)
from = 0;
- while (data[from] != undefined && from < to)
- from++;
-
- while (data[to] != undefined && from < to)
- to--;
+ var fromPage = Math.floor(from / PAGESIZE);
+ var toPage = Math.floor(to / PAGESIZE);
+
+ while (data[fromPage * PAGESIZE] !== undefined && fromPage <= toPage)
+ fromPage++;
+
+ while (data[toPage * PAGESIZE] !== undefined && fromPage <= toPage)
+ toPage--;
- if (from == to || isDataLoaded(from,to))
+ if (fromPage > toPage || ((fromPage == toPage) && data[fromPage*PAGESIZE] !== undefined)) {
+ // TODO: lookeahead
return;
+ }
+
+
+ var url = "http://services.digg.com/stories/topic/apple?offset=" + (fromPage * PAGESIZE) + "&count=" + PAGESIZE + "&appkey=http://slickgrid.googlecode.com&type=javascript"
+
- var url = "http://services.digg.com/stories/topic/apple?offset=" + from + "&count=" + (to-from+1) + "&appkey=http://slickgrid.googlecode.com&type=javascript"
-
- //if (sortcol != null)
- // url += ("&sort=" + sortcol + "&dir=" + ((sortdir>0)?"ASC":"DESC"));
+ switch (sortcol) {
+ case "diggs":
+ url += ("&sort=" + ((sortdir>0)?"digg_count-asc":"digg_count-desc"));
+ break;
+ }
- // TODO: make the request abortable (not supported by jQuery for JSONP)
+ if (req) req.abort();
if (h_request != null)
window.clearTimeout(h_request);
h_request = window.setTimeout(function() {
- console.warn("loading...");
+ for (var i=fromPage; i<=toPage; i++)
+ data[i*PAGESIZE] = null; // null indicates a 'requested but not available yet'
onDataLoading.notify({from:from, to:to});
- $.ajax({
- type: "GET",
+ req = $.jsonp({
url: url,
+ callbackParameter: "callback",
cache: true, // Digg doesn't accept the autogenerated cachebuster param
- dataType: "jsonp",
- success: _ajaxCallback
+ success: onSuccess,
+ error: function(){
+ onError(fromPage, toPage)
+ }
});
}, 50);
}
- function _ajaxCallback(resp) {
+ function onError(fromPage,toPage) {
+ alert("error loading pages " + fromPage + " to " + toPage);
+ }
+
+ function onSuccess(resp) {
var from = resp.offset, to = resp.offset + resp.count;
data.length = parseInt(resp.total);
@@ -104,6 +126,8 @@ function RemoteModel() { data[from + i].index = from + i;
}
+ req = null;
+
onDataLoaded.notify({from:from, to:to});
}
@@ -119,6 +143,7 @@ function RemoteModel() { function setSort(column,dir) {
sortcol = column;
sortdir = dir;
+ clear();
}
|