Может скользить страницы и отображать JSON

Question

Мы хотим загрузить несколько тысяч записей клиенту при запросе страницы и отобразить первые 25 записей. Затем пользователь должен иметь возможность пролистывать записи или обрабатывать список по столбцам или фильтровать по данным в различных столбцах. Мы предпочитаем загружать данные клиенту единовременно, потому что мы бы предпочли большую нагрузку при запросе страницы и более высокую производительность при просмотре или редактировании данных после. Я не вижу ни одного примера подкачки на сайте SlickGrid. Есть ли в SlickGrid пейджинг, или он настолько легкий, что мне пришлось бы самому это реализовать? У кого-нибудь есть какие-либо ссылки или примеры, которыми я бы мог поделиться?

Данные, которые мы будем использовать, будут данными JSON.

Answer 1

Я кодирую с помощью slickgrid уже около недели и обнаружил, что мне нужно было писать сортировку и фильтровать код самостоятельно. Просматривая исходный код, я не вижу ничего, что указывало бы на встроенную подкачку. Вы потратите немало времени на написание кода для него, но, похоже, оно того стоит.

Я загрузил 30000 строк данных, используя ajax/json, и он загружается и сортируется менее чем за 1 секунду. Я не знаю, поможет ли это, но я вызываю этот метод для загрузки своей сетки. Он сортирует на клиенте и фильтрует на сервере:

$.getJSON(baseUrl + '/_GetNewHires?filter=' + filter, function (data) {
    grid = new Slick.Grid($("#NewHiresGrid"), data, columns, options);

    grid.onSort = function (sortCol, sortAsc) {
        sortdir = sortAsc ? 1 : -1;
        sortcol = sortCol.field;

        if (sortAsc == true)
            data.sort(compare);
        else
            data.reverse(compare);

        grid.render();
    };
});

Когда вызывается метод сортировки, массив, связанный с сеткой (данными), переупорядочивается, а затем сетка перезагружается с использованием метода.render(). Чтобы создать страницу, вам понадобится массив всех данных и массив отображаемых данных.

У него есть пример пейджинга, но, будучи любителем javascript, мне трудно следовать.

Answer 2

Есть поддержка подкачки в SlickGrid/slick.dataview.js

dataView = new Slick.Data.DataView();
grid = new Slick.Grid("#myGrid", dataView, columns, options);
dataView.setPagingOptions({
   pageSize: 25,
});
var pager = new Slick.Controls.Pager(dataView, grid, $("#myPager"));

Вы также захотите где-нибудь на своей странице для этого сделать.

<div id="myPager"></div>

Answer 3

Я написал пейджинговый плагин, SlickGrid Enhancement Pager, который значительно упрощает использование нумерации страниц SlickGrid. Он полностью поддерживает JSON. Пожалуйста, смотрите этот проект на GitHub.

Answer 4

//set columns
var columns = [
    {
        id: "mid",
        name: "MID",
        field: "mid",
        cssClass: "cell-title",
        sortable: true,
        sorter:comparer
    },
    {
        id: "id",
        name: "ID",
        field: "id",
        cssClass: "cell-title",
        sortable: true,
        sorter:NumericSorter
    },

В указанном выше наборе сортировщик

var sortcol = "title";
var sortdir = 1;
var percentCompleteThreshold = 0;
var searchString = "";

this.grid.onSort = function(sortCol, sortAsc) {
    sortdir = sortAsc ? 1 : -1;
    sortcol = sortCol.field;
    this.dataView.sort(sortCol.sorter);
    this.grid.render();

}.bind( this );

function comparer(a,b) {
    var x = a[sortcol], y = b[sortcol];
    return sortdir * (x == y ? 0 : (x > y ? 1 : -1));
}

// Define some sorting functions
function NumericSorter(a, b) {
  return sortdir *  (a[sortcol]-b[sortcol]);
}

Answer 5

Это тоже меня озадачило, пока я не получил приведенный ниже код:

grid = new Slick.Grid("#myGrid", data, columns, options);
grid.onSort.subscribe(function(e,args) {
    sortcol = args.sortCol;
    sortAsc = args.sortAsc;

    alert("Sort On " + sortcol.field);

    if (sortAsc == true) {
        data.sort(function (a, b) {
            var nameA = a[sortcol.field].toLowerCase(), nameB = b[sortcol.field].toLowerCase()
            if (nameA < nameB) //sort string ascending
                return -1
            if (nameA > nameB)
                return 1
            return 0 //default return value (no sorting)
        });
    } else {
        data.reverse(function (a, b) {
            var nameA = a[sortcol.field].toLowerCase(), nameB = b[sortcol.field].toLowerCase()
            if (nameA < nameB) //sort string ascending
                return -1
            if (nameA > nameB)
                return 1
            return 0 //default return value (no sorting)
        });
    }

    grid.invalidateAllRows();
    grid.render();
});