You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
169 lines
4.0 KiB
169 lines
4.0 KiB
4 years ago
|
(function ($) {
|
||
|
/***
|
||
|
* A sample AJAX data store implementation.
|
||
|
* Right now, it's hooked up to load search results from Octopart, but can
|
||
|
* easily be extended to support any JSONP-compatible backend that accepts paging parameters.
|
||
|
*/
|
||
|
function RemoteModel() {
|
||
|
// private
|
||
|
var PAGESIZE = 50;
|
||
|
var data = {length: 0};
|
||
|
var searchstr = "";
|
||
|
var sortcol = null;
|
||
|
var sortdir = 1;
|
||
|
var h_request = null;
|
||
|
var req = null; // ajax request
|
||
|
|
||
|
// events
|
||
|
var onDataLoading = new Slick.Event();
|
||
|
var onDataLoaded = new Slick.Event();
|
||
|
|
||
|
|
||
|
function init() {
|
||
|
}
|
||
|
|
||
|
|
||
|
function isDataLoaded(from, to) {
|
||
|
for (var i = from; i <= to; i++) {
|
||
|
if (data[i] == undefined || data[i] == null) {
|
||
|
return false;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
return true;
|
||
|
}
|
||
|
|
||
|
|
||
|
function clear() {
|
||
|
for (var key in data) {
|
||
|
delete data[key];
|
||
|
}
|
||
|
data.length = 0;
|
||
|
}
|
||
|
|
||
|
|
||
|
function ensureData(from, to) {
|
||
|
if (req) {
|
||
|
req.abort();
|
||
|
for (var i = req.fromPage; i <= req.toPage; i++)
|
||
|
data[i * PAGESIZE] = undefined;
|
||
|
}
|
||
|
|
||
|
if (from < 0) {
|
||
|
from = 0;
|
||
|
}
|
||
|
|
||
|
if (data.length > 0) {
|
||
|
to = Math.min(to, data.length - 1);
|
||
|
}
|
||
|
|
||
|
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 (fromPage > toPage || ((fromPage == toPage) && data[fromPage * PAGESIZE] !== undefined)) {
|
||
|
// TODO: look-ahead
|
||
|
onDataLoaded.notify({from: from, to: to});
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
var url = "http://octopart.com/api/v3/parts/search?apikey=68b25f31&include[]=short_description&show[]=uid&show[]=manufacturer&show[]=mpn&show[]=brand&show[]=octopart_url&show[]=short_description&q=" + searchstr + "&start=" + (fromPage * PAGESIZE) + "&limit=" + (((toPage - fromPage) * PAGESIZE) + PAGESIZE);
|
||
|
|
||
|
if (sortcol != null) {
|
||
|
url += ("&sortby=" + sortcol + ((sortdir > 0) ? "+asc" : "+desc"));
|
||
|
}
|
||
|
|
||
|
if (h_request != null) {
|
||
|
clearTimeout(h_request);
|
||
|
}
|
||
|
|
||
|
h_request = setTimeout(function () {
|
||
|
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});
|
||
|
|
||
|
req = $.jsonp({
|
||
|
url: url,
|
||
|
callbackParameter: "callback",
|
||
|
cache: true,
|
||
|
success: onSuccess,
|
||
|
error: function () {
|
||
|
onError(fromPage, toPage)
|
||
|
}
|
||
|
});
|
||
|
req.fromPage = fromPage;
|
||
|
req.toPage = toPage;
|
||
|
}, 50);
|
||
|
}
|
||
|
|
||
|
|
||
|
function onError(fromPage, toPage) {
|
||
|
alert("error loading pages " + fromPage + " to " + toPage);
|
||
|
}
|
||
|
|
||
|
function onSuccess(resp) {
|
||
|
var from = resp.request.start, to = from + resp.results.length;
|
||
|
data.length = Math.min(parseInt(resp.hits),1000); // limitation of the API
|
||
|
|
||
|
for (var i = 0; i < resp.results.length; i++) {
|
||
|
var item = resp.results[i].item;
|
||
|
|
||
|
data[from + i] = item;
|
||
|
data[from + i].index = from + i;
|
||
|
}
|
||
|
|
||
|
req = null;
|
||
|
|
||
|
onDataLoaded.notify({from: from, to: to});
|
||
|
}
|
||
|
|
||
|
|
||
|
function reloadData(from, to) {
|
||
|
for (var i = from; i <= to; i++)
|
||
|
delete data[i];
|
||
|
|
||
|
ensureData(from, to);
|
||
|
}
|
||
|
|
||
|
|
||
|
function setSort(column, dir) {
|
||
|
sortcol = column;
|
||
|
sortdir = dir;
|
||
|
clear();
|
||
|
}
|
||
|
|
||
|
function setSearch(str) {
|
||
|
searchstr = str;
|
||
|
clear();
|
||
|
}
|
||
|
|
||
|
|
||
|
init();
|
||
|
|
||
|
return {
|
||
|
// properties
|
||
|
"data": data,
|
||
|
|
||
|
// methods
|
||
|
"clear": clear,
|
||
|
"isDataLoaded": isDataLoaded,
|
||
|
"ensureData": ensureData,
|
||
|
"reloadData": reloadData,
|
||
|
"setSort": setSort,
|
||
|
"setSearch": setSearch,
|
||
|
|
||
|
// events
|
||
|
"onDataLoading": onDataLoading,
|
||
|
"onDataLoaded": onDataLoaded
|
||
|
};
|
||
|
}
|
||
|
|
||
|
// Slick.Data.RemoteModel
|
||
|
$.extend(true, window, { Slick: { Data: { RemoteModel: RemoteModel }}});
|
||
|
})(jQuery);
|