У вас возникли проблемы с получением сетки с гладкой сеткой, чтобы показать, как нажимать на загрузку ajax при загрузке данных. Код ниже, Любая помощь оценивается. Этот код может отсутствовать в нескольких скобках, но вы получите идею. Я пытаюсь поместить ajax spinner на страницу, когда данные загружаются, однако у меня есть пара других элементов управления, которые конфликтуют, поэтому не уверены, что я правильно их реализую.Загрузчик Slackgrid Loader и Datagrid
var loadingIndicator = null;
dataView = new Slick.Data.DataView();
grid = new Slick.Grid("#_data", dataView, columns, options);
pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
grid.onViewportChanged.subscribe(function (e, args) {
var vp = grid.getViewport();
loader.ensureData(vp.top, vp.bottom);
});
function comparer(a, b) {
var x = a[sortcol],
y = b[sortcol];
return (x == y ? 0 : (x > y ? 1 : -1));
}
grid.onSort.subscribe(function (e, args) {
sortdir = args.sortAsc ? 1 : -1;
sortcol = args.sortCol.field;
dataView.sort(comparer, args.sortAsc);
});
loader.onDataLoading.subscribe(function() {
if (!loadingIndicator) {
loadingIndicator = $("<span class='loading-indicator'><label>Buffering...</label></span>").appendTo(document.body);
var $g = $("#_data");
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();
});
// loadingIndicator.fadeOut();
dataView.beginUpdate();
$("#_data").show();
dataView.onRowCountChanged.subscribe(function (e, args) {
grid.updateRowCount();
grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
grid.invalidateRows(args.rows);
grid.render();
});
dataView.onPagingInfoChanged.subscribe(function (e, pagingInfo) {
var isLastPage = pagingInfo.pageNum == pagingInfo.totalPages - 1;
var enableAddRow = isLastPage || pagingInfo.pageSize == 0;
var options = grid.getOptions();
if (options.enableAddRow != enableAddRow) {
grid.setOptions({
enableAddRow: enableAddRow
});
}
});
dataView.beginUpdate();
dataView.setItems(data);
dataView.endUpdate();
// load the first page
grid.onViewportChanged.notify();
})
}
})
.fail(function (t) {
alert("didn't work.");
});
}