Данные AJAX от SlickGrid

Я пытаюсь заставить AJAX работать с SlickGrid. Приведенный пример жестко закодирован для Digg.

Кроме того, я не думаю, что кэш работает в этом примере. И из-за ограничения скорости Digg трудно понять, как это работает. Как настроить SlickGrid для получения данных из моей базы данных с помощью поискового вызова.

Ответ 1

Я просто прошел через это, так вот как я это сделал:

Скопируйте содержимое example6-ajax-load.html(в загрузке SlickGrid) в свой html файл - позвоните ему mygrid.html(или в свой код, который генерирует html. В моем случае я использую CodeIgniter, поэтому я скопировал файл mygrid_view.php).
Скопируйте файл slick.remotemodel.js в вашRemoteModel.js.
В "mygrid.html" убедитесь, что у вас есть правильный путь ко всем файлам javascript. Измените slick.remotemodel.js на yourRemoteModel.js. Устраните любые повторяющиеся скрипты - для exmaple, если вы уже затягиваете последнюю версию jQuery, тогда устраните строку в "mygrid.html" , которая вытаскивает jquery-1.4.3.min.js.
В "mygrid.html" измените инициализацию переменной "columns" в соответствии с данными, которые вы хотите отобразить из своей базы данных. Обратите внимание на свойство поля. Это должно совпадать с именами свойств, которые будут возвращены в ответ JSON с вашего сервера. (* см. примечание об этом в конце).
В yourRemoteModel.js измените переменную url, чтобы указать на ваш сервер, передав соответствующие аргументы. В моем случае я передаю страницы и строит параметры на свой сервер следующим образом:

var url = myServerUrl + "? page =" + fromPage + "& rows =" + (((toPage - fromPage) * PAGESIZE) + PAGESIZE);
В yourRemoteModel.js измените вызов jsonp на ajax - если вам не нужно делать этот кросс-домен, и в этом случае вы захотите остаться с jsonp, иначе вы можете изменить его так, чтобы он выглядел следующим образом:
```
        req = $.ajax({
            url: url,
            dataType: 'json',
            success: onSuccess,
            error: function(){
                onError(fromPage, toPage)
            }
            });
```
В yourRemoteModel.js теперь вы должны настроить функцию onSuccess(). Следуйте образцу примера, задав значения из и для целочисленных смещений в записях данных, установив data.length как общее количество записей, а затем установив массив данных. Этот код зависит от того, как выглядит ответ JSON с вашего сервера.
Теперь напишите код на сервере, чтобы сгенерировать ответ JSON. Как вы можете видеть из шага 7, это должно включать смещение записи (или страницы) в данные и указание количества возвращаемых записей, а также массив самих записей. Помните, что каждое поле каждой записи должно иметь имя свойства, которое соответствует параметру "field" в определениях столбцов (начиная с шага 4 выше). Взгляните на ответ от Digg в качестве примера:

http://services.digg.com/search/stories?query=apple&offset=0&appkey=http://slickgrid.googlecode.com&type=javascript&callback=cb

И это должно быть!

* Примечание: в моем случае я не хотел использовать пропускную способность, чтобы возвращать все эти имена свойств, повторяющиеся для каждой записи в ответе JSON, поэтому вместо этого возвращаю массив значений записи. Затем я устанавливаю свойство поля в описании столбца (шаг 4 выше) как целочисленное смещение в этот массив. Поэтому в описаниях столбцов вместо поля: "someFieldName", я использую поле: 3, то в моей удаленной модели функция onSuccess() я устанавливаю данные [from + i] = resp.record [i].data( где .data - это массив в ответе JSON значений полей в записи). Пока это, похоже, хорошо работает для меня (но может быть сложнее отладить, если что-то пойдет не так).

Ответ 2

См. этот запрос pull Функциональный магазин данных AJAX Пример теперь с использованием HackerNews вместо Digg. Вы можете скачать этот Slickgrid и посмотреть пример6-ajax-loading.

Здесь есть важные замечания о пейджинге + ajax + slickgrid: Группы Google: разбиение на страницы SlickGrid + Ajax + DataView

Ответ 3

Добавить класс в столбцы, которые вы хотите связать с помощью ajax
Добавить событие onRenderCompleted
используйте класс как селектор и добавьте материал, подобный другому элементу DOM, внутри функции onRenderCompleted.

Ответ 4

Для всех, кто хочет это сделать, ознакомьтесь с этой вилкой slickgrid. https://github.com/harbulot/SlickGrid

Он добавляет хороший небольшой локальный сервер Python для обеспечения бэкэнда AJAX

git clone [email protected]:harbulot/SlickGrid.git
cd SlickGrid/
python localajaxserver.py

Затем перейдите в http://127.0.0.1:8000/examples/example6b-ajax-localserver.html с вашим браузером.

Посмотрите на запрос Pull, чтобы увидеть, что было изменено https://github.com/harbulot/SlickGrid/compare/mleibman:master...url_builder