172 lines
5.1 KiB
HTML
172 lines
5.1 KiB
HTML
|
<!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>Hackernews stories</label>
|
||
|
|
<span style="float:right;display:inline-block;">
|
||
|
|
Search:
|
||
|
|
<input type="text" id="txtSearch" value="github">
|
||
|
|
</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>API access to Hackernews provided through ThriftDB has some latency when paging through results. Be patient.
|
||
|
|
</li>
|
||
|
|
</ul>
|
||
|
|
|
||
|
|
<h2>View Source:</h2>
|
||
|
|
<ul>
|
||
|
|
<li><A href="https://github.com/mleibman/SlickGrid/blob/gh-pages/examples/example6-ajax-loading.html" target="_sourcewindow"> View the source for this example on Github</a></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.2.js"></script>
|
||
|
|
<script src="../lib/jquery.jsonp-2.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 loader = new Slick.Data.RemoteModel();
|
||
|
|
|
||
|
|
var storyTitleFormatter = function (row, cell, value, columnDef, dataContext) {
|
||
|
|
s ="<b><a href='" + dataContext["url"] + "' target=_blank>" +
|
||
|
|
dataContext["title"] + "</a></b><br/>";
|
||
|
|
desc = dataContext["text"];
|
||
|
|
if (desc) { // on Hackernews many stories don't have a description
|
||
|
|
s += desc;
|
||
|
|
}
|
||
|
|
return s;
|
||
|
|
};
|
||
|
|
|
||
|
|
var dateFormatter = function (row, cell, value, columnDef, dataContext) {
|
||
|
|
return (value.getMonth()+1) + "/" + value.getDate() + "/" + value.getFullYear();
|
||
|
|
};
|
||
|
|
|
||
|
|
|
||
|
|
var columns = [
|
||
|
|
{id: "num", name: "#", field: "index", width: 40},
|
||
|
|
{id: "story", name: "Story", width: 520, formatter: storyTitleFormatter, cssClass: "cell-story"},
|
||
|
|
{id: "date", name: "Date", field: "create_ts", width: 60, formatter: dateFormatter, sortable: true},
|
||
|
|
{id: "points", name: "Points", field: "points", 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);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
loader.setSearch($("#txtSearch").val());
|
||
|
|
loader.setSort("create_ts", -1);
|
||
|
|
grid.setSortColumn("date", false);
|
||
|
|
|
||
|
|
// load the first page
|
||
|
|
grid.onViewportChanged.notify();
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|