Google+ VKontakte Facebook Twitter Odnoklassniki Favorites More

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

Опубликовал: Thursday, June 20, 2024 в категории jQuery, Подборка рецептов | Пока нет комментариев

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

Решение

Для решения такой многогранной задачи хорошо подойдет плагин jqGrid. Чтобы рассказать про все возможности этого плагина, придется написать отдельную книгу. Поэтому мы будем рассматривать только самые основные варианты его применения. В листинге 12.1.1 приведен пример наполнения таблицы локальными данными.

Листинг 1 2 .1 .1 . Использование плагина jqGrid

Обсуждение

Для того чтобы иметь возможность применять плагин jqGrid на веб-странице, необходимо подключить к ней файл библиотеки js/jquery-1.5.2.min.js, файл самого плагина — js/jquery.jqGrid.min.js и файл локализации js/i18n/grid.locale-ru.js. Стилевое оформление задается в подключаемых файлах css/ui.jqgrid.css и css/redmond/ jquery-ui-1.8.11.custom.css — плагин поддерживает темы оформления UI jQuery.

HTML-разметка, показанная в листинге 12.1.1, до смешного проста — открывающий и закрывающий теги table. Открывающий тег имеет идентификатор example. И это абсолютно вся разметка!

Самое интересное ждет нас при изучении JavaScript-кода. Не стоит пугаться его внушительного объема — на самом деле не все так сложно.

Сначала с помощью селектора выбираем необходимый элемент по его идентификатору и применяем к нему плагин jqGrid. А дальше передаем плагину объект с настройками, которые рассмотрим несколько подробнее.

Свойство datatype, определяющее тип информации, в нашем примере содержит строку local — мы будем наполнять таблицу локальными данными. Другие возможные варианты этого свойства — xml, xmlstring, json, jsonstring, javascript и function.

В свойстве height передаем число 150. Так задается высота области, в которой будут отображаться строки таблицы. Если строк окажется больше, чем можно отобразить в этой области, справа появится полоса прокрутки. Похожим образом можно установить и ширину таблицы. Но мы выберем другой вариант, и несколько позже попробуем установить ширину для каждой ячейки в строке.

В свойстве colNames описываем массив, содержащий заголовки колонок таблицы.

В свойстве colModel тоже массив, но каждый его элемент — объект, свойства которого описывают модели ячеек соответствующего столбца таблицы.

Здесь свойство name является обязательным и задает уникальное имя колонки в таблице. С помощью свойства width можно задать ширину колонки, а свойство align поможет выровнять содержимое ячеек.

Щелкая указателем мыши по заголовку колонки, можно сортировать данные. В свойстве sorttype указывается строка, которая определяет, как именно будут сортироваться данные. Например, значения int или integer указывают при сортировке данных, как целых чисел. Значения float/number/currency — данные сортируются как десятичные числа. Другие возможные значения — data, text. В этом

свойстве можно определить даже пользовательскую функцию для сортировки. Нужно отметить, что свойство sorttype служит только для работы с локальными данными.

Кстати, сортировку по отдельным колонкам таблицы можно запретить, передав в настройках свойство sortable со значением false. В примере из листинга 12.1.1 не сортируется колонка Код региона.

Установив указатель на границу колонки в заголовке таблицы, нажав и удерживая левую кнопку мыши и перемещая указатель, можно менять ширину колонок. Впрочем, при необходимости, эту возможность можно запретить, передав в настройках свойство resizable со значением false. В примере из листинга 12.1.1 колонка Id не имеет возможности изменения ширины.

Следующее далее по коду свойство — multiselect. Передав здесь значение true, разрешаем выделение одновременно более одной строки. К тому же слева добавляется столбец c элементами checkbox для каждой строки. В заголовке таблицы появляется общий checkbox.

Последнее свойство, с которым мы познакомимся на примере из листинга 12.1.1, — свойство caption. Тут все должно быть ясно сразу — заголовок, отображаемый сверху таблицы.

Далее нам встречается массив mydata — это те данные, которыми будет наполнена таблица. Каждый элемент массива — объект, названия свойств которого соответствуют значениям name, заданным в модели колонок colModel.

И наконец, следующие три строки кода — это собственно заполнение таблицы содержимым. Для этой операции мы используем вспомогательную функцию $.each библиотеки jQuery. Напомню, что она позволяет совершать обход массивов (или объектов) с применением некоторой функции для каждого элемента. В нашем случае мы вызываем метод addRowData для каждого элемента приготовленного массива и передаем методу индекс элемента +1 и его значение.

Результат наших усилий можно увидеть на рис. 12.1.

Рис. 12.1. Использование плагина jqGrid

Продолжим изучение возможностей плагина jqGrid при работе с локальными данными и попробуем выполнять над ними некоторые манипуляции. Например, узнаем, как можно получать данные из ячеек выбранной строки, как добавлять, редактировать и удалять строки таблицы. Пример, демонстрирующий эти возможности, приведен в листинге 12.1.2.

Листинг 1 2 .1 .2 . Использование плагина jqGrid

В HTML-разметке, приведенной в листинге 12.1.2, добавился элемент p, внутри которого есть четыре ссылки. При нажатии на них мы будем выполнять соответствующие действия.

Настройки, передаваемые плагину при инициализации, изменились незначительно. Массив данных mydata остался прежним, поэтому его элементы не показаны в листинге. Процедура наполнения таблицы данными также не претерпела изменений.

А вот следующий далее JavaScript-код пока нам не знаком — займемся его подробным рассмотрением.

Сначала мы выбираем первый элемент a внутри параграфа p и связываем с ним обработчик события click. Здесь мы применяем к таблице метод getGridParam, которому передаем аргумент selrow. Аргумент selrow содержит идентификатор последней выбранной строки, и мы имеем возможность сохранить его в переменной id. Если эта операция прошла удачно, то мы вызовем метод getRowData и передадим ему переменную id. Этот метод возвращает объект, названия свойств которого соответствуют названиям, определенным в colModel, а значения являются данными, содержащимися в ячейках выбранной строки. Таким образом, сохранив объект в переменной row, мы получаем возможность обратиться к любому его свойству, т. е. другими словами, — получить любые значения, содержащиеся в ячейках выбранной строки.

Двигаемся дальше, добавляем в цепочку вызовов метод next, который позволяет нам переместиться к следующему элементу а, а затем также назначить ему обработчик события click.

В этом обработчике попробуем добавить еще одну строку в таблицу. Сначала приготовим данные: в переменной datarow сохраним объект, свойства которого нам уже хорошо знакомы — это "имена" ячеек. Каждому свойству зададим какие-либо значения. Осталось применить к таблице метод addRowData, которому в качестве аргументов передать значение идентификатора и приготовленный ранее объект datarow.

Следующий next в цепочке — и мы перемещаемся к третьему элементу a. Обработчик события click для него начинается с получения значения идентификатора выбранной строки с помощью метода getGridParam, так же, как и в первом случае. Если идентификатор получен, применяем метод setRowData, которому в первом параметре передаем значение идентификатора строки, а во втором — объект с "именами" ячеек и их новым содержимым.

Последний вызов метода next — получаем четвертый элемент a, и, связав с ним обработчик click, пробуем удалить выбранную строку. Сначала опять получаем значение идентификатора строки с помощью getGridParam, а затем применяем метод delRowData. Аргументом метода является полученный идентификатор.

До сих пор мы изучали возможности плагина jqGrid, используя локальные данные. Перейдем к более серьезным примерам — попробуем загружать данные с сервера в формате JSON, увеличим объемы обрабатываемых данных и начнем знакомиться с навигационной панелью плагина.

Листинг 1 2 .1 .3 . Использование плагина jqGrid

В примере, приведенном в листинге 12.1.3, несколько изменилась HTML-разметка. Помимо пары тегов table, появился элемент div с идентификатором pager — он послужит для создания навигационной панели.

Что касается JavaScript-кода, то в его начале мы, так же как и раньше, выбираем таблицу по идентификатору и связываем с ней плагин jqGrid. Но поскольку теперь мы будем оперировать данными, полученными с сервера, то изменятся и некоторые настройки. Мы будем разбирать те из них, которые нам не были знакомы до сих пор.

И первое же свойство в объекте настроек — url — нам пока не встречалось. Но ничего непонятного тут нет. В этом свойстве указывается адрес файла, к которому следует обращаться за получением данных.

Свойство datatype нам уже встречалось. Но если при работе с локальными данными мы указывали в нем local, то теперь задали значение json — мы ожидаем получить от сервера данные именно в этом формате.

Свойства height и colNames пропускаем, а вот в colModel произошло небольшое изменение. В объектах, описывающих настройки колонок таблицы, появилось свойство index. Значение, определенное в этом свойстве, передается на сервер в параметре sidx запроса (с самим запросом мы познакомимся несколько позже) и служит для указания имени поля базы данных, по которому должна производиться сортировка.

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

В свойстве pager указывается идентификатор элемента, в котором будет построена навигационная панель плагина.

Свойство sortname содержит "название" колонки таблицы, по которому должна осуществляться сортировка при инициализации плагина, а свойство sortorder — направление сортировки. Значение свойства sortorder передается в запросе к серверу в параметре sord.

Указав в свойстве viewrecords значение true, отображаем в правом нижнем углу, в навигационной панели, информацию об общем числе записей в таблице и о номерах строк, отображаемых в текущий момент.

Нам осталось разобраться всего в одной строке JavaScript-кода, в той самой, которая отвечает за формирование элементов управления в навигационной панели. Мы вновь выбираем таблицу по идентификатору, применяем к ней метод jqGrid и пе-

редаем ему три аргумента. Первый аргумент — строка с названием метода navGrid, который необходимо вызвать, второй — строка с идентификатором элемента pager, который будет служить навигационной панелью, и третий — объект, с незнакомыми пока свойствами edit, del, add и search. Знакомство с ними нам еще предстоит, а пока ограничимся тем, что всем четырем свойствам присвоим значение false.

Внешний вид таблицы с навигационной панелью показан на рис. 12.2.

Рис. 12.2. Использование плагина jqGrid с навигационной панелью

ПРИМЕЧАНИЕ

При создании навигационной панели с помощью метода navGrid мы использовали новый API, тогда как в примерах из листингов 12.1.1 и 12.1.2 при вызове методов addRowData, getGridParam, getRowData, addRowData, setRowData и delRowData был применен старый API. В своих приложениях вы можете выбрать любую форму записи.

Чтобы отправить данные на сервер, потребуется GET-запрос, пример которого приведен в листинге 12.1.3а.

Листинг 1 2 .1 .3 а . Использование плагина jqGrid

http://www.server.ru/datafromserver.php?_search=false&nd=1301680124043&rows= 10&page=90&sidx=city&sord=desc

Первый параметр _search может принимать значения false или true. В нашем случае передается значение false, т. к. панели поиска пока у нас нет (с ней знакомство еще предстоит). Параметр nd передается для предотвращения кэширования запроса. Следующие далее параметры уже немного знакомы: rows — число строк таблицы, которые выводятся на одной странице, page — номер страницы, sidx — поле, по которому необходимо проводить сортировку, и sord — направление сортировки.

Пример JSON-объекта, который возвращается сервером в ответ на такой запрос, приведен в листинге 12.1.3б.

Листинг 1 2 .1 .3 б. Использование плагина jqGrid

[code language=”text”]
{
“page”:”90″,
“total”:1000, “records”:”10000″,
“rows”:[
{“id”:”821″,”cell”:[“821″,”AT”,”03″,”Waldenstein”,”48.7167″,”15.0167″]},
{“id”:”7555″,”cell”:[“7555″,”CH”,”01″,”Waldenburg”,”47.3833″,”7.75″]},
{“id”:”820″,”cell”:[“820″,”AT”,”03″,”Waldegg”,”47.8667″,”16.0333″]},
{“id”:”7381″,”cell”:[“7381″,”CA”,”SK”,”Waldeck”,”50.3667″,”-107.583″]},
{“id”:”8395″,”cell”:[“8395″,”CH”,”25″,”Wald”,”47.2833″,”8.9167″]},
{“id”:”3549″,”cell”:[“3549″,”BE”,”01″,”Walcourt”,”50.25″,”4.4167″]},
{“id”:”8284″,”cell”:[“8284″,”CH”,”24″,”Walchwil”,”47.1″,”8.5167″]},
{“id”:”2023″,”cell”:[“2023″,”AU”,”02″,”Walcha”,”-30.9833″,”151.6″]},
{“id”:”4538″,”cell”:[“4538″,”BE”,”09″,”Wakken”,”50.9333″,”3.4″]},
{“id”:”7253″,”cell”:[“7253″,”CA”,”QC”,”Wakefield”,”45.6333″,”-75.9333″]}
]
}

Исходный код файла datafromserver.php, который служит для получения информации из базы данных и формирования объекта JSON, помещен на компакт-диске, прилагаемом к книге. Там же находится файл, содержащий SQL Dump таблицы, рассматриваемой в примерах этой главы.

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

Листинг1 2 .1 .4 . Использование плагина jqGrid

Рассматривать код, приведенный в листинге 12.1.4, будем, только отмечая изменения по сравнению с листингом 12.1.3.

Итак, в JavaScript-коде изменения коснулись свойства colModel объекта настроек плагина. В некоторых элементах массива, которые в свою очередь являются объек-

тами, добавилось свойство editable со значением true — эти ячейки таблицы мы сможем теперь редактировать.

Поменялся заголовок таблицы, но это изменение непринципиальное.

Добавилось свойство editurl с присвоенным значением dataoperation.php — адресом файла на сервере, которому будут адресованы данные не только для редактирования, но и для добавления и удаления.

Некоторые изменения произошли в последней строке JavaScript-кода, которая отвечает за создание навигационной панели. Значения true присвоены свойствам edit, add и del.

Рис. 12.3. Использование плагина jqGrid. Диалог редактирования записи

Обратите внимание на рис. 12.3 — в левом нижнем углу, в навигационной панели появились три дополнительных значка. При нажатии на них вызываются соответствующие диалоги (на рисунке показан диалог редактирования записи).

Исходный код файла dataoperation.php помещен на компакт-диск, прилагаемый к книге.

Следующий пример демонстрирует редактирование данных непосредственно в ячейках таблицы. Для того чтобы реализовать эту возможность, нам потребуется познакомиться с тем, как плагин jqGrid умеет реагировать на события.

Листинг 1 2 .1 .5 . Использование плагина jqGrid

В коде, приведенном в листинге 12.1.5, произошли небольшие изменения. Вопервых, в самом начале мы объявили переменную lastsel. Во-вторых, в настройках навигационной панели (это последняя строка JavaScript-кода) свойствам edit, add, del и search вновь присвоено значение false. И, в-третьих, в настройках самого плагина появилось свойство, которое до сих пор не встречалось — onSelectRow.

В свойстве onSelectRow можно определить функцию, вызываемую сразу после щелчка на строке.

Давайте разберемся, что же делает функция, определенная в этом свойстве, и попутно познакомимся с еще двумя методами плагина — restoreRow и editRow.

В примере из листинга 12.1.5 мы передаем этой функции аргумент id — идентификатор строки. Вызов методов restoreRow и editRow находится внутри условия if. Это сделано для того, чтобы предотвратить возможность редактирования более одной строки одновременно, поскольку оба метода "работают" в паре. При вызове метода editRow в ячейки таблицы вставляются элементы input (по умолчанию), а содержимое ячеек становится значением атрибута value элементов input. При вызове метода restoreRow уже значение атрибута value элементов input становится содержимым ячейки.

Среди свойств плагина jqGrid есть возможность организации поиска данных. В листинге 12.1.6 приведен пример кода, с помощью которого можно реализовать вызов и использование поискового диалога.

Листинг 1 2 .1 .6 . Использование плагина jqGrid

Практически все свойства в объекте с настройками плагина нам уже знакомы. Остановимся на последней строке JavaScript-кода — по аналогии с инициализацией навигационной панели, мы создаем панель поиска с помощью метода searchGrid. В первом аргументе указываем имя метода, во втором — передаем объект с настройками панели. Значение свойства sopt — массив, в котором передаются условные обозначения, используемые на сервере для построения запроса к базе данных. В нашем случае мы передаем eq — равно, lt — меньше и gt — больше.

На рис. 12.4 показана таблица с поисковым диалогом.

Рис. 12.4. Использование плагина jqGrid. Поисковый диалог

Не забывайте, что плагин jqGrid будет отображать в таблице именно то, что вернет сервер в ответ на поисковый запрос. В нашем примере был использован файл datafromserver2.php, исходные коды которого вы сможете найти на компакт-диске, прилагаемом к книге.

Рассмотрим еще одну возможность — организацию фильтрации данных с помощью дополнительной встроенной панели. При этом большой объем данных будет загружен с помощью только одного запроса к серверу, а все дальнейшие операции будут происходить только на стороне клиента (листинг 12.1.7).

Листинг 1 2 .1 .7 . Использование плагина jqGrid

Несколько новых свойств появилось в объекте настроек плагина jqGrid. Если свойство rowNum нам знакомо — число строк, отображаемых на одной странице, то свойство rowTotal встречается впервые. Здесь передается число строк, которые должен вернуть сервер в ответе на единственный запрос. То, что запрос необходимо выполнить только один раз, определяет свойство loadonce со значением true. Свойство rownumbers со значением true позволяет отобразить в дополнительной колонке слева нумерацию строк по порядку, а свойство rownumWidth со значением 40 задает ширину этой колонки.

В самой последней строке JavaScript-кода мы создаем дополнительную панель для фильтрации данных, отображаемую в верхней части таблицы. Применяем для этого метод filterToolbar, которому передаем объект настроек с единственным свойством searchOnEnter. Значение false, установленное для этого свойства, позволяет фильтровать данные не по нажатию клавиши <Enter>, а непосредственно при вводе каждого очередного символа.

На рис. 12.5 показана таблица с панелью фильтрации данных.

Рис. 12.5. Использование плагина jqGrid. Панель фильтрации данных

ВНИМАНИЕ!

Файлы datafromserver.php, datafromserver2.php и dataoperation.php в примерах этой главы созданы исключительно в целях демонстрации возможностей плагина jqGrid и не имеют никаких проверок поступающих данных. Во избежание проблем с безопасностью ваших приложений не используйте их в существующем виде.

К сожалению, в рамках этой книги невозможно полностью рассказать о замечательном плагине jqGrid — мы рассмотрели лишь небольшую часть его возможностей. Однако хочется надеяться, что примеры, которые мы разобрали, послужат хорошим фундаментом для дальнейшей самостоятельной работы. Множество примеров использования плагина jqGrid находится на сайте разработчика по адресу http://trirand.com/blog/jqgrid/jqgrid.html. Официальную документацию на плагин можно найти по адресу http://www.trirand.com/jqgridwiki/doku.php?id=wiki: jqgriddocs.

Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)

Похожие посты:

Комментировать

Your email address will not be published. Required fields are marked *