SlickGrid – небольшой javascript-компонент для отображения таблиц. Отличительной чертой этого компонента является концентрация на порядке отображения информации, а не на работе с ее (информации) источником. Другой отличительной чертой SlickGrid является весьма скудная документация, в том числе описание того, что касается работы через AJAX.

SlickGrid довольно неплохой javascript грид, который одинаково быстро работает как с 500 так и с 500 000 записями в таблице. Идея заключается в том, чтобы добавлять в DOM только те элементы, которые отображаются в данный момент, и удалять элементы, которые в данный момент не отображаются. SlickGrid в том числе применяется для StackExchange Data Explorer.

Однако использование SlickGrid в своих проектах вызывает трудности из-за практически полного отсутствия документации, роль которой по замыслу автора должны выполнять примеры, вопросы/ответы на StackOverflow, а также Google-группа. Ну что же, в любом случае это лучше чем ничего.

Я хотел загружать данные в зависимости от параметров запроса без перерисовки всей страницы, то есть используя AJAX. В наборе примеров есть вариант использования AJAX-загрузки данных с фильтрацией. Отлично, то, что мне нужно! Правда пример выдает какую-то ошибку, ну да ладно (пускай будет digg.com виноват). Смотрим «документацию», то есть сорцы примера. Ага, используется некий объект типа Slick.Data.RemoteModel из slick.remotemodel.js. Хм, что же тут происходит? Оказывается, этот вопрос волнует не только меня (раз, два).

Ладно, отложим пока этот момент. Помимо AJAX, я хочу использовать постраничный просмотр строк таблицы. Для этого используется объект типа Slick.Controls.Pager. Но стоп! В качестве аргумента конструктора этого объекта должен выступать объекта типа Slick.Data.DataView. Как увязать DataView и RemoteModel? Попахивает стрельбой из пушки по воробьям… Отложим пока и этот момент. Также, я хочу, чтобы грид занимал всю страницу за исключением верхнего поля с параметрами запроса. Среди примеров есть подходящий вариант. Правда, если добавить в этот пример постраничный просмотр, сам грид мы больше не увидим.

ffffuuuu

В итоге был сделан fork репозитория SlickGrid и добавлен пример с решением описанных проблем. Все оказалось довольно просто.

Для организации AJAX-загрузки необходимо увязать между собой экземпляры объектов типа Slick.Data.DataView и Slick.Grid (первый отвечает за хранение данных для отображения, второй выполняет рендеринг грида):

dataView.onRowCountChanged.subscribe(function (e, args) {
  grid.updateRowCount();
  grid.render();
});
dataView.onRowsChanged.subscribe(function (e, args) {
  grid.invalidateRows(args.rows);
  grid.render();
})

Загрузку данных необходимо выполнять посредством объекта типа Slick.Data.DataView:

function getData() {
  $.get(url, function(data) {
    dataView.beginUpdate();
    dataView.setItems(data);
    dataView.endUpdate();    
  });
}

Для того, чтобы грид и остальные элементы занимали всю площадь страницы, достаточно установить внутреннему объекту пользовательского интерфейса SlickGrid нужную высоту и выполнить специальный метод объекта типа Slick.Grid:

var h = $("#container").height()-$("#header").height()-$("#pager").height()-$(".slick-header").height();
$(".slick-viewport").height(h);
grid.resizeCanvas();

SlickGrid documentation improvement