3. Проект

3.1. Построение таблицы на основе данных из базы данных

Таблица в JQuery-easyui может быть построена множеством различных способов:

а) Таблица может быть описана в привычном HTML-виде с помощью соответствующих тегов <table>, <tr>, <td> и т.д.

б) Может быть построена из объектного массива данных, описанного в Javascript-коде

в) Может быть загружена с внешних URL

Рис. 5. Пример описания таблицы

На рис. 5 представлен пример описания таблицы и адреса данных для нее на html-страничке.

Нам подходит один из двух последних вариантов. В первом варианте нам понадобится вначале подготовить данные на серверном PHP-скрипте, передать их в javascript и там уже построить таблицу. Во втором варианте нам достаточно правильно подготовить данные для таблицы на Php-сервере и указать адрес их получения в описании таблицы в html-страничке.

3.2. Сортировка

Для реализации задачи сортировки воспользуемся одной из предоставленных библиотекой JQuery-Easy-UI возможностей, описанных в данном демо (см рис. 6):

http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=

Рис. 6. Демо создания сортировки в таблице

Из данного демо мы видим, что для создания возможности сортировки таблицы нам необходимо: 1) указать в описании таблицы название сортируемого столбца таблицы (sortName), порядок сортировки (sortOrder), а также в описании каждого столбца надо указать, какие из них будут «сортируемыми» (sortable).

3.3. Client-side Pagination

Для реализации задачи разбиения на страницы табличного вывода воспользуемся одной из предоставленных библиотекой JQuery-Easy-UI возможностей, описанных в данном демо (см рис. 7):

http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=

Рис. 7. Демо создания разбиения на страницы

Из представленного примера видно, что для реализации разбиения на страницы нашей таблицы, достаточно в ее описании добавить следующие строки:

pagination:true,

pageSize:10

pagination: true - говорит о том, что в таблице будет использоваться разбиение на страницы

pageSize: 10 - указываем, что на каждой странице должно быть не более 10 записей таблицы.

3.4. Выпадающие списки

Для реализации подзадачи выбора типа товаров таблицы в выпадающем списке воспользуемся стандартным html-элементом (тегом) <select></select>.

Параметры <option> выпадающего списка заполним данными, полученными из базы данных на серверном скрипте.

3.5. Интерактивное асинхронное обновление данных в таблице

Для реализации данной подзадачи воспользуемся одной из предоставленных библиотекой JQuery-Easy-UI возможностей (Cell Editing), описанных в данном демо (см рис. 8):

http://www.jeasyui.com/demo/main/index.php?plugin=DataGrid&theme=default&dir=ltr&pitem=

Рис. 8. Интерактивное редактирование ячеек таблицы

Как видно из данного примера, для редактирования ячеек понадобится достаточно подробно описать информацию о столбцах и строках таблицы в полях data, понадобится также описать javascript функцию-обработчик, срабатывающую по событию change на ячейках таблицы.

Для асинхронного обновления данных таблицы после интерактивного изменения воспользуемся стандартной функцией библиотеки JQuery:

ajax(url, settings)

где url – это адрес серверного скрипта, ответственного за асинхронное обновление данных в таблице, settings – дополнительные параметры AJAX-запросы, в которых мы можем указать тип запроса, функцию обратного вызова и т.д. Для интерактивного обновления данных в таблице на сервере воспользуемся этой функцией и передадим серверному скрипту необходимые для обновления параметры: название столбца таблицы, номер строки (или идентификатор товара), новое значение для этой ячейки этого товара.