• Геннадий Самков
• jQuery. Сборник рецептов (+ CD-ROM)
• Издательство: БХВ-Петербург, 2011 г.
• Мягкая обложка, 416 стр.
• ISBN 978-5-9775-0732-5
• Тираж: 1500 экз.
• Формат: 70×100/16

Аннотация:
Книга является сборником решений наиболее часто встречающихся задач при веб-программировании пользовательских интерфейсов с использованием библиотеки jQuery. Рассмотрены практически все методы и вспомогательные функции jQuery, в том числе обеспечивающие взаимодействие jQuery и AJAX. Подробно рассказано о надстройке UI jQuery. Приведено большое количество примеров использования плагинов для jQuery – создание графиков и диаграмм, фотогалерей, меню, работа с таймерами и cookies, обработка табличных данных и др. Во втором издании в примерах используется библиотека jQuery версий 1.4.4 и 1.5.2, а также надстройка UI jQuery 1.8.9.
Компакт-диск содержит примеры из книги, файлы библиотеки jQuery 1.4.4 и 1.5.2, файлы надстройки UI jQuery 1.8.9, а также файлы расширений сторонних разработчиков.

От себя могу добавить, что книга написана в таком же духе, как и первое издание, т.е. примеры, примеры и еще раз примеры плюс подробные разъяснения….

Отрывок книги в PDF

Полное содержание:

Виджет Autocomplete помогает организовать список подходящих значений при заполнении пользователем поля ввода.

Для начала посетим страницу настраиваемой закачки на сайте jQuery UI, чтобы получить необходимые нам файлы. Щелкаем на ссылке Deselect all component, чтобы не закачивать лишнее, а затем выбираем только то, что нам потребуется – отмечаем чекбокс Autocomplete и видим, что вместе с ним отметились чекбоксы Core, Widget и Position. Работа виджета Autocomplete зависит от этих файлов.

Кроме этого, справа есть выпадающий список, где можно выбрать понравившуюся тему оформления. Если все готово, кликаем кнопку Download и получаем архив. Возможности виджета можно оценить в демо-галерее на сайте разработчика. Я лишь постараюсь по-русски и как можно более простым языком объяснить, как заставить все это работать.

Итак, сначала в разделе HEAD потребуется подключить несколько файлов, которые есть в архиве.

<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>

Сначала мы подключили файл стилевого оформления виджета, затем файл библиотеки jQuery. Третий подключенный файл необходим, чтобы реализовать Autocomplete.

Виджет Autocomplete не требует сложной HTML-разметки. Достаточно всего лишь поля для ввода текста, т.е. обычного элемента input, который имеет значение text в атрибуте type. Дополнительную разметку можно добавить, чтобы использовать стили в соответствии с выбранной темой оформления.

<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags" type="text" />
</div>

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

<script type="text/javascript">
$(function(){
  var availableTags = ["ActionScript","AppleScript","Asp","BASIC",
  "C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
  "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP",
  "Python","Ruby","Scala","Scheme"];

  $("#tags").autocomplete({
    source: availableTags
  });
});
</script>

В переменной availableTags приготовили массив с подсказками. Затем выбрали элемент input по его идентификатору и применили метод autocomplete, которому сразу передали объект с настройками. Пока этот объект с единственным свойством source, которое определяет источник данных. В нашем случае указан массив availableTags.

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

source – опция не имеет значения по умолчанию и должна быть обязательно определена. Значением опции может являться строка, массив или функция. В любом случае в этой опции должен быть указан источник данных.
minLength – значение по умолчанию 1. В этой опции указывается количество символов, которое должно быть введено в поле ввода прежде, чем активизируются подсказки. Значение 0 полезно при использовании локальных данных при списках из нескольких позиций. Это значение должно быть увеличено при использовании запросов к серверу для получения данных и при использовании больших списков, где одному введенному символу может соответствовать несколько тысяч наименований.
delay – значение по умолчанию 300. В этой опции указывается количество миллисекунд, которое должно пройти после нажатия очередной клавиши, чтобы активизировался запрос на получение данных. Нулевое значение имеет смысл при использовании локальных данных. При использовании запросов к серверу нулевое значение в этой опции может породить серьезную нагрузку
appendTo – значение по умолчанию ‘body’. В качестве значения этой опции может быть использован селектор jQuery. Определяет, к какому элементу должен быть добавлен выпадающий список подсказок.
disabled – значение по умолчанию false. Если установить значение true, то при инициализации функциональность виджета Autocomplete будет недоступна, однако может быть включена впоследствии, например, при выполнении какого-либо условия.

Дальше посмотрим, как виджет может реагировать на события.

<script type="text/javascript">
$(function(){
  var availableTags = ["ActionScript","AppleScript","Asp","BASIC",
  "C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
  "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP",
  "Python","Ruby","Scala","Scheme"];
  $("#tags").autocomplete({
    source: availableTags,
    select: function(event, ui) {
      alert('Событие: ' + event.type +
            ',\nзначение: ' + ui.item.value);
    }
  });
});
</script>

Здесь мы добавили свойство select, где определили функцию, которая будет вызываться в тот момент, когда пользователь выберет какое-либо значение из списка подсказок. функция принимает два аргумента: первый — объект event, второй — специальный объект ui. Организовав доступ к свойствам этих объектов, можно получить полезную информацию (мы выводим ее в окне предупреждения).

Это не единственное событие на которое умеет реагировать виджет – вот полный их список, где указано название свойства в объекте с настройками, название события в event.type и описание события:

create – Событие autocompletecreate наступает в момент инициализации.
search – событие autocompletesearch наступает перед выполнением запроса. Если функция, определенная в этой опции вернет false, запрос не будет отправлен.
open – событие autocompleteopen наступает в момент, когда открывается выпадающий список подсказок.
focus – событие autocompletefocus наступает всякий раз, когда один из пунктов списка подсказок получает фокус.
select – событие autocompleteselect наступает, когда выбран один из пунктов списка подсказок.
close – событие autocompleteclose наступает, когда список подсказок закры-вается. Событие наступает независимо от того, был выбран один из пунктов или нет.
change – событие autocompletechange наступает после того, как выбран один из пунктов списка. Событие всегда наступает после close.

Есть у виджета и некоторые методы, с помощью которых можно еще более расширить его функциональность.

Для примера добавьте в HTML-разметку пару кнопок:

<button id="search">Искать "as"</button>
<button id="close">Закрыть</button>
<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags" type="text" />
</div>

И вот такой JS-код:

<script type="text/javascript">
$(function(){
  var availableTags = ["ActionScript","AppleScript","Asp","BASIC",
  "C","C++","Clojure","COBOL","ColdFusion","Erlang","Fortran",
  "Groovy","Haskell","Java","JavaScript","Lisp","Perl","PHP",
  "Python","Ruby","Scala","Scheme"];
  $("#tags").autocomplete({
    source: availableTags,
    minLength: 0
  });
  $("#search").click(function(){
    $("#tags").autocomplete("search", "as");
  });
  $("#close").click(function(){
    $("#tags").autocomplete("close");
  });
});
</script>

Теперь, щелкая по кнопке Искать «as» мы можем имитировать действия пользователя, как если бы он ввел символы «as» в элементе input. Щелкнув по кнопке Закрыть – закрываем список подсказок, если он был открыт ранее.

Ниже приведены описания всех доступных методов:

destroy – .autocomplete( ‘destroy’ ) полностью удаляет всю функциональность виджета Autocomplete. Возвращает элементы в состояние, предшествующее инициализации.
disable – .autocomplete(‘disable’) временно запрещает использование всей функциональности виджета. Вновь разрешить ее можно с помощью метода enable.
enable – .autocomplete(‘enable’) разрешает использование всей функциональности виджета, если ранее она была запрещена методом disable.
option – .autocomplete(‘option’, optionName, [value]) с помощью этого метода можно установить значение любой опции виджета после инициализации.
option – .autocomplete(‘option’, optionName) с помощью этого метода можно получить значение любой опции виджета после инициализации.
widget – .autocomplete(‘widget’) с помощью этого метода можно получить доступ к объекту, который представляет собой элемент с функциональностью Autocomplete.
search – .autocomplete(’search, [value]‘) с помощью этого метода без передачи второго па-раметра можно открыть весь список. Если передать во втором параметре строку символов, то будет открыт список с подходящими подсказками.
close – .autocomplete(‘close’) закрывает список подсказок, если он был открыт ранее.

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

Опция source, которая, напомню, является обязательной и определяет источник данных, может принимать также строку, где содержится url, к которому следует отправлять запрос. А еще в source можно определить свою функцию, которая будет делать, то что надо именно Вам. Вот этот, пожалуй самый гибкий способ мы и разберем. Попробуем получить в виде списка подсказок какие-либо данные с сервера geonames.org

Я приведу полностью рабочий код и попробую разъяснить, как и что работает.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-17-8-4</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.9.custom.css" rel="stylesheet" />
<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
<style type="text/css">
.ui-autocomplete-loading {
  background: #FFF url('css/ui-lightness/images/ui-anim_basic_16x16.gif') right center no-repeat;
}
#city { width: 25em; }
#log { height: 200px; width: 600px; overflow: auto; }
</style>
<script type="text/javascript">
$(function() {
  $("#city").autocomplete({
    source: function(request,response) {
      $.ajax({
        url: "http://ws.geonames.org/searchJSON",
        dataType: "jsonp",
        data: {
          featureClass: "P",
          style: "full",
          maxRows: 12,
          name_startsWith: request.term
        },
        success: function(data) {
          response($.map(data.geonames, function(item) {
            return {
              label: item.name + ", " + item.countryName,
              value: item.name + " (" + item.countryName + ")" + " [" + item.lat + ", " + item.lng + "]"
            }
          }));
        }
      });
    },
    minLength: 3,
    select: function(event,ui) {
      $("<p/>").text(ui.item ? ui.item.value : "Ничего не выбрано!").prependTo("#log");
      $("#log").attr("scrollTop", 0);
    }
  });
});
</script>
</head>
<body>
<div class="ui-widget">
  <label for="city">Город: </label><input id="city" /><br />
  <span style="font-size:.8em;">Поддерживается <a href="http://geonames.org">geonames.org</a></span>
</div>
<div id="log" class="ui-widget ui-widget-content"></div>
</body>
</html>

Сначала смотрим на HTML-разметку. В первом элементе div нас интересует только элемент input с идентификатором city. Сюда будем вводить начальные буквы (на латинице) населенного пункта, информацию о котором мы хотели бы получить. Элемент div с идентификатором log используем для занесения в него полученной информации.

Если смотреть JavaScript-код, то увидим, что объект с настройками содержит три свойства — обязательное свойство source, а также свойства minLength и select.
Мы займемся рассмотрением только свойства source, где можно написать свою функцию. Эта функция принимает два аргумента. Первый аргумент — request — объект, содержащий единственное свойство term, в котором хранится строка, введенная пользователем в поле ввода. Второй аргумент — response — функция, с помощью которой будет обрабатываться полученный ответ.

Внутри функции, определенной в свойстве source мы имеем практически неограниченную свободу действий. А поэтому, не мудрствуя, пишем там ajax-запрос к url http://ws.geonames.org/searchJSON, в опции dataType указываем, что в ответе ожидаем получить данные в формате JSON. В опции data определяем объект с параметрами запроса, который будет отправляться на указанный url (почему параметры именно такие – надо смотреть документацию по API на сервере geonames.org). В последнем параметре передаем request.term – то, что ввел пользователь.

В следующей опции ajax-запроса – опции success, вызываем функцию обработки ответа response. В аргументе, который мы передаем этой функции, мы можем обрабатывать данные, полученные в ответе сервера так, как нам будет угодно. Мы используем метод $.map чтобы применить некоторую функцию к каждому элементу объекта, переданному в первом аргументе. Внутри функции мы можем обращаться к свойствам объекта — item.countryName, item.lng, item.lat (почему свойства именно такие – см. документацию по API, которую предоставляет веб-сервис). Функция, которую мы написали, для каждого элемента возвращает объект, содержащий два свойствами, которые мы определили самостоятельно, используя полученные данные. Из получившегося массива таких объектов и строится список подсказок.

В общем, вот так как-то… В заключение, большая человеческая просьба – в комментариях пожалуйста, можете похвалить или поругать в принципе. Если же Вы хотите задать технический вопрос, то задавайте его на форуме jQuery.

В новой версии исправлено 83 бага и закрыто 460 тикетов. Дополнена документация jQuery API.

Полностью был переработан модуль AJAX. Наиболее заметные изменения коснулись метода jQuery.ajax (jQuery.get, jQuery.post и пр.), сейчас эти методы возвращают объект jqXHR, который предоставляет доступ к объекту XMLHttpRequest.

Также модуль AJAX расширен за счёт возможностей назначать упорядоченные обработчики, фильтры и транспорты данных. Эти новшества должны предоставить больше возможностей для написания новых ajax плагинов.

Ещё одним нововведением стали deferred objects – это инструемнт, который позволяет создавать очередь задач, которые будут выполнены позже. Таким образом становится возможно работать со значениями, которые не могут быть получены немедленно (например, при асинхронных запросах ajax), и назначать несколько обработчиков, которые будут вызваны при получении таких «отложенных» значений.

Теперь jQuery предоставляет новую функциональность – jQuery.sub(), благодаря которой можно создавать и изменять дубликат jQuery, поддерживающий весь его API. Например, можно это использовать для переопределения исходных методов jQuery без влияния на на других пользователей, вызывающих эти же методы, или создавать скрытое API для плагинов без коллизий пересечения имён объектов.

В этом релизе была увеличена скорость работы методов обхода DOM: .children(), .prev(), .next()

В заключении, команда jQuery сделала некоторые изменения во внутренней системе сборки библиотеки. Проделана работа в сторону стандартизации всех процессов сборки на серверной среде NodeJS, которая сильно впечатлила команду jQuery. Разработчики особенно ценят то, что им удалось снизить зависимость от устаревшей системы Java/Rhino и перейти на многообещающую JavaScript-среду. Дополнительно к этому также осуществлен переход к использованию UglifyJS взамен Google Closure Compiler, всвязи с чем заметны некоторые улучшения в плане размера файла библиотеки.

Ссылка на официальную новость: JQUERY 1.5 RELEASED

Синтаксис шаблонов довольно функционален. В теле шаблона разработчик может обращаться к полям объекта, к полям полей объекта, вызывать методы объекта и его полей, обращаться к внешним объектам JavaScript и jQuery, просто писать JS-выражения. Кроме всего этого внутри шаблона можно итеративно выводить коллекции, организовать условный вывод, использовать вложенные шаблоны. Но давайте обо всём по порядку.

Примеры в статье

Все примеры я буду приводить ключевыми кусками, чтобы не загромождать материал повторяющимися частями кода. В примере будут присутствовать текст шаблона, JSON данных, при необходимости JSON опций (параметр options метода .tmpl( ) ) и результат. В общем случае полный код примера будет выглядеть так:

<script type="text/x-jquery-tmpl">
    <li> ЭТО ТЕКСТ ШАБЛОНА </li>
</script>
<script type="text/javascript">
var data = [
    // ЭТО МАССИВ ДАННЫХ
];
var options = {
    // ЭТО ОПЦИИ
};
$(function() {
    // ПРИМЕНЕНИЕ ШАБЛОНА И ВЫВОД РЕЗУЛЬТАТА:
    $('script[type="text/x-jquery-tmpl"]').tmpl(data, options).appendTo($('.output').empty());
});
</script>
<ul class="output"></ul>

Так будет полностью выглядеть приведенный ниже пример 1.:

<script type="text/x-jquery-tmpl">
    <li>${Name} ({{html Desc}}); вычисления: ${p1 + p2 + 10}</li>
</script>
<script type="text/javascript">
var data = [
    { Name: "obj1", Desc: "<em>Object one</em>", p1: 1, p2: 10 },
    { Name: "<em>obj2</em>", Desc: "<strong>Object two</strong>", p1: 3.3, p2: 5 }
];
var options = {
};
$(function() {
    $('script[type="text/x-jquery-tmpl"]').tmpl(data, options).appendTo($('.output').empty());
});
</script>
<ul class="output"></ul>

Вставка данных в шаблон ${}, {{= }}, {{html }}

С помощью этих инструкции можно вставить в шаблон значение поля объекта данных, результат работы метода или результат вычисления некоторого js-выражения, внутри инструкции можно обращаться к глобальным объектам JS, а также к служебным объектам, созданным при обработке шаблона.

Прежде чем перейти к примерам, хочу немного акцентировать внимание на сходстве и разнице этих инструкций. Все три инструкции предназначены для вывода результата в эту точку шаблона. ${expression} и {{= expression}} эквивалентны (первая инструкция – это сокращённая форма второй), результат вставляется в шаблон в виде текста, если в тексте встречаются символы разметки (<  >  & и пр.), то они будут заменены на соответствующие спецсимволы (&lt;  &gt;  &amp; и пр.). Для вставки же разметки с сохранением html-кода нужно использовать инструкцию {{html expression}}.

Пример 1. Вывод данных с разметкой и без

Шаблон:

<li>${Name} ({{html Desc}}); вычисления: ${p1 + p2 + 10}</li>

Данные:

[
    { Name: "obj1", Desc: "<em>Object one</em>", p1: 1, p2: 10 },
    { Name: "<em>obj2</em>", Desc: "<strong>Object two</strong>", p1: 3.3, p2: 5 }
]

Результат:

<ul class="output">
    <li>obj1 (<em>Object one</em>); вычисления: 21</li>
    <li>&lt;em&gt;obj2&lt;/em&gt; (<strong>Object two</strong>); вычисления: 18.3</li>
</ul>

Доступ к объектам и внутренние параметры шаблона

Как я уже упоминал, внутри выражения можно обращаться к глобальным объектам и функциям JS, при этом шаблонизатор сам пытается определить, является указанное имя ссылкой на глобальный объект или на часть переданных данных. И конечно же, локальные данные имеют более высокий приоритет, чем глобальные. Давайте определим в документе глобальные объект testObj и функцию testFunc и попробуем их использовать:

var testObj = {
    Value: 1
};

function testFunc(i) {
    return i % 2 == 1;
}

Пример 2. Использование глобальных объектов

Шаблон:

<li>${Name}; testObj.Value = ${testObj.Value}; testFunc(${p}) => ${testFunc(p)}</li>

Данные:

[
    { Name: "obj1", p: 3, testObj: { Value: 20 } },
    { Name: "obj2", p: 13, testFunc: function(i) { return i + 7; } }
]

Результат:

<ul class="output">
    <li>obj1; testObj.Value = 20; testFunc(3) =&gt; true</li>
    <li>obj2; testObj.Value = 1; testFunc(13) =&gt; 20</li>
</ul>

Внутри шаблона есть ещё доступ  к специальным объектам – внутренним параметрам шаблона: $item и $data.

$item – представляет доступ к обрабатываемой в данный момент единице данных для вставки в шаблон, внутри этого объекта собраны и параметры, переданные пользователем, и дополнительные параметры из аргумента options функции .tmpl( ). Доступ к параметрам из данных осуществляется через вложенный объект .data, а к параметрам аргумента options – напрямую, т.е. если вызвать $(‘#myTmpl’).tmpl({ p1: 1 }, { p2: 2 }), то в шаблоне получить доступ к ним можно так: $item.data.p1 и $item.p2.

$data – это сокращённая версия доступа к данным, по сути это просто синоним для $item.data, в свете этого доступ в шаблоне к p1 и p2 из вызова в абзаце выше может быть таким: $data.p1 и $item.p2.

Пример 3. Параметр options

Шаблон:

<li>${Name}; p * 100 = ${$item.Method($data.p)}</li>

Данные:

[
    { Name: "obj1", p: 3.3 },
    { Name: "obj2", p: 0.13 }
]

Опции:

{ Method: function(i) { return i * 100; } }

Результат:

<ul class="output">
    <li>obj1; p * 100 = 330</li>
    <li>obj2; p * 100 = 13</li>
</ul>

Условная разметка в шаблоне {{if }} {{else}} {{/if}}

Внутри шаблона можно отслеживать некие условия и в зависимости от них выводить тот или иной кусок. Для достижения этих целей применяются следующие комбинации инструкций:

{{if expression}} tmplPart {{/if}} – простой вывод части шаблона, только если выражение истинно,
{{if expression}} tmplPart1 {{else}} tmplPart2 {{/if}} – вывод части 1 или 2 в зависимости от истинности выражения,
{{if expr1}} tmplPart1 {{else expr2}} tmplPart2 {{else}} tmplPart3 {{/if}} – это уже построение цепочки последовательных проверок (if .. else if .. else if .. else ..), понятное дело, что последний else без выражения необязателен. Думаю, тут всё понятно, давайте посмотрим простенький пример:

Пример 4. Условный вывод

Шаблон:

<li>
{{if (
    (typeof(useFirstLastName) != "undefined" ? useFirstLastName : $item.defaultUseFirstLastName) &&
    $data.FirstName && $data.LastName)}} ${FirstName + " " + LastName}
{{else $data.FullName}} ${FullName}
{{else $data.Name}} ${Name}
{{else}} ${$item.NoName}
{{/if}}
</li>

Данные:

[
    { Name: "obj1", FullName: "Object 1", FirstName: "Object", LastName: "One" },
    { FirstName: "Object", LastName: "Two", Name: "obj2", useFirstLastName: true },
    { Title: "object number 3" }
]

Опции:

{ NoName: "[noname]", defaultUseFirstLastName: false }

Результат:

<ul class="output">
    <li>  Object 1  </li>
    <li>  Object Two  </li>
    <li>  [noname]  </li>
</ul>

Поясню, что происходит в шаблоне. Под первым условием мы проверяем, нужно ли выводить имя объекта в виде конкатенации FirstName и LastName – при этом проверяется условие внутри объекта, если оно не определено, то условие в опциях, и требуется наличие обоих свойств. Обращаясь в условии к этим свойствам через параметр $data, гарантируем их наличие именно в переданных данных, а глобальные объекты при этом игнорируются. Во втором и третьем условиях проверяем последовательно свойства FullName и Name – выводим первое попавшееся, если нет ни одного из них, то выводим «заглушку» из опций.

Итеративный обход с помощью {{each }}

Думаю всем знакома функция jQuery .each(func) (а есть ещё и $.map(array, callback) ) и надеюсь многим знакома конструкция JS for (var key in obj) – эти выражения совершают итеративный обход элементов коллекции. В шаблонах тоже возможен вывод коллекций поэлементно и описывается он следующей инструкцией: {{each( index, value ) data}} tmplText {{/each}}. index и value – это имена параметров (указываются без кавычек) для доступа соответственно к текущему индексу и значению в коллекции. Есть и сокращённая форма этой инструкции: {{each data}} tmplText {{/each}} – при этом в тексте шаблона к текущим индексу и значению можно обратиться по именам по умолчанию: $index и $value. Выражение data должно возвращать в результате массив или объект, объект будет обработан как словарь (коллекция пар имя-значение свойств объекта). Довольно слов, посмотрим на примере:

Пример 5. Вывод массива

Шаблон:

<li>
    <table border="1" cellpadding="5" cellspacing="0">
        <tr><th align="left">n</th><th align="left">${Expr}</th></tr>
        {{each NumCollection}}
        <tr><td>${$index}</td><td>${$value}</td></tr>
        {{/each}}
        <tr><td>${$item.EtcName}</td><td>${$item.EtcVal}</td></tr>
    </table>
</li>

Данные:

[
    { Expr: "2^n", NumCollection: [ 1, 2, 4, 8, 16 ] },
    { Expr: "2n-1", NumCollection: [ 1, 3, 5, 7, 9 ] },
]

Опции:

{ EtcName: "etc.", EtcVal: "..." }

Результат:

<ul class="output">
<li>
     <table border="1" cellpadding="5" cellspacing="0">
         <tbody>
             <tr><th align="left">n</th><th align="left">2^n</th></tr>
             <tr><td>0</td><td>1</td></tr>
             <tr><td>1</td><td>2</td></tr>
             <tr><td>2</td><td>4</td></tr>
             <tr><td>3</td><td>8</td></tr>
             <tr><td>4</td><td>16</td></tr>
             <tr><td>etc.</td><td>...</td></tr>
         </tbody>
    </table>
</li><li>
     <table border="1" cellpadding="5" cellspacing="0">
         <tbody>
             <tr><th align="left">n</th><th align="left">2n-1</th></tr>
             <tr><td>0</td><td>1</td></tr>
             <tr><td>1</td><td>3</td></tr>
             <tr><td>2</td><td>5</td></tr>
             <tr><td>3</td><td>7</td></tr>
             <tr><td>4</td><td>9</td></tr>
             <tr><td>etc.</td><td>...</td></tr>
        </tbody>
    </table>
</li>
</ul>

Пример 6. Вывод объекта-словаря

Шаблон:

<li>
JSON = { {{each(key, val) $data}}{{if $item.f}},{{/if}} "${key}": "${val}"{{if $item.f=true}}{{/if}}{{/each}} }
</li>

Данные:

[
    { Name: "obj1", FullName: "Object 1", FirstName: "Object", LastName: "One" },
    { FirstName: "Object", LastName: "Two", Name: "obj2" },
    { Title: "object number 3" }
]

Опции:

{ f: false }

Результат:

<ul class="output">
    <li> JSON = {  "Name": "obj1", "FullName": "Object 1", "FirstName": "Object", "LastName": "One" } </li>
    <li> JSON = {  "FirstName": "Object", "LastName": "Two", "Name": "obj2" } </li>
    <li> JSON = {  "Title": "object number 3" } </li>
</ul>

Вывод шаблона в шаблоне {{tmpl }}

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

Полный вид инструкции: {{tmpl(data, options) template}}.

(На момент написания статьи в оф.документации показана сигнатура инструкции {{tmpl( [data], [options] ) template}} content {{/tmpl}} – это ОШИБКА, у этой инструкции нет закрывающего тега {{/tmpl}} и, соответственно, никакого содержания content)

Параметры data и options – являются необязательными и имеют то же назначение, что и в функции .tmpl(data, options), если параметры опущены, то в качестве данных используется текущий объект данных $data, а options – пустой объект.
Параметр template может принимать следующие значения: HTML-разметка, HTML- или jQuery-объект, строка, которая является именем скомпилированного шаблона или скомпилированный шаблон, также можно просто передать строку-селектор для jQuery (это недокументированная возможность, но она фигурирует в примерах).

Пример 7. Использование сгенерированного шаблона

Шаблон:

<li> {{tmpl $item.lt+tag+$item.gt+$item.tp+"{content}"+$item.lt+"/"+tag+$item.gt}} </li>

Данные:

[
    { tag: "strong", content: "<em>Hello</em>, " },
    { tag: "em", content: "World!" }
]

Опции:

{ lt: "<", gt: ">", tp: "$" }

Результат:

<ul class="output">
    <li> <strong>&lt;em&gt;Hello&lt;/em&gt;, </strong> </li>
    <li> <em>World!</em> </li>
</ul>

В шаблоне этого примера при генерировании вложенного шаблона используются строковые значение «<», «>», «$» в виде переменных, это сделано для того, чтобы они не воспринимались как разметка и инструкции внешним шаблоном.

Пример 8. Использование шаблона внутри шаблона

Шаблон:

<li>${Name} {{if Items}}<ul>{{tmpl(Items) '#tmplSelector'}}</ul>{{/if}}</li>

Тут строку ‘#tmplSelector’ – следует заменить на корректный селектор (или функцию) получения текущего шаблона. Для моих «живых» примеров можно использовать такой шаблон:

<li>${Name} {{if Items}}<ul>{{tmpl(Items) $('#example8 script[type="text/x-jquery-tmpl"]')}}</ul>{{/if}}</li>

, в нём будет применен начальный шаблон, или

<li>${Name} {{if Items}}<ul>{{tmpl(Items) $('#example8')[0].DemoData.Tmpl}}</ul>{{/if}}</li>

, в нём будет применён отредактированный шаблон – полностью «живой» пример.

Данные:

[
    { Name: "obj1", Items: [ { Name: "obj11", Items: [ { Name: "obj111" }, { Name: "obj112" } ] }, { Name: "obj12" } ] },
    { Name: "obj2" }
]

Опции:

{ }

Результат:

<ul class="output">
    <li>obj1 <ul>
        <li>obj11 <ul>
            <li>obj111 </li>
            <li>obj112 </li>
        </ul></li>
        <li>obj12 </li>
    </ul></li>
    <li>obj2 </li>
</ul>

В этом примере определён рекурсивный шаблон.

Шаблон в шаблоне с HTML-содержанием внутри {{wrap }}

{{wrap (data, options) template}} HTMLcontent {{/wrap}} – эта инструкция очень похожа на инструкцию {{tmpl }}, её параметры data, options и template имеют то же назначение. Отличие инструкции {{wrap }} от {{tmpl }} в том, что она может включать HTML-содержание и затем это содержание можно использовать в применяемом шаблоне.

В шаблоне, который передаётся параметром template, можно достать HTML-разметку, заключённую между {{wrap }} и {{/wrap}} с помощью метода $item.html(filter, onlyText). Первым аргументом можно наложить фильтр в виде селектора jQuery на выбираемые из разметки элементы, а вторым аргументом можно указать, что нужно в результате получить только текст верхнего выбранного элемента.

Пример 9. Использование {{wrap }}

<!DOCTYPE html>
<html>
<head>
  <style>
table { border-collapse:collapse; width:380px; background-color:#f8f8f8; border:2px solid blue; margin:5px; } table td { border:1px solid blue; padding:3px; }
</style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>

<script id="myTmpl" type="text/x-jquery-tmpl">
    The following wraps and reorders some HTML content:
    {{wrap "#tableWrapper"}}
        <h3>One</h3>
        <div>
            First <b>content</b>
        </div>
        <h3>Two</h3>
        <div>
            And <em>more</em> <b>content</b>...
        </div>
    {{/wrap}}

    And this wraps different HTML content:
    {{wrap "#tableWrapper"}}
        <div>
            First <b>div</b>
        </div>
        <div>
            Second <b>div</b>
        </div>
        <div>
            Third <b>div</b>
        </div>
        <h3>first h3</h3>
        <h3>second h3</h3>
        <h3>third h3</h3>
    {{/wrap}}
</script>

<script id="tableWrapper" type="text/x-jquery-tmpl">
    <table><tbody>
        <tr>
            {{each $item.html("h3", true)}}
                <td>
                    ${$value}
                </td>
            {{/each}}
        </tr>
        <tr>
            {{each $item.html("div")}}
                <td>
                    {{html $value}}
                </td>
            {{/each}}
        </tr>
    </tbody></table>
</script>

<div id="myWrappedView"></div>

<script>
$( "#myTmpl" ).tmpl()
    .appendTo( "#myWrappedView" );
</script>

</body>
</html>

Этот пример взят со страницы оф. документации по этой инструкции шаблона. В «живых» примерах приведена переработанная под их специфику версия.

Комментарии в шаблонах {{! }}

В шаблонах можно вставлять комментарии разработчика, которые не будут попадать в результат, делается это очень просто, а именно так:

{{! это текст комментария}}

«Живые» примеры из статьи

По этому адресу страница доступна online: http://zalab.net/projects/jquery/demo/tmpl/
А по этой ссылке можно загрузить эту страничку в архиве: jq.tmpl.live.examples.zip (33 KB)

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

Следует отметить, что команда Microsoft использовала свои немалые наработки в этих направлениях, как и команда проекта jQuery, и при хорошо сложившемся взаимодействии получились, на мой взгляд, отличные инструменты для разработчиков. В подтверждение моего мнения могу добавить, что разработчики jQuery анонсировали включение плагинов шаблонов и привязки данных в ядро библиотеки jQuery уже версии 1.5, а плагина глобализации – в соответствующую версию jQuery UI. Плагины пока ещё не получили статус релиза, но уже активно ведется написание документации на сайте http://api.jquery.com. К слову, команда Microsoft последовала традициям разработки jQuery и разместила материалы по разработке плагинов на github.com, где доступны описание и исходники плагинов.

В этой статье я расскажу немного о плагине шаблонов.

jQuery Templates plugin

Начнём с простенького примера:

<script id="movieTemplate" type="text/x-jquery-tmpl">
  <li><b>${Name}</b> (${ReleaseYear})</li>
</script>

<script type="text/javascript">
var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999" },
  { Name: "The Inheritance", ReleaseYear: "1976" }
];

$( "#movieTemplate" ).tmpl( movies )
    .appendTo( "#movieList" );
</script>

<ul id="movieList"></ul>

Итак, в примере разработчик страницы описал шаблон для вывода объектов в виде разметки (первый элемент script), потом получил откуда-то массив объектов movies и вызвал инструкцию сгенерировать нужную разметку по шаблону, взяв данные из предоставленного массива объектов, а результат добавить в конец списка #movieList.
В результате работы плагина мы получим такую разметку:

<ul id="movieList">
  <li><b>The Red Violin</b> (1998)</li>
  <li><b>Eyes Wide Shut</b> (1999)</li>
  <li><b>The Inheritance</b> (1976)</li>
</ul>

А теперь по сути вопроса.
Что делает плагин?
Плагин получает на вход строку шаблона и множество объектов (или один объект), которые нужно вывести в строку (или разметку) с форматированием.
Где это применяется?
В основном этот плагин полезен при динамическом выводе объектов JS на страницу, объекты могут быть получены самыми разными способами, например, при разчётах или по результатам каких-то действий пользователя и, конечно самый часто приводимый пример, в виде JSON в ответе сервера на AJAX запрос.

Методы плагина

.tmpl( [ data ], [ options ] )
Получает содержимое первого выбранного элемента и использует его в качестве шаблона для форматированного вывода указанных данных.
data – данные для вывода в шаблон (объект или массив объектов).
options – опционально, определённое пользователем расширение в виде пар ключ-значение для объекта вывода в шаблон.
jQuery.tmpl(template, [ data ], [ options ])
Использует указанный шаблон для форматированного вывода указанных данных.
template – шаблон для форматирования данных, может быть одного из следующих типов: строка с разметкой, HTML-элемент (в том числе и в jQuery-обёртке), строка, соответствующая имени ранее скомпилированного шаблона.
data, options – имеют то же значение, что и выше
.tmplItem()
Возвращает для первого выбранного элемента структуру (объект) с результатами работы шаблонизатора. Возвращаемый методом объект обеспечивает доступ к:

• HTML-частям, из которых состоит шаблон
• ассоциированной единице переданных данных
• родительскому шаблону, если текущий шаблон является вложенным
• текущему шаблону, использованному для вывода
• определённому пользователем расширению (полям и методам), переданным в параметр options метода tmpl()

Этот метод используется, напрмер, когда после проведенного форматирования данных требуется узнать, а какие же данные были использованы при формировании некоторого куска разметки, или для обновления куска разметки с использованием новых данных.
jQuery.tmplItem( element )
Аналогичен методу .tmplItem, только структура с результатами работы шаблонизатора ищется для элемента element (HTML-элемент, в том числе и в jQuery-обёртке).
.template( [ name ] )
Метод делает из содержимого первого выбранного элемента скомпилированную версию шаблона форматирования.
name – необязательно имя шаблона, если имя указано, то потом можно использовать его для обращения к этому шаблону в методе jQuery.tmpl(name, data, options)
jQuery.template( [ name, ] template )
Метод аналогичен описанному выше, только здесь шаблон передаётся в качестве параметра template – это может быть строка, строка с разметкой, HTML-элемент (в том числе и в jQuery-обёртке).

Синтаксис шаблона

Я вкратце приведу описание нескольких самых основных элементов шаблона, остальное надеюсь более подробно описать в следующей статье (если будет положительный отклик на эту статью)
${fieldNameOrExpression} и {{= fieldNameOrExpression}}
Позволяет вставить в шаблон значение поля (свойства) объекта данных, может быть также использовано для вставки результата метода или js-выражения. Напрмер, «${Name}» – вставит в шаблон значение поля obj.Name, а при том, что Languages – это поле объекта, которому присвоен массив, «${Languages.length}» – вставит в шаблон длину этого массива, и наконец, если у объекта есть метод getLanguages с двумя параметрами, то «${getLanguages(Languages, ‘ – ‘)}» – вставит в шаблон результат работы этого метода.
{{html fieldNameOrExpression}}
Элемент шаблона ${field} (или {{= field}}) вставляет в результат значение указанного поля в виде текста, т.е. если в строке будут HTML-теги, то они будут закодированы, а не преобразованы в разметку. Если вам требуется вставить данные в шаблон именно в виде HTML-разметки, то надо использовать синтаксис {{html <что нужно вставить>}}.
Для начала работы с плагином уже достаточно рассказано, могу лишь добавить, что синтаксис шаблонов позволяет вставлять вложенные шаблоны, условные инструкции, обращаться к некоторым объектам JS и jQuery и ещё кое-что… Остальное – материал будущей статьи.

Источники

Статья написана по материалам, найденным во всемирной паутине. В основном это перевод официальной документации. Оригиналы можно посмотреть по следующим ссылкам:

• Сообщение в блоге jQuery и в блогах MS
• Страница документации плагина (примеры взяты оттуда)

Об авторе

Зовут меня Зайцев Андрей, мой маленький блог, профиль на форуме zandroid

Это моя первая статья в этом блоге, надеюсь, и не последняя  Большое спасибо Геннадию за возможность публикации и за полезные советы по написанию и оформлению материала.

Примеры

Пример 1: Динамическое переключение применяемого шаблона

<!DOCTYPE html>
<html>
<head>
  <style>
    table { cursor:pointer; border-collapse:collapse; border:2px solid blue; width:300px; margin:8px; }
    table tr { border:1px solid blue; color:blue; background-color:#f8f8f8; } table td { padding:3px; } table tr:hover { color:red; }
    .movieDetail { background-color:yellow; } .movieDetail.row1 { border-bottom:none; } .movieDetail.row2 { border-top:none; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>

<script id="summaryTemplate" type="text/x-jquery-tmpl">
  <tr class='movieSummary'><td colspan='2'>${Name}</td></tr>
</script>

<script id="detailTemplate" type="text/x-jquery-tmpl">
  <tr class='movieDetail row1'><td colspan='2'>${Name}</td></tr><tr class='movieDetail row2'><td>${ReleaseYear}</td><td>Director: ${Director}</td></tr>
</script>

Click for details:
<table><tbody id="movieList"></tbody></table>

<script type="text/javascript">
var movies = [
  { Name: "The Red Violin", ReleaseYear: "1998", Director: "François Girard" },
  { Name: "Eyes Wide Shut", ReleaseYear: "1999", Director: "Stanley Kubrick" },
  { Name: "The Inheritance", ReleaseYear: "1976", Director: "Mauro Bolognini" }
];
var selectedItem = null;

/* Render the summaryTemplate with the "movies" data */
$( "#summaryTemplate" ).tmpl( movies ).appendTo( "#movieList" );

/* Add onclick handlers for movie template items
using the summary or details template */
$("#movieList")
  .delegate( ".movieSummary", "click", function () {
    if (selectedItem) {
      // Set the template on the previously selected item
      // back to the summary template
      selectedItem.tmpl = $( "#summaryTemplate" ).template();
      selectedItem.update();
    }
    /* Get the data structure for the template item
       which this clicked element belongs to, and make
       it the selected item */
    selectedItem = $.tmplItem(this);

    /* Set the template on this item to the detail template */
    selectedItem.tmpl = $( "#detailTemplate" ).template();
    selectedItem.update();
  })
  .delegate( ".movieDetail", "click", function () {
    /* Set the template on this item to the summary template */
    selectedItem.tmpl = $( "#summaryTemplate" ).template();
    selectedItem.update();
    selectedItem = null;
  });
</script>

</body>
</html>

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

Пример 2: Вставка данных с разметкой в шаблон

<!DOCTYPE html>
<html>
<head>
  <style>
    .role {font-weight:bold;font-style: italic;} #movieContainer {padding-left: 8px;}
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="http://nje.github.com/jquery-tmpl/jquery.tmpl.js"></script>
</head>
<body>

<script id="movieTemplate" type="text/x-jquery-tmpl">
  <h4>${Name}</h4>
  <p>{{html Synopsis}}</p>
</script>

<div id="movieContainer"></div>

<script>
/* The Synopsis data field contains HTML markup. */
var movie = {
  Name: "Meet Joe Black",
  Synopsis: "The <span class='role'>grim reaper</span> (<a href='http://www.netflix.com/RoleDisplay/Brad_Pitt/73919'>Brad Pitt</a>) visits <span class='role'>Bill Parrish</span> (<a href='http://www.netflix.com/RoleDisplay/Anthony_Hopkins/43014'>Anthony Hopkins</a>)..."
};

/* Render the template with the movie data.
   The template uses the {{html}} template tag
   to  insert the Synopsis HTML markup data. */
$( "#movieTemplate" ).tmpl( movie )
  .appendTo( "#movieContainer" );
</script>

</body>
</html>

В этом примере в шаблон добавляются как простые строковые значения полей, так и значения с разметкой, взято вот с этой страницы.

P.S.

Примеры не стал расписывать, если аудитория поддержит мои начинания, то можно пошагово расписать что, как и почему, и привести ещё несколько примерчиков.

Вопросы по плагину прошу задавать на форуме, если есть комменты именно по статье – то комментируйте ниже.

Итак план работ на эту статью:

• jqGrid и «деревья»
  • Общие сведения о деревьях
  • jqGrid и SQL деревья
  • jqGrid и статические деревья
• Связывание данных в jqGrid
  • Простая подтаблица (subgrid)
  • jqGrid как subgrid
  • Ведущая и ведомая jqGrid

I.jqGrid и «деревья»

1) Краткие сведения о деревьях
Конечно здесь речь пойдет не о садово-огородных работах, а об представлении древовидных структур данных. В очередной раз обратимся за определением к Википедии:

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

В принципе более или менее сносное определение, несмотря на то, что оно навивает академическую скуку я все же настоятельно рекомендую ознакомиться с материалом по древовидным структурам. Поверьте моему не большому опыту, абсолютно каждый программист рано или поздно станет перед необходимостью использовать дерево, и тут одним из помошников может стать jqGrid. Плагин может работать с двумя самыми распространенными в вычислительной технике типами деревьев: на основе «вложенных множеств» (Nested Sets) и «матрицы смежностей» (adjacency matrix). Вообще говоря тема деревьев очень серьезна, это один из разделов теории графов на изучение которых отводится не одна лекция в ВУЗах, но от себя посоветую те материалы которые мне в свое время очень помогли. Столкнувшись впервые с проблемой хранения деревьев я наткнулся на материал по подходу вложенных множеств (Хранение древовидных структур в Базах данных) и сразу же остановился на нем, наверное потому что для работы с таким деревом существует готовый PHP класс. Но в процессе написания статьи я все же прочел статью Работа с «MySQL. Деревья» в которой рассматривается подход матрицы смежностей.

Думаю здесь общие сведения следует закончить и перейти к практическому рассмотрению.

2) jqGrid и SQL деревья
Для того, чтобы jqGrid могла работать с древовидными структурами, она должна быть загружена с модулем Tree Grid. Плагин может работать с обоими типами деревьев, упомянутых в предыдущем пункте. При этом jqGrid может работать с деревьями подгрузив все дерево за один раз или же подгружая ветви и листья по мере необходимости. Собственно загрузку дерева за один раз я рассматривать не буду, не интересно, а вот автоподгрузку мы разберем детально. И на этой ноте давайте перейдем к просмотру ДЕМО3.1, ссылка для скачивания

$(function(){
     $('#table_nested').jqGrid({
                     treeGrid: true,
                     treeGridModel: 'nested',
                     ExpandColumn: 'title',
                     ExpandColClick: true,
                     url: 'p3e1_n.php',
                     datatype: "json",
                     mtype: "POST",
                     colNames:["id","Раздел"],
                     colModel:[
                                   {name:'cid',index:'cid', width:1, hidden:true, key:true},
                                   {name:'title',index:'title', width:180}
                                  ],
                     treeIcons: {plus:'ui-icon-folder-collapsed',minus:'ui-icon-folder-open',leaf:'ui-icon-document'},
                     height: 'auto',
                     caption: 'вложенныe множества',
                     hidegrid: false
     });

     $('#table_adjacency').jqGrid({
                     treeGrid: true,
                     treeGridModel: 'adjacency',
                     ExpandColumn: 'title',
                     ExpandColClick: true,
                     url: 'p3e1_a.php',
                     datatype: "json",
                     mtype: "POST",
                     colNames:["cid","Раздел"],
                     colModel:[
                                   {name:'cid',index:'cid', width:1, hidden:true, key:true},
                                   {name:'title',index:'title', width:180}
                                   ],
                     treeIcons: {plus:'ui-icon-circle-plus',minus:'ui-icon-circle-minus',leaf:'ui-icon-person'},
                     height: 'auto',
                     caption:'матрица смежностей',
                     hidegrid: false
    });
});

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

• treeGrid: true – самый главный параметр, указывает что jqGrig будет работать с древовидной структурой, а не с простыми табличными данными
• treeGridModel: ‘adjacency’ / ‘nested’ – это свойство определяет какой алгоритм дерева использовать
• ExpandColumn: ‘title’ – определяет при клике по какому столбцу происходит открытие и(или) загрузка ветви
• ExpandColClick: true – необходимо, чтобы открытие ветви происходило при клике на колонку, а не на иконку
• colModel:[... key:true},...] – свойство key в массиве colModel позволяет указать данные какого столбца следует использовать как уникальный идентификатор записи при запросе данных с сервера. Т.е. благодаря этому свойству, можно переопределить идентификатор. Но только в одном столбце может быть указан key. Плагин будет использовать первый, найденный столбец как ключевой.
• treeIcons: – позволяет переопределить стандартные ({plus:’ui-icon-triangle-1-e’,minus:’ui-icon-triangle-1-s’,leaf:’ui-icon-radio-off’}) иконки листьев и ветвей.

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

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

В режиме ‘nested’ (на примере метода POST)

• POST['nodeid'] – идентификатор узла (ветви)
• POST['n_left'] – позиция узла «слева»
• POST['n_right'] – позиция узла «справа»
• POST['n_level'] – уровень вложенности узла

В режиме ‘adjacency’ (на примере метода POST)

• POST['nodeid'] – идентификатор узла (ветви)
• POST['parentid'] – идентификатор родительского узла
• POST['n_level'] – уровень вложенности узла

кроме этого, на сервер также передаются стандартные для jqGrid параметры (на примере метода POST)

POST['page'] – номер страницы, для «листалки»

POST['rows'] – количество записей, для ограничения при выборке данных

POST['sidx'] – значение index: в colModel, имя столбца по которому необходимо отсортировать результат

POST['sord'] – направление сортировки

После получения данных, серверный скрипт выполняет запрос данных из БД и сроит и выводит результат в следующих форматах.

В режиме ‘nested’ (на примере XML ответа)

• пользовательские столбцы
• level – уровень узла в иерархии
• lft – позиция узла «слева»
• rgt – позиция узла «справа»
• isLeaf – логический признак (true/false), определяет этот узел является «веткой»(есть подузлы) или «листом»(нет подузлов)
• expanded – логический признак (true/false), нужно ли показывать подузлы если этот узел является веткой, т.е. загрузить «открытым» или «закрытым»

В режиме ‘adjacency’ (на примере XML ответа)

• пользовательские столбцы
• level – уровень узла в иерархии
• parent – идентификатор родительского узла
• isLeaf – логический признак (true/false), определяет этот узел является «веткой»(есть подузлы) или «листом»(нет подузлов)
• expanded – логический признак (true/false), нужно ли показывать подузлы если этот узел является веткой, т.е. загрузить «открытым» или «закрытым»

Ядро (ридеры) jqGrid разбирают ответ и вставляют данные в таблицу. Вот теперь серверные скрипты будут более-менее понятны.

Вложенные множества (p3e1_n.php)(опущены подключение к БД и вывод результата)

// Получаем параметры от таблицы
    # ВНИМАНИЕ!!!
    # Данный код не имеет проверок запрашиваемых данных
    # что может стать причиной взлома! Обязательно проверяйте все данные
    # поступающие от клиента

    $node  = intval($_POST['nodeid']);
    $left  = intval($_POST['n_left']);
    $right = intval($_POST['n_right']);
    $level = intval($_POST['n_level']);

// Настраиваем условие для выбора ветки
    $WHERE = '';
    if($node > 0) {
       $level = $level + 1;  // нужно выбрать следующий уровень
       $WHERE = " AND cleft > ".$left." AND cright < ".$right." AND clevel = ".$level;
    }else{
       $level = 0;
    }

// Выбираем подразделы
    $query = "SELECT cid, title, clevel, cleft, cright FROM tree_nested_sets WHERE cleft BETWEEN cleft AND cright ".$WHERE." GROUP BY title ORDER BY cleft;";
    $result = mysql_query($query);

// Формируем результат
    $response->page = 1;
    $response->total = 1;
    $response->records = 1;

    $i = 0;
    while($row = mysql_fetch_assoc($result)) {
        //-------------------------------------
        // Определяем является ли выбранный узел "листом"
        if($row['cright'] == $row['cleft']+1)
            $leaf = 'true';
        else
            $leaf='false';
        //-------------------------------------

        if($level == $row['clevel']){
            $response->rows[$i]['cell'] = array($row['cid'], $row['title'], $row['clevel'], $row['cleft'], $row['cright'], $leaf, 'false');
        }
        $i++;
    }

Матрица смежностей(p3e1_a.php)(опущены подключение к БД и вывод результата)

// Выбираем все разделы без подразделов (листья)
    $query_feafs = "SELECT t1.cid FROM tree_adjacency_matrix AS t1 LEFT JOIN tree_adjacency_matrix AS t2 ON t1.cid = t2.id_parent WHERE t2.cid IS NULL";
    $sql_leafs = mysql_query($query_feafs);

    while($row = mysql_fetch_assoc($sql_leafs)) {
       $leafs[] = $row['cid']; // Массив для хранения "листьев"
    }
    unset($row);

// Получаем параметры от таблицы
    # ВНИМАНИЕ!!!
    # Данный код не имеет проверок запрашиваемых данных
    # что может стать причиной взлома! Обязательно проверяйте все данные
    # поступающие от клиента

    $level  = intval($_POST['n_level']);
    $node   = intval($_POST['nodeid']);

// Настраиваем условие для выбора ветки
    if($node > 0) {
       $level = $level + 1;            // нужно выбрать следующий уровень
       $WHERE = 'id_parent ='.$node;
    } else {
       $WHERE = 'id_parent IS NULL';   // выбрать корень(ни)
    } 

// Выбираем подразделы
    $query  = "SELECT cid, title, id_parent FROM tree_adjacency_matrix WHERE ".$WHERE;
    $result = mysql_query($query);

// Формируем результат
    $response->page      = 1;
    $response->total     = 1;
    $response->records   = 1;

    $i = 0;
    while($row = mysql_fetch_assoc($result)) {
       //-------------------------------------
       // Определяем ID родителя этого узла
       if(!$row['id_parent'])
           $parent = 'NULL';
       else
          $parent = $row['id_parent'];
       //-------------------------------------
       // Определяем является ли выбранный узел "листом"
       if(in_array($row['cid'], $leafs))
           $is_leaf = 'true';
       else
           $is_leaf = 'false';
       //--------------------------------------

       $response->rows[$i]['cell'] = array($row['cid'], $row['title'], $level, $parent, $is_leaf, FALSE);

       $i++;
    }

Я считаю комментировать в этих листингах особо нечего, кроме того что данные поступающие с сервера не ограничиваются по кол-ву записей и не сортируются. А практически все остальное является повторением примеров из предыдущих статей или специфическими вещами при работе с деревьями, описанными в статьях приложенных выше. Также обращу ваше внимание на то, что пример работы с Nested Set Model описанный в документации разработчиком не хотел работать, пришлось его доводить, за что мне большое спасибо .

3)jqGrid и статические деревья
Название статические деревья оносительно, того что мы делали немного ранее. Безусловно данные «загруженные» таким способом могут быть построены и скриптом динамически, но все же бывают такие задачи, когда дерево уже есть необходимо лишь вывести его в дружественной для пользователя форме как в ДЕМО3.2 . Не правда ли что-то напоминает? Да! это меню из демо jqGrid от разработчика.

Листинг клиентской части:

  $('#table').jqGrid({
            url: "tree.xml",
            datatype: "xml",
            height: "auto",
            pager: false,
            loadui: "disable",
            colNames: ["id","Items","url"],
            colModel: [
                {name: "id",width:1,hidden:true, key:true},
                {name: "menu", width:150, resizable: false, sortable:false},
                {name: "url",width:1,hidden:true}
            ],
            treeGrid: true,
                    caption: "jqGrid Demos",
            ExpandColumn: "menu",
            width: 200,
            rowNum: 200,
            ExpandColClick: true,
            treeIcons: {leaf:'ui-icon-document-b'}
 });

Полностью идентичные параметры плагина, за исключением того, что я отключил обработчик события onSelectRow.
Из листига должно стать понятно, что таблица запрашивает статичный(оносительно) файл tree.xml, который выглядит так

<?xml version='1.0' encoding="utf-8"?>
<rows>
    <page>1</page>
    <total>1</total>
    <records>1</records>
    <row><cell>1</cell><cell>Loading Data</cell><cell></cell><cell>0</cell><cell>1</cell><cell>10</cell><cell>false</cell><cell>false</cell></row>
    <row><cell>2</cell><cell>XML Data</cell><cell>xmlex.html</cell><cell>1</cell><cell>2</cell><cell>3</cell><cell>true</cell><cell>true</cell></row>
    <row><cell>3</cell><cell>JSON Data</cell><cell>jsonex.html</cell><cell>1</cell><cell>4</cell><cell>5</cell><cell>true</cell><cell>true</cell></row>

...

</rows>

Т.е. jqGrid просто разбирает данные из этого файла и строит TreeGrid.

II. Связывание данных в jqGrid

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

1)Простая подтаблица (subgrid)

Это весьма полезная опция у этого плагина. На ДЕМО3.3 обратите внимание на крестик в крайнем правом столбце таблицы. При клике на нем под выбранной строкой распахивается «карман» в котором находится небольшая табличка с названиями городов и прочей «рыбой». Вот пример группировки. Теперь давайте перейдем к листингам.

$('#table').jqGrid({
       url:'p3e3.php',
       datatype: 'json',
       mtype: 'POST',
       colNames:['Код страны','Cтрана',''],
       colModel :[
          {name:'country_code', index:'country_code', width:80, hidden: true},
          {name:'country_name', index:'country_name', width:60},
          {name:'description', width:200, sortable: false}
          ],
       pager: $('#tablePager'),
       rowNum: 100,
       scroll: true,
       viewrecords: true,
       sortname: 'country_name',
       sortorder: 'asc',
       width: 700,
       height: 400,
       subGrid: true,
         subGridUrl: 'p3e3.php?get=subgrid',
         subGridModel:[{
                     name :  [' ','Город', 'Широта', 'Долгота'],
                     width:  [40, 200, 150, 150],
                     align:  ['center','left','right','right'],
                     params: ['country_code','country_name']
                 }]
});

Как видите, абсолютно обыкновенный jqGrid, но в «настройках» есть несколько интересных моментов:

• subGrid: – в строке 19. Эта опция позволяет использовать подтаблицу.
• subGridUrl: – указывает путь к скрипту, который должен вернуть данные для построения подтаблицы. В данном случае происходит запрос к тому же скрипту, который «обслуживает» и таблицу-родителя при этом передав ему параметр get со значением subgrid
• subGridModel: – свойство которое задает параметры подтаблицы. Аналогично colModel таблицы-родителя

subGridModel: – представляет из себя массив с объектом, у которого есть свои параметры. name, width и align уверен их имена говорят сами за себя, это тексты заголовков столбцов, ширины соответствующих столбцов и выравнивание в них соответственно. Более интересным будет свойство params. Оно позволяет передать значения из каких то ячеек родительской таблицы на сервер при запросе подтаблицы. Иными словами, когда вы нажмете на крестик , открывающий подтаблицу, происходит запрос к серверу которому передается клоч (id) записи (в нашем случае это country_code) и плос к этим данным можно передать дополнительные (в нашем случае серверу будет передан еще и country_name). А вот на сервере получив значения нужных параметров (в этом примере серверный скрипт просто игнорирует значение параметра country_name) вы выполняем запрос к БД и выводим JSON объект с данными.

...
$get = $_REQUEST['get'];  // Параметр указывающий на то
                                    //  что мы запросили информацию для подтаблицы
...
switch ($get){
    case 'subgrid':
        // Выбрать города запрошенной страны
        $id =$_REQUEST['id'];

        // Запрос данных
        $query = "SELECT id, country_code, region_code, city, latitude, longitude, nbip FROM cities  WHERE country_code LIKE '".$id."'";

        $result = mysql_query($query);
        if(mysql_num_rows($result) >= 1){
            // Строки данных для таблицы
            $i = 0;
            while($row = mysql_fetch_assoc($result)) {
                $data->rows[$i]['cell'] = array($i+1,'<strong><em>'.$row['city'].'</em></strong>',$row['latitude'],$row['longitude']);
                $i++;
            }
        }
        break;

    default:
        // Выбрать названия стран и сосчетать города
        ...

}
// Вывести результат
...

Серверный скрипт особо ничем не отличается от рассмотренных в предыдущих примерах. При этом он разбит на две части оператором switch. Который по умолчанию выполняет «стандартную» обработку и вывод данных для главной таблицы. А вот если этот скрипт запустить передав ему параметр get (я выбрал такое имя только ради наглядности) тогда будет выполнена выборка данных для подтаблицы. Ну и если у вас чешутся руки поковырять пример, вы можете скачать его.

Подтаблицы это замечательный инструмент, который позволяет очень элегантно организавать данные, но при этом имеет один существенный недостаток – подтаблица «не живая». Т.е. данные в подтаблице не могут сортироваться, нет возморжности реализовать поиск и т.д. А это очень критично если в подтаблице будет выводиться много записей. Однако это ограничение отпадает само собой при использовании jqGrid как подтаблицы.

2)jqGrid как subgrid
Итак начнем с промотра ДЕМО3.4. Как видите все тот же «родной» jqGrid с названиями стран, и кол-вом городов в этой стране, но при этом подтаблица теперь представляет из себя самую настоящую jqGrid со всеми свойствами и методами. Согласитесь, что так работать намного приятнее и удобнее.

А вот здесь самое интересное – клиентский код (в листинге опущены все настройки родительской таблицы, кроме одного свойства):

...
subGrid: true,
subGridRowExpanded: function(subgrid_id, row_id) {
    var subgrid_table_id;
    subgrid_table_id = subgrid_id+'_t';

    $('#'+subgrid_id).html('<table id="'+subgrid_table_id+'"></table><div id="'+subgrid_table_id+'_pager"></div>');
    $('#'+subgrid_table_id).jqGrid({
        url: 'p3e4.php',
        datatype: 'json',
        mtype: 'POST',
        postData: {'get':'subgrid', 'id':row_id},
        colNames: ['Город', 'Широта', 'Долгота'],
        colModel: [
            {name: 'city', index: 'city', width:130},
            {name: 'latitude', index: 'latitude', width:80, align: 'right'},
            {name: 'longitude', index: 'longitude', width:80, align: 'right'}
            ],
        height: 'auto',
        autowidth: true,
        rownumbers: true,
        rownumWidth: 40,
        rowNum: 10,
        sortname: 'city',
        sortorder: 'asc',
        pager: $('#'+subgrid_table_id+'_pager'),
        rowNum:10,
        rowList:[10,20,50,100]
    });
}
...

Настройки таблицы-родителя идентичные предыдущему примеру, но при этом появилось новое свойство subGridRowExpanded. Думаю самые догадливые поняли, а самые любопытные прочли в документации в секции Subgrid, что subGridRowExpanded не просто свойство, а событие.

subGridRowExpanded – это событие возникает когда пользователь кликает на крестик раскрытия подтаблицы и выполняет определенную функцию при распахивании «кармана» для подтаблицы. При этом в функцию обработчик будут переданы 2 параметра:

• pID – уникальный идентификатор «кармана» (контейнера, если хотите) который открывается под выбранной строкой
• id – идентификатор записи под которой открылся «карман»

Безусловно существуют еще события, о которых вы можете узнать из документации. А мы пока пробежимся по листингу. Итак когда пользователь «тыцнул» на крестик, открывается контейнер и выполняется функция. Которая получает 2 параметра subgrid_id и row_id. Далее в строке 5 создаем строковое значение для атрибута id и в 6й строке используем метод jQuery, который вставляет в «карман» (кстати сказать что это обыкновенный DIV) html разметку таблицы и DIV’a. А далее идет бональная инициализация jqGrid для только что созданной разметки. Т.е. фактически мы просто напросто динамически создали разметку и создали jqGrid! В этот момент я воскликнул «Тааак!» и потер руки. Почему? Да потому, что зная id объекта (<div id="someid">…</div>) с помощью jQuery можно сотворить с ним все что угодно. Но прежде чем мы перейдем к следующему примеру я приведу ссылку на раздаточный материал по теме – это пример который только что расмотрели.
А теперь зная id контейнера давайте, еще добавим наглядности нашему примеру со странами и городами, например как на ДЕМО3.5. Как видите все эта же, скучная таблица со странами, но теперь при клике на крестик открывается подробная информация и флаг выбранной строки. Под которой свернутая jqGrid таблица с перечнем городов. Этот пример вы можете скачать перейдя по этой ссылке. Внутри архива все скрипты, но наибольший интерес представляет клиентский код. Я условно разделю его на 2 части, первая (нижняя) часть:

$('#table').jqGrid({
          ...
          subGrid: true,
          subGridRowExpanded: function(subgrid_id, row_id) {
                       getCountryDetails(subgrid_id, row_id);
                   }

});

Это таблица из предыдущего примера, но теперь при возникновении события subGridRowExpanded будет выполнена пользовательская функция getCountryDetails(), которая и является 2 половиной клиентского скрипта:

function getCountryDetails(container, countryCode){
    $.ajax({
            type: 'post',
            url: 'p3e5.php',
            data: ({'id': countryCode, 'get': 'details'}),
            dataType: 'json',
            success: function(server){
                $('#'+container).html('<div class="c_detail"><img src="files/images/'+server.flag+'"><ul><li><strong>Столица:</strong> '+server.capital+'</li><li><strong>Дата независимости:</strong> '+server.independence_date+'</li><li><strong>Официальные языки:</strong> '+server.off_lng+'</li><li><strong>Форма правления:</strong> '+server.government+'</li><li><strong>Глава правительства:</strong> '+server.president+'</li><li><strong>Валюта:</strong> '+server.currency+'</li><li><strong>Интернет-домены:</strong> '+server.domains+'</li><li><strong>Телефонный код:</strong> '+server.dialing_code+'</li><li><strong>Часовой пояс:</strong> '+server.time_zone+'</li></ul></div>');

                var subgrid_table_id = container+'_t';

                $('#'+container).append('<table id="'+subgrid_table_id+'"></table><div id="'+subgrid_table_id+'_pager"></div>');
                $('#'+subgrid_table_id).jqGrid({
                          caption: 'Города',
                          hiddengrid: true,
                          url: 'p3e4.php',
                          datatype: 'json',
                          mtype: 'POST',
                          postData: {'get':'subgrid', 'id':countryCode},
                          colNames: ['Город', 'Широта', 'Долгота'],
                          colModel: [
                            {name: 'city', index: 'city', width:130},
                            {name: 'latitude', index: 'latitude', width:80, align: 'right'},
                            {name: 'longitude', index: 'longitude', width:80, align: 'right'}
                          ],
                          height: 'auto',
                          autowidth: true,
                          rownumbers: true,
                          rownumWidth: 40,
                          rowNum: 10,
                          sortname: 'city',
                          sortorder: 'asc',
                          pager: $('#'+subgrid_table_id+'_pager'),
                          rowNum:10,
                          rowList:[10,20,50,100]
                });
            }
    });
}

В теле этой функции выполняется AJAX запрос, передающий серверному скрипту 2 параметра методом POST:

• id – идентификатор записи, в нашем случае это сокращенный код страны
• get – этот параметр указывает, что мы хотим получить с сервера детальную информацию по выбранной стране

После того как запрос будет успешно выполнен (см. строку 8), в открывшийся под выбранной строкой контейнер будет помещена какая-то HTML разметка с полученными с сервера данными. В данном примере такая разметка представлена не нумированным списком в картинкой – флагом страны. После этого в этот же контейнер помещается разметка для дочерней таблицы и производится инициализация дочерней таблицы.

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

Как вы понимаете в контейнер для подтаблицы можно помещать не только какую-то примитивную разметку, но и формы, флеш, другие «вкусные» и полезные вещи.

3)Ведущая и ведомая jqGrid

Однако не всегда можно сгруппировать данные и засунуть их в подтаблицу. Иногда данные могут быть полностью самостоятельными и при этом иметь некую связь. Например однажды передо мной стала задача вывести пользователю перечень счетов и платежей по этим счетам, и при этом обеспечить возможность просмотра счетов, платежей и платежей по выбранному счету. И тут то мне очень помогла методика «ведущий-ведомый». Работа которой проиллюстрирована в ДЕМО5.6.

Имеется две jqGrid, отображающие страны и города, которые можно менять местами благодаря плагину sortable. Также в верхней части документа есть checkbox который включает функцию фильтрации содержимого ведомой (нижней) таблицы, на основе выбранной записи в ведущей (верхней) таблице. При этом вся фильтровка осуществляется на стороне сервера, с этого и начнем разбор примера. Для удобства две таблицы запрашивают данные у двух отдельных серверных скриптов, один для городов, другой для стран.
Скрипт для таблицы «Города» (т.к. основная структура скрипта «стандартна» я привожу лишь основные моменты):

// Получение параметров page, rows и т.д.
...
if($_REQUEST['filterBy'] != 'null')  // Фильтр
    $WHERE = " WHERE country_code = '".$_REQUEST['filterBy']."' ";
else
    $WHERE = '';
...
// Запрос подсчета суммарного кол-ва записей
$result = mysql_query("SELECT COUNT(*)AS count FROM cities".$WHERE);
...
// Запрос выборки данных
$result = mysql_query("SELECT city, latitude, longitude FROM cities ".$WHERE." ORDER BY ".$sidx." ".$sord." LIMIT ".$start.", ".$limit);

В данном случае клиентский код при запросе данных с сервера помимо «стандартных» параметров, отправляет еще и дополнительный параметр filterBy, который по сути и определяет критерий по которому нужно выбрать записи из БД и вернуть клиенту. Что и проиллюстрировано в последующих запросах.

Скрипт для таблицы «Страны»:

// Получение параметров page, rows и т.д.
...
if($_REQUEST['filterBy'] != 'null'){
     $country = @mysql_fetch_array(mysql_query("SELECT country_code FROM cities WHERE id = ".$_REQUEST['filterBy']));
     $WHERE = " WHERE country_code = '".$country['country_code']."' ";
}else{
     $WHERE = '';
}
...
// Запрос подсчета суммарного кол-ва записей
$result = mysql_query("SELECT COUNT(*)AS count FROM countries ".$WHERE);
...
// Запрос выборки данных
$result = mysql_query("SELECT * FROM countries ".$WHERE." ORDER BY ".$sidx." ".$sord." LIMIT ".$start.", ".$limit);

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

<input type="checkbox" id="link">
<label for="link">Связать таблицы</label>

<div id="interfaceBody" style="margin: 10px 10px 10px 10px; padding: 0px 10px 10px 10px; border: 2px solid gray">
<div class="grid" id="countries" style="padding: 10px 10px 10px 10px; margin-top: 10px; border: 2px solid red">
    <table id="table_countries"></table>
    <div id="table_countriesPager"></div>
</div>
<div class="grid" id="cities" style="padding: 10px 10px 10px 10px; margin-top: 10px; border: 2px solid green">
    <table id="table_cities"></table>
    <div id="table_citiesPager"></div>
</div>
</div>

Если не обращать внимание на ужасно длинные inline-стили, то разметка достаточно проста. Сначала идет код checkbox’a с меткой, а следом контейнер всего интерфейса, внутри которого два дочерних контейнера, по одному для каждой таблицы.

И наконец клиентский скрипт:

//-------------------------------------------------------------------
// Функция-обработчик
function stickTogether(){
    if($('#link').is(':checked')){
        // Флаг "Связать таблицы" утановлен
        var masterId        = $('#interfaceBody > DIV:first').attr('id');                //Определяем ID контейнера "ведущей таблицы"
        var masterPostData  = $('#table_'+masterId).jqGrid('getGridParam','postData');   //Получаем весь объект postData "ведущей таблицы"
        var selId    = $('#table_'+masterId).jqGrid('getGridParam','selrow');            //Получаем id записи в выделенной строке
                                                                                         //не путайте с rowIndex
        // Проверяем какое текущее значение фильтра ведущей таблицы, он должен быть сброшен (например null)
        if(masterPostData.filterBy){
            $('#table_'+masterId).jqGrid('setGridParam',{'postData':{'filterBy':null}}); //Сбрасываем значение фильтра
            $('#table_'+masterId).trigger('reloadGrid');                                 //Перезагружаем данные в таблицу
        }

        var slaveId  = $('#interfaceBody > DIV:last').attr('id');                        //Определяем ID контейнера "ведомой таблицы"
        $('#table_'+slaveId).jqGrid('setGridParam',{'postData':{'filterBy':selId}});     //Применяем в качестве фильтра ведомой таблицы
                                                                                         //id выбранной записи в ведущей таблице
        $('#table_'+slaveId).trigger('reloadGrid');                                      //Перезагружаем данные в таблицу
    }else{
        // Флаг "Связать таблицы" не утановлен
        var coutriesT       = $('#table_countries');
        var countriesPost   = coutriesT.jqGrid('getGridParam','postData');

        if(countriesPost.filterBy){ //Сбрасываем фильтр т.к. ничего не нужно фильтровать
            coutriesT.jqGrid('setGridParam',{'postData':{'filterBy':null}})
            coutriesT.trigger('reloadGrid');
        }
        //-----------------------
        var citiesT       = $('#table_cities');
        var citiesPost    = citiesT.jqGrid('getGridParam','postData');

        if(citiesPost.filterBy){ //Сбрасываем фильтр т.к. ничего не нужно фильтровать
            citiesT.jqGrid('setGridParam',{'postData':{'filterBy':null}})
            citiesT.trigger('reloadGrid');
        }
    }
}
//-------------------------------------------------------------------
// Настройка плагинов
var tcountries = $('#table_countries').jqGrid({
                          caption: 'Страны',
                          hidegrid: false,
                          url:'p3e6_countries.php',
                          postData: {'filterBy':null},
                          datatype: 'json',
                          mtype: 'POST',
                          colNames:['Код страны','Cтрана','Столица','Домены'],
                          colModel :[
                                    {name:'country_code', index:'country_code', width:80, hidden: true},
                                    {name:'country_name', index:'country_name', width:60},
                                    {name:'capital', index:'capital', width:60},
                                    {name:'domains', index:'domains', width:60}
                                    ],
                          pager: $('#table_countriesPager'),
                          rowNum: 100,
                          scroll: true,
                          viewrecords: true,
                          sortname: 'country_name',
                          sortorder: 'asc',
                          height: 200,
                          autowidth: true,
                          onSelectRow: stickTogether
                });

var tcities = $('#table_cities').jqGrid({
                          caption: 'Города',
                          hidegrid: false,
                          url: 'p3e6_cities.php',
                          postData: {'filterBy':null},
                          datatype: 'json',
                          mtype: 'POST',
                          colNames: ['Город', 'Широта', 'Долгота'],
                          colModel: [
                            {name: 'city', index: 'city', width:130},
                            {name: 'latitude', index: 'latitude', width:80, align: 'right'},
                            {name: 'longitude', index: 'longitude', width:80, align: 'right'}
                          ],
                          height: 200,
                          autowidth: true,
                          rownumbers: true,
                          rownumWidth: 40,
                          rowNum: 100,
                          sortname: 'city',
                          sortorder: 'asc',
                          pager: $('#table_citiesPager'),
                          scroll: true,
                          viewrecords: true,
                          onSelectRow: stickTogether
                });

$("#interfaceBody").sortable({
        connectWith: '.grid',
        placeholder: 'ui-state-error',
        opacity: 0.7,
        stop: stickTogether
});

//-------------------------------------------------------------------
// Назначаем обработчик на событие
$('#link').change(stickTogether);

При всем своем объеме код достаточно груб и прост. Начнем пожалуй с назначения обработчика на изменение checkbox’a, самая последняя строка в листинге. Как видите при изменении checkbox’a будет вызвана функция stickTogether. В теле которой происходит проверка состояния флажка и если он не установлен, то произойдет сброс всех «фильтров» таблиц и перезагрузка данных в таблице.
Но самое интересное это код в «положительной» ветке if’а, когда флажок установлен. Мы знаем, что ведущая таблица расположена вверху, значит для начала узнаем какая же таблица в данный момент находится там. Для этого получаем значение атрибута id первого контейнера (строка 6). Теперь зная какая таблица ведущая – получаем объект postData, который, напомню, содержит все параметры и их значения для отправки серверу. В 7й строке получим Id записи в выделенной строке ведущей таблицы. Далее проверив значение фильтра ведущей таблицы, при необходимости сбросим его. Это необходимо если пользователь поменял таблицы местами.
В строке 16 узнаем id контейнера ведомой таблицы. И применяем фильтр, записав id выделенной строки в ведущей таблице, и перезагружаем данные.
У данного скрипта есть один недостаток – расплата за универсальность. Из-за того что на событие onSelectRow: в обоих таблицах определен один и тот же обработчик stickTogether, при выделении строки в ведомой таблице, происходит постоянное обновление ее записей. Но уверен что те кому потребуется такой функционал jqGrid без труда смогут это исправить.

Заключение
Подведя итоги проделанной работы можно сказать, что в данной статье мы рассмотрели практически все варианты расширенного использования плагина. Научились работать с древовидными данными и подтаблицами, а также попробовали управлять содержимым ведомой таблицы посредством данных из ведущей. В следующей части я рассмотрю еще одну экзотическую интересную опцию jqGrid – «drag’n'drop записей между jqGrid’ами».
Ну и как всегда если у вас возникли вопросы задавайте их на форуме ну а комментарии используйте для предложений и пожеланий.

Итак приблизительный план работ на следующий выпуск:

• Расширенные возможности jqGrid
  • drag’n'drop записей между jqGrid’ами
• Поиск данных в jqGrid
  • «inline» поиск
  • поиск с использованием встроенной формы
  • расширенный поиск с использованием встроенной формы
  • поиск с использованием внешней формы

В данной статье мы продолжим эксперименты и прощупаем еще ряд замечательных возможностей jqGrid, вот план действий:

• Другие способы загрузки данных
  • В виде JSON объекта
  • В виде массива
  • Конвертирование простой таблицы в jqGrid
• Форматирование данных
  • Форматирование ячеек
  • Изменение представления данных
• Панели инструментов и дополнительные панели
  • Панель-листалка
  • Панель инструментов
  • Пользовательские панели
• Управление столбцами данных
  • Изменение размера и положения столбцов
  • Скрываем не нужные или отображаем нужные столбцы данных

I. Другие способы загрузки данных
1) Загрузка данных в виде JSON объекта

JSON – как и XML является текстовым форматом обмена данными, при этом намного моложе последнего. Является более прогрессивным методом, благодаря большей гибкости своей архитектуры по сравнению с XML. На тему сравнения XML и JSON есть очень хорошая статья (JSON и XML. Что лучше?). Но при генерировании ответа в JSON методами PHP, есть ряд особенностей при работе с кириллицей. Повествование о которых выходит за рамки данной статьи, поэтому я ограничиваюсь лишь упоминанием.

Итак на практике загрузка таких данных требует следующей конфигурации плагина:

$(function(){
                $('#table').jqGrid({
                              url:'p2e1.php',
                  datatype: 'json',
                             mtype: 'GET',
                             colNames:['Код страны','Код региона', 'Город','Долгота','Широта','nbip'],
                             colModel :[
                                    {name:'country_code', index:'country_code', width:80},
                                    {name:'region_code', index:'region_code', width:80},
                                    {name:'city', index:'city', width:90},
                                    {name:'latitude', index:'latitude', width:60},
                                    {name:'longitude', index:'longitude', width:60},
                                    {name:'nbip', index:'nbip', width:30}],
                            pager: $('#tablePager'),
                            rowNum:10,
                            rowList:[10,20,30,100],
                            sortname: 'city',
                            sortorder: 'asc',
                  caption: 'Загрузка JSON данных',
                  rownumbers: true,
                            rownumWidth: 40
                });
    });

Все изменения я выделил отступами (строки 4, 19-21). Как вы можете видеть в листинге параметру datatype: присвоено значение ‘json’, что говорит плагину о том что от сервера ожидается ответ в виде JSON объекта. Далее я ввел в конфиг таблицы еще три свойства caption, rownumbers, rownumWidth. Что они определяют?

• caption – если это свойство не пустое, то у таблицы появляется заголовок с текстом, присвоенным этому свойству.
• rownumbers – если это свойство «истина», то первым столбцом таблицы будет столбец с номерами записей по порядку.
  • rownumWidth – это свойство зависимо от rownumbers. И определяет ширину столбца с нумерацией.

С данного момента, я ввожу еще одно правило в этот цикл статей. Все свойства-параметры инициализации jqGrid вы будете самостоятельно изучать на странице документации плагина в разделе Options и colModel Options. Но при этом я буду комментировать, то на что следует обратить внимание.

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

Пример 1 – используя массив

...
// Начало формирование массива
// для последующего преобразоования
// в JSON объект
$data['page']       = $page;
$data['total']      = $total_pages;
$data['records']    = $count;
// Строки данных для таблицы
$i = 0;
while($row = mysql_fetch_assoc($result)) {
    $data['rows'][$i]['id'] = $row['id'];
    $data['rows'][$i]['cell'][] = $row['country_code'];
    $data['rows'][$i]['cell'][] = $row['region_code'];
    $data['rows'][$i]['cell'][] = $row['city'];
    $data['rows'][$i]['cell'][] = $row['latitude'];
    $data['rows'][$i]['cell'][] = $row['longitude'];
    $data['rows'][$i]['cell'][] = $row['nbip'];
    $i++;
}
// Перед выводом не забывайте выставить header
// с типом контента и кодировкой
header("Content-type: application/json;charset=utf-8");
echo json_encode($data);

Пример 2 – используя объект

...
// Начало формирование объекта
// для последующего преобразоования
// в JSON объект
$data->page       = $page;
$data->total       = $total_pages;
$data->records   = $count;
// Строки данных для таблицы
$i = 0;
while($row = mysql_fetch_assoc($result)) {
    $data->rows[$i]['id'] = $row[id];
    $data->rows[$i]['cell'] = array($row[country_code],$row[region_code],$row[city],$row[latitude],$row[longitude],$row[nbip]);
    $i++;
}
// Перед выводом не забывайте выставить header
// с типом контента и кодировкой
header("Content-type: text/script;charset=utf-8");
echo json_encode($data);

Оба подхода выполняют одни и те же действия, но при этом выбор подхода зависит от ваших предпочтений и уровня мастерства.

Вот ссылка на ДЕМО2.1 и ссылка на архив с примером.
Подытожив, скажу, что как видите в данном способе загрузки данных нет ничего сложного и принцип работы идентичен с загрузкой данных в виде XML, но при этом немного облегчается код серверного скрипта. Также повторюсь, что при кодировании данных в JSON методом PHP следует учитывать особенности работы с кириллицей!

2) Загрузка данных в виде массива

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

$(function(){
$('#table').jqGrid({
  datatype: 'local',
          colNames:['ID','Код страны','Код региона', 'Город','Долгота','Широта','nbip'],
          colModel :[
                        {name:'id', index:'id', width:20},
                        {name:'country_code', index:'country_code', width:80},
                        {name:'region_code', index:'region_code', width:80},
                        {name:'city', index:'city', width:90},
                        {name:'latitude', index:'latitude', width:60},
                        {name:'longitude', index:'longitude', width:60},
                        {name:'nbip', index:'nbip', width:30}
                     ],
          caption: 'Загрузка массива данных'
});
var data = [
            {id: '1', country_code:'AD',  region_code:'02', city:'Canillo', latitude:'42.5667', longitude: '1.6', nbip:'0'},
            {id: '2', country_code:'AD',  region_code:'02', city:'El Tarter', latitude:'42.5833', longitude: '1.65', nbip:'0'},
            {id: '3', country_code:'AD',  region_code:'03', city:'Encamp', latitude:'42.5333', longitude: '1.5833', nbip:'0'},
            {id: '4', country_code:'AD',  region_code:'04', city:'Arinsal', latitude:'42.5667', longitude: '1.4833', nbip:'1'},
            {id: '5', country_code:'AD',  region_code:'04', city:'La Massana', latitude:'42.55', longitude: '1.5167', nbip:'0'},
            {id: '6', country_code:'AD',  region_code:'04', city:'Llorts', latitude:'42.6', longitude: '1.5333', nbip:'0'},
            {id: '7', country_code:'AD',  region_code:'05', city:'Ordino', latitude:'42.55', longitude: '1.5333', nbip:'2'},
            {id: '8', country_code:'AD',  region_code:'06', city:'Sant JuliГ  De LГІria', latitude:'42.4667', longitude: '1.5', nbip:'0'},
            {id: '9', country_code:'AD',  region_code:'07', city:'Andorra La Vella', latitude:'42.5', longitude: '1.5167', nbip:'56'},
            {id: '10', country_code:'AD',  region_code:'08', city:'Engordany', latitude:'42.5167', longitude: '1.55', nbip:'1'},
            {id: '11', country_code:'AD',  region_code:'08', city:'Les Escaldes', latitude:'42.5', longitude: '1.5333', nbip:'0'},
            {id: '12', country_code:'AE',  region_code:'01', city:'Abu Dhabi', latitude:'24.4667', longitude: '54.3667', nbip:'824'},
            {id: '13', country_code:'AE',  region_code:'01', city:'Al Ain', latitude:'24.1917', longitude: '55.7606', nbip:'19'},
            {id: '14', country_code:'AE',  region_code:'03', city:'Deira', latitude:'25.2722', longitude: '55.3111', nbip:'0'},
            {id: '15', country_code:'AE',  region_code:'03', city:'Dubai', latitude:'25.2521', longitude: '55.28', nbip:'7082'},
            {id: '16', country_code:'AE',  region_code:'03', city:'Jumairah', latitude:'25.2097', longitude: '55.2478', nbip:'0'},
            {id: '17', country_code:'AE',  region_code:'04', city:'Fujairah', latitude:'25.1231', longitude: '56.3375', nbip:'1'},
            {id: '18', country_code:'AE',  region_code:'05', city:'Ras Al Khaima', latitude:'25.7911', longitude: '55.9428', nbip:'0'},
            {id: '19', country_code:'AE',  region_code:'05', city:'Ras Al Khaimah', latitude:'25.7911', longitude: '55.9428', nbip:'2'},
            {id: '20', country_code:'AE',  region_code:'06', city:'Dibba', latitude:'25.6167', longitude: '56.2667', nbip:'1'},
            {id: '21', country_code:'AE',  region_code:'06', city:'Sharjah', latitude:'25.3622', longitude: '55.3911', nbip:'297'},
            {id: '22', country_code:'AF',  region_code:'11', city:'Herat', latitude:'34.3469', longitude: '62.1983', nbip:'0'},
            {id: '23', country_code:'AF',  region_code:'13', city:'Kabul', latitude:'34.5167', longitude: '69.1833', nbip:'161'},
            {id: '24', country_code:'AF',  region_code:'23', city:'Iran', latitude:'31.8314', longitude: '65.0689', nbip:'0'},
            {id: '25', country_code:'AF',  region_code:'23', city:'Kandahar', latitude:'31.6125', longitude: '65.7094', nbip:'0'}
           ]
for(var i = 0;i <= data.length; i++){
    $('#table').jqGrid('addRowData',i+1,data[i]);
}
});

Как видите и в этом примере нет ничего «военного», все предельно просто. В качестве datatype: указываем ‘local’. Далее каким-либо образом(в данном примере простым присвоением) создаем массив объектов (каждая строка данных является объектом) и производим добавление данных методом addRowData в цикле (for(var i = 0;i <= data.length; i++)).
На данном этапе мне следует дать небольшой комментарий. Почему я написал «… добавление данных методом …» а при этом вся конструкция выглядит как передача параметра. Т.е. фактически происходит передача названия метода addRowData методу jqGrid() в качестве параметра. Дело все в том, что с версии 3.6 разработчики реализовали новый API для работы с jqGrid, согласно которому запись вида $(‘#table’).jqGrid(‘addRowData’,i+1,data[i]); равноценна $(‘#table’).addRowData(i+1,data[i]); Но будьте внимательны, не все методы могут быть использованы в аннотации нового API, перед использованием методов обязательно ознакомьтесь с документацией по данному методу на странице Methods.

• addRowData – добавляет в таблицу новую строку данных. При этом строка данных должна выглядеть следующим образом {имя1: значение1, имя2: значение2…}. В качестве первого параметра методу, addRowData передается id вставляемой строки, а вторым объект данных (addRowData(row_id, row_data)).

Также в свойствах инициализации jqGrid вы не найдете параметров панели-листалки, потому что данные уже загружены и нет необходимости запрашивать их порциями.
Если присмотреться, то можно заметить что данный способ загрузки данных напоминает работу с JSON, но только на стороне клиента. Такой способ может пригодиться если вы по каким-либо причинам не можете сформировать XML или JSON ответ с данными от сервера.
3) Конвертирование простой таблицы в jqGrid
Данный способ создания jqGrid будет полезен во время «страховки» на странице. Т.е. у нас есть страница, на которой есть таблица jqGrid в «нормальном браузере», но как же пользователи у которых браузер не поддерживает JavaScript (Простите но тут обязан быть смайл )? Они не увидят таблицу? И вот тут то и пригодится данное свойство плагина.
План действий таков:

• На сервере выполняется скрипт, который выводит в браузер страницу с таблицей и данными.
• После загрузки всех элементов страницы выполняется функция преобразования статической таблицы в jqGrid
• Ну, а если браузер посетителя-бедолаги не поддерживает JS, то он просто увидит таблицу. Которую кстати можно оформить используя стили jQueryUI CSS Framework.

Вот и листинг

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
<title>Осваиваем jqGrid с Linkexchanger</title></p>
<link rel='stylesheet' type='text/css' media='screen' href='css/flick/jquery-ui-1.7.2.custom.css' />
<link rel='stylesheet' type='text/css' media='screen' href='css/ui.jqgrid.css' />
<p><style>
html, body {
margin: 0;
padding: 0;
font-size: 80%;
}
</style>
<script type='text/javascript' src='js/jquery-1.4.min.js'></script>
<script src='js/i18n/grid.locale-ru.js' type='text/javascript'></script>
<script src='js/jquery.jqgrid.min.js' type='text/javascript'></script>
<script type='text/javascript'>
$(function(){
    $('#table').click(function(){
        tableToGrid('#table');
    });
});
</script></head>
<body>
<?php
// Подключение и выбор БД
//$db = mysql_connect('database_host', 'database_user', 'database_password');
//mysql_select_db('database_name');
// Подключение и выбор БД
$db = mysql_connect('database_host', 'database_user', 'database_password');
mysql_select_db('database_name');</p>
// Запрос выборки данных
$query = 'SELECT id, country_code, region_code, city, latitude, longitude, nbip FROM cities LIMIT 30';
$result = mysql_query($query);
// Строим таблицу с данными
echo "<table id='table' border='1'>";
echo "<thead><tr><th>ID</th><th>Код страны</th><th>Код региона</th><th>Город</th><th>Долгота</th><th>Широта</th><th>nbip</th></tr></thead>";
while($row = mysql_fetch_assoc($result)) {
    echo "<tbody><tr><td>'.$row['id'].'</td><td>'.$row['country_code'].'</td><td>'.$row['region_code'].'</td><td>'.$row['city'].'</td>td>'.$row['latitude'].'</td><td>'.$row['longitude'].'</td><td>'.$row['nbip'].'</td></tr></tbody>";
}
echo "</table>";
?>
</body>
</html>

И ссылка на ДЕМО2.2 (просто кликните на таблицу)
Как видите простейший код, при клике на объект #table собственно таблицу, выполняется функция tableToGrid() которой в качестве параметра передается селектор таблицы которую следует преобразовать в jqGrid.

Использование свойств при конвертировании таблицы в jqGrid
И раз уж мы начали разговор про этот метод инициализации jqGrid, то давайте рассмотрим на примере ДЕМО2.2_1 его работу. А следом и код

var options = {
                    caption: 'Конвертирование таблицы',
                    width: 800,
                    height: 600,
                    colModel :[
                                {name:'ID', width:20},
                                {name:'Код страны', width:80},
                                {name:'Страна', width:100, formatter:'select', editoptions:{value:"AD:Andorra; AE:United Arab Emirates; AF:Afghanistan; AG:Antigua and Barbuda; AI:Anguilla; AL:Albania; AM:Armenia; AN:Netherland Antilles; AO:Angola; AR:Argentina"}},
                                {name:'Код региона', width:80},
                                {name:'Город', width:90},
                                {name:'Долгота', width:60},
                                {name:'Широта', width:60},
                                {name:'nbip', index:'nbip', width:30}
                   ]};
                   tableToGrid("#table",options);

Как видите при использовании этой функции, в качестве второго параметра можно передать объект с параметрами таблицы. Но при этом следует обратить внимание на то, что заголовки столбцов должны иметь такое же имя как и текст в заголовке конвертируемой таблицы. Я думаю вы обратили внимание на дополнительные параметры в строке 8, мы рассмотрим их далее в этой статье.
II. Форматирование данных
1) Форматирование ячеек
Википедия определяет Форматирование как «приведение чего-либо к какому-либо формату». Соответственно в нашем случае это будет преобразование полученных от сервера данных, к другому виду. jqGrid позволяет производить как простое так и сложное форматирование. «Простым форматированием» я условно назвал «Выравнивание» и «Изменением цвета» данных при этом мы «форматируем ячейку».
Давайте посмотрим как это делается на примере ДЕМО2.3

$(function(){
    $('#table').jqGrid({
              datatype: 'local',
              colNames:['ID','Код страны','Код региона', 'Город','Долгота','Широта','nbip'],
              colModel :[
                            {name:'id', index:'id', width:20, align: 'center'},
                            {name:'country_code', index:'country_code', width:80, align: 'right'},
                            {name:'region_code', index:'region_code', width:80, align: 'left'},
                            {name:'city', index:'city', width:90},
                            {name:'latitude', index:'latitude', width:60},
                            {name:'longitude', index:'longitude', width:60},
                            {name:'nbip', index:'nbip', width:30}
                         ],
              caption: 'Простое форматирование',
              width: 600,
              afterInsertRow: function(row_id, row_data){
                                if (row_data.country_code == 'AD') {
                                    $('#table').jqGrid('setCell',row_id,'city','',{'color':'#FF00FF'});
                                }else if(row_data.country_code == 'AE'){
                                    $('#table').jqGrid('setCell',row_id,'city','',{'color':'red'});
                                }else{
                                    $('#table').jqGrid('setCell',row_id,'city','',{'background-color': '#999999'});
                              if(row_data.country_code == 'CZ'){
                                        $('#table').jqGrid('setCell',row_id,'city','',{'color':'#FF00FF', 'font-weight':'bold'},{'title': 'Чехия Ура!'});
                                    }
                                }
                            }
    });
var data = [
            {id: '1', country_code:'AD',  region_code:'02', city:'Canillo', latitude:'42.5667', longitude: '1.6', nbip:'0'},
            {id: '2', country_code:'AD',  region_code:'02', city:'El Tarter', latitude:'42.5833', longitude: '1.65', nbip:'0'},
            {id: '3', country_code:'AD',  region_code:'03', city:'Encamp', latitude:'42.5333', longitude: '1.5833', nbip:'0'},
            {id: '4', country_code:'AD',  region_code:'04', city:'Arinsal', latitude:'42.5667', longitude: '1.4833', nbip:'1'},
            {id: '5', country_code:'AD',  region_code:'04', city:'La Massana', latitude:'42.55', longitude: '1.5167', nbip:'0'},
            {id: '6', country_code:'AD',  region_code:'04', city:'Llorts', latitude:'42.6', longitude: '1.5333', nbip:'0'},
            {id: '7', country_code:'AD',  region_code:'05', city:'Ordino', latitude:'42.55', longitude: '1.5333', nbip:'2'},
            {id: '8', country_code:'AD',  region_code:'06', city:'Sant JuliГ  De LГІria', latitude:'42.4667', longitude: '1.5', nbip:'0'},
            {id: '9', country_code:'AD',  region_code:'07', city:'Andorra La Vella', latitude:'42.5', longitude: '1.5167', nbip:'56'},
            {id: '10', country_code:'AD',  region_code:'08', city:'Engordany', latitude:'42.5167', longitude: '1.55', nbip:'1'},
            {id: '11', country_code:'AD',  region_code:'08', city:'Les Escaldes', latitude:'42.5', longitude: '1.5333', nbip:'0'},
            {id: '12', country_code:'AE',  region_code:'01', city:'Abu Dhabi', latitude:'24.4667', longitude: '54.3667', nbip:'824'},
            {id: '13', country_code:'AE',  region_code:'01', city:'Al Ain', latitude:'24.1917', longitude: '55.7606', nbip:'19'},
            {id: '14', country_code:'AE',  region_code:'03', city:'Deira', latitude:'25.2722', longitude: '55.3111', nbip:'0'},
            {id: '15', country_code:'AE',  region_code:'03', city:'Dubai', latitude:'25.2521', longitude: '55.28', nbip:'7082'},
            {id: '16', country_code:'AE',  region_code:'03', city:'Jumairah', latitude:'25.2097', longitude: '55.2478', nbip:'0'},
            {id: '17', country_code:'AE',  region_code:'04', city:'Fujairah', latitude:'25.1231', longitude: '56.3375', nbip:'1'},
            {id: '18', country_code:'AE',  region_code:'05', city:'Ras Al Khaima', latitude:'25.7911', longitude: '55.9428', nbip:'0'},
            {id: '19', country_code:'AE',  region_code:'05', city:'Ras Al Khaimah', latitude:'25.7911', longitude: '55.9428', nbip:'2'},
            {id: '20', country_code:'AE',  region_code:'06', city:'Dibba', latitude:'25.6167', longitude: '56.2667', nbip:'1'},
            {id: '21', country_code:'AE',  region_code:'06', city:'Sharjah', latitude:'25.3622', longitude: '55.3911', nbip:'297'},
            {id: '22', country_code:'AF',  region_code:'11', city:'Herat', latitude:'34.3469', longitude: '62.1983', nbip:'0'},
            {id: '23', country_code:'AF',  region_code:'13', city:'Kabul', latitude:'34.5167', longitude: '69.1833', nbip:'161'},
            {id: '24', country_code:'AF',  region_code:'23', city:'Iran', latitude:'31.8314', longitude: '65.0689', nbip:'0'},
            {id: '25', country_code:'AF',  region_code:'23', city:'Kandahar', latitude:'31.6125', longitude: '65.7094', nbip:'0'},
            {id: '26', country_code:'CZ',  region_code:'23', city:'Stav', latitude:'50.4667', longitude: '15.4667', nbip:'0'}
           ]
for(var i = 0;i <= data.length; i++){
     $('#table').jqGrid('addRowData',i+1,data[i]);
}
});

Для этого примера я взял код «Загрузки данных из массива». Давайте разберем, то что изменилось. Во-первых для удобства это таблица имеет ширину 600px (width: 600), во-вторых появился обработчик на событие afterInsertRow и в-третьих – в набор данных добавилась строка id 26.
Итак выравнивание текста в ячейке осуществляется простым определением свойства align в модели столбца (colModel).
А вот чтобы раскрасить, а также изменить другие стилевые свойства ячейки, нужно писать пользовательскую функцию, например как та что написал я. Давайте разберемся что же происходит.
Сразу после добавления строки в таблицу возникает событие afterInsertRow (все события вы можете изучить на странице Events), при котором выполняется функция. Функции принимает в качестве параметров (см. описание события) Id строки (row_id) и объект с данными (row_data) текущей строки, вставка которой вызвала событие. Далее смотрим чему равен country_code текущей строки.

• Если AD то установить ячейке (setCell) в строке row_id с именем city данные » (пусто – не менять текущие данные) и стиль color:#FF00FF. Последнее действие аналогично записи для «обыкновенной» таблицы.
• Если AE – аналогично, но цвет текста в ячейке сделать red.
• Иначе всем остальным ячейкам сделать фон #999999 и если попадутся строки с CZ то выделить такие ячейки жирным шрифтом и присвоить атрибуту title текст ‘Чехия Ура!’. Атрибуты ячейки можно выставить передав в качестве 5го параметра функции setCell объект с именами и значениями этих атрибутов.

Как вы понимаете благодаря такому подходу, можно раскрасить таблицу как угодно.
2) Изменение представления данных
Другим мощным инструментом форматирования данных в jqGrid является набор «предопределенных форматтеров» (Predefined Formatter). Это функции, которые выполняются над данными в столбце.
Существует 9 стандартных форматтеров

• integer – форматирование целых чисел
• number – форматирование любых чисел
• currency – форматирование денежных величин
• date – форматирование даты/времени
• email – форматирование адресов эл. почты
• link – форматирование ссылок
• showlink – генератор ссылок
• checkbox – форматирование данных имеющих два состояния
• select - форматирование данных имеющих множество состояний

$(function(){
    $('#table').jqGrid({
      url:'p2e4.php',
      datatype: 'json',
      mtype: 'GET',
      colNames:['id', 'integer', 'number', 'currency','date','email','link','showlink','checkbox','select','ip'],
      colModel :[
        {name:'id', index:'id', width:15},
        {name:'integer', index:'integer', width:50},
        {name:'number', index:'number', width:50},
        {name:'currency', index:'currency', width:60},
        {name:'date', index:'date', width:65},
        {name:'email', index:'email', width:70},
        {name:'link', index:'link', width:300},
        {name:'showlink', index:'showlink', width:130},
        {name:'checkbox', index:'checkbox', width:35},
        {name:'select', index:'select', width:30},
        {name:'ip', index:'ip', width:50}],
      caption: 'Данные в чистом виде',
      autowidth: true
    });
$('#tableFormated').jqGrid({
      url:'p2e4.php',
      datatype: 'json',
      mtype: 'GET',
      colNames:['id', 'integer', 'number', 'currency','date','email','link','showlink','checkbox','select','ip'],
      colModel :[
        {name:'id', index:'id', width:15},
        {name:'integer', index:'integer', width:50, formatter:'integer', formatoptions:{defaultValue: 'n.a.'}},
        {name:'number', index:'number', width:50, formatter:'number',formatoptions:{decimalPlaces: 3}},
        {name:'currency', index:'currency', width:60, formatter:'currency',formatoptions:{prefix: '$', suffix:'p.'}},
        {name:'date', index:'date', width:65, formatter: 'date',formatoptions:{srcformat:'Y-m-d H:i:s',newformat:'F d'}},
        {name:'email', index:'email', width:70, formatter: 'email'},
        {name:'link', index:'link', width:300, formatter:'link',formatoptions:{target: '_blank'}},
        {name:'title', index:'title', width:130, formatter:'showlink',formatoptions:{baseLinkUrl: 'http://www.linkexchanger.su/forum/',showAction: 'viewtopic.php', addParam: '&f=4', idName:'t',target: '_blank'}},
        {name:'checkbox', index:'checkbox', width:35, formatter:'checkbox',formatoptions:{disabled: true}},
        {name:'select', index:'select', width:30, formatter:'select', editoptions:{value:":Все; black:Черный; white:Белый; yellow:Желтый; red:Красный"}},
        {name:'ip', index:'ip', width:50, formatter:long2ip}],
      caption: 'Встроенное форматирование',
      autowidth: true
    });
function long2ip (proper_address) {
        var output = false;
if ( !isNaN( proper_address ) && ( proper_address >= 0 || proper_address <= 4294967295 ) ) {
            output = Math.floor(proper_address / Math.pow( 256, 3 ) ) + '.' +
                Math.floor( ( proper_address % Math.pow( 256, 3 ) ) / Math.pow( 256, 2 ) ) + '.' +
                Math.floor( ( ( proper_address % Math.pow( 256, 3 ) )  % Math.pow( 256, 2 ) ) / Math.pow( 256, 1 ) ) + '.' +
                Math.floor( ( ( ( proper_address % Math.pow( 256, 3 ) ) % Math.pow( 256, 2 ) ) % Math.pow( 256, 1 ) ) / Math.pow( 256, 0 ) );
        }
return output;
    }
});

Работающий код данного примера можно увидеть на ДЕМО2.4. Или если вы хотите скачать его, то вот ссылка на архив, внутри клиентский и серверный скрипты, а также дамп БД.
Давайте разберемся как все это работает. Сам пример выглядит как две таблицы и как написано в заголовках, верхняя – отображает данные с сервера как они есть, а нижняя – применяет собственные методы форматирования. Как вы уже наверное догадались, в этом примере важен только клиентский код, поэтому серверный скрипт я упростил до минимума, поэтому таблица не сортирует данные в столбцах. Все столбцы кроме последнего названы в соответствии с используемым «форматтером». Все «форматтеры» используются одинаково, указывая имя и параметры в colModel таблицы, описания всех параметров доступны на странице Predefined Formatter документации плагина.
Теперь подробнее по применению в данном примере.

• formatter:’integer’, formatoptions:{defaultValue: ‘n.a.’} – я переназначил значение по-умолчанию, которое будет отображаться в таблице если сервер не вернул никакого значения (пусто).
• formatter:’number’,formatoptions:{decimalPlaces: 3} – для данного типа данных я хочу чтобы после запятой было 3 знака.
• formatter:’currency’,formatoptions:{prefix: ‘$’, suffix:’p.’} – для валют нужно ставить вначале $, а в конце р.
• formatoptions:{srcformat:’Y-m-d H:i:s’,newformat:’F d’} – для использования этого «форматтера» сначала нужно указать параметру srcformat: маску формата даты в принятом в PHP виде, а затем новый формат newformat:
• formatter: ‘email’ – этот «форматтер» не имеет параметров, он всего лишь добавляет mailto: к адресам эл.почты
• formatter:’link’,formatoptions:{target: ‘_blank’} – с помощью ‘link’ можно указать target открытия ссылки
• formatter:’showlink’,formatoptions:{baseLinkUrl: ‘http://www.linkexchanger.su/forum/’, showAction: ‘viewtopic.php’, addParam: ‘&f=4′, idName:’t', target: ‘_blank’} - а вот с помощью этого «форматтера» можно генерировать ссылки. В нашем примере сервер возвращает название раздела форума linkexchanger в поле showlink в верхней таблице, при этом в нижней таблице вы видите уже готовую ссылку на тему. Это делается указанием следующих параметров:
  • baseLinkUrl: – базовая (не изменяющаяся) часть адреса.
  • showAction: – имя скрипта или метода сервера, в нашем примере это скрипт, который показывает тему.
  • addParam: – дополнительные параметры адреса, в нашем случае это идентификатор ветки форума.
  • idName: – какой параметр использовать в качестве имени идентификатора записи, в нашем случае темы форума. А вот сам идентификатор записи (темы на форуме) равен id строки в таблице.
• formatter:’checkbox’,formatoptions:{disabled: true} – удобно использовать при отображении булевых данных (данных которые имеют только два значения), намного нагляднее видеть «флажок» вместо 0 или 1 например. При этом «флажок» можно сделать активным (formatoptions:{disabled: false}) и использовать при быстром редактировании (об этом в последующих статьях).
• formatter:’select’, editoptions:{value:»:Все; black:Черный; white:Белый; yellow:Желтый; red:Красный»} – этот «форматтер» очень пригодится при отображении данных, имеющих много значений, но при этом все значения известны. В нашем примере замена названий цветов.

На этом Стандартные «форматтеры» закончились, а в последнем столбце используется пользовательский. Он представляет из себя функцию function long2ip (proper_address) полный аналог PHP’шной функции, но написанной на и для JS, которая переводит IP из unsignet int в «человеко-понятный» вид октетов с точками.
Если возникла необходимость создать сложный пользовательский «форматтер» со множеством параметров, то на странице Predefined Formatter можно посмотреть пример расширения jqGrid своим «форматтером».
III. Панели инструментов и дополнительные панели
1) Панель-листалка (Pager)
C этой панелью мы уже знакомы, именно ее мы инициализировали устанавливая свойства pager:, rowNum:, rowList: в предыдущих примерах. В принципе об этой панели рассказывать более нечего, я лишь приведу ссылку на прочие свойства панели Pager, которые возможно понадобятся вам для решения какой-то специфической задачи.
2) Панель инструментов (Navigator)
Данная панель совсем не является панелью это функция, которая позволяет добавлять элементы управления (кнопки) на панель-листалку. Т.е. если вы хотите использовать pager, то вы обязательно должны его объявить при инициализации jqGrid хотя бы со стандартными параметрами, без использования rowNum:, rowList:. После этого уже можно добавлять кнопки, давайте взглянем на ДЕМО2.5. Добавление кнопок стандартных функций.

$(function(){
        var pager = $('#tablePager');
$('#table').jqGrid({
                  url:'p2e1.php',
                  datatype: 'json',
                  mtype: 'GET',
                  colNames:['Код страны','Код региона', 'Город','Долгота','Широта','nbip'],
                  colModel :[
                    {name:'country_code', index:'country_code', width:80},
                    {name:'region_code', index:'region_code', width:80},
                    {name:'city', index:'city', width:90},
                    {name:'latitude', index:'latitude', width:60},
                    {name:'longitude', index:'longitude', width:60},
                    {name:'nbip', index:'nbip', width:30}],
                  pager: pager,
                  sortname: 'city',
                  sortorder: 'asc',
                  caption: 'Pager в качестве панели инструментов',
                  autowidth: true
         }).jqGrid('navGrid', pager);
});

Итак друзья мы с вами переступили порог начального уровня использования плагина, с этого момента я буду рассказывать о продвинутых функциях jqGrid.
Как вы уже заметили на листалке появились 6 кнопок, при этом 4 «практически не работают», 1 – «практически работает» и 1 работает, давайте разберемся. Листинг выглядит вполне «стандартно», разве что строка var pager = $(‘#tablePager’); может вызвать легкое недоумение у новичков, но это обычная практика программирования JS, а именно кэширование, об этом написан цикл хороших статей, возьмите эту методику на вооружение! Далее вы можете видеть что после инициализации jqGrid я инициализирую панель Navigator используя метод navGrid. Данному методу в качестве первого параметра передается селектор панели листалки, вторым параметром (не указан в листинге) – объект в котором указывается функции (редактировать, добавить и т.п.) которые необходимо задействовать на панели (например {view:true, del:false}), а далее идут объекты с параметрами по каждой из функций в определенном порядке. Давайте я приведу иллюстрацию в виде списка:

• pagerSelector
• {refresh: true(false), add: true(false), del: true(false), edit: true(false), search: true(false), view: true(false)}
• {… параметры редактирования …}
• {… параметры добавления …}
• {… параметры удаления …}
• {… параметры поиска …}
• {… параметры просмотра …}

Я уверен, что теперь вам стало ясно почему не работают или не совсем работают задействованные функции, потому что они просто не настроены. Т.к. использование этих функций будет рассмотрена в последующих статьях, я не буду продолжать рассмотрение настроек, а перейду к следующему подпункту Добавление пользовательских кнопок.
jqGrid позволяет добавлять на панель pager пользовательские кнопки и назначать на них функции, ниже приведен листинг ДЕМО2.6

$(function(){
var pager = $('#tablePager');
$('#table').jqGrid({
              url:'p2e1.php',
              datatype: 'json',
              mtype: 'GET',
              colNames:['Код страны','Код региона', 'Город','Долгота','Широта','nbip'],
              colModel :[
                {name:'country_code', index:'country_code', width:80},
                {name:'region_code', index:'region_code', width:80},
                {name:'city', index:'city', width:90},
                {name:'latitude', index:'latitude', width:60},
                {name:'longitude', index:'longitude', width:60},
                {name:'nbip', index:'nbip', width:30}],
              pager: pager,
              sortname: 'city',
              sortorder: 'asc',
              caption: 'Pager в качестве панели инструментов',
              autowidth: true
     }).jqGrid('navGrid', pager,{add: false, del: false, edit: false, search: false});
$('#table').jqGrid('navSeparatorAdd','#tablePager');
     $('#table').jqGrid('navButtonAdd','#tablePager',{
                                              caption: 'Закрутить ',
                                              title: 'Ключ рожковый, обыкновенный',
                                              buttonicon: 'ui-icon-wrench',
                                              onClickButton: function(){
                                                                 alert('Скрип, скрип, скрип!..');
                                                             },
                                              position:'last'
               }).jqGrid('navButtonAdd','#tablePager',{
                                              caption: 'Замкнуть ',
                                              title: 'Открытый замок',
                                              buttonicon: 'ui-icon-unlocked',
                                              onClickButton: lock,
                                              position:'last'
});
function lock(){
                  alert('Взяли и замкнули что-то...');
              }
});

В данном примере после стандартных кнопок, из которых я оставил только «Обновить», вставлен разделитель (separator) и две кнопки «Закрутить» и «Замкнуть», простите но оригинальнее я не смог ничего придумать. По нажанию на эту кнопку вызываются функции, которые показывают стандартный alert.
Разделитель добавляется методом navSeparatorAdd, первым параметром которого является строка-селектор панели-листалки (pager), а в качестве второго (не указан в листинге) объект с параметрами разделителя.

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

Параметры разделителя по-умолчанию:
{sepclass: ‘ui-separator’, sepcontent: »}
Где

• sepclass: – класс в CSS ui.jqgrid.css, который определяет стиль разделителя. Можно использовать если захотите изменить внешний вид разделителя.
• sepcontent: – контент, который может быть помещен в разделитель.

Кнопка вставляется с помощью метода navButtonAdd
{ caption:’NewButton’, buttonicon:’ui-icon-newwin’, onClickButton:null, position: ‘last’, title:’ ‘, cursor: ‘pointer’}
Где

• caption: – надпись на кнопке
• title: – атрибут кнопки, используется как подсказка
• buttonicon: – название класса иконки из jQuery UI CSS Framework
• onClickButton: – функция, которая будет выполнена при клике на кнопке
• position: (‘first’ или ‘last’) – добавить кнопку до или после стандартных кнопок
• cursor: – CSS свойство, определяющее вид курсора при наведении на элемент
• id: – с помощью этого свойства можно задать значение атрибуту id контейнеру(TD – обыкновенная ячейка таблицы) в котором находится кнопка.

Однако при всем своем удобстве, у данного подхода к созданию панели инструментов есть ряд недостатков, таких как то что панель находится в нижней части таблицы, мало места для каких-то дополнительных элементов, большого размера и т.п. Для этих целей разработчики добавили еще и возможность создания пользовательских панелей.
3) Пользовательские панели
Вот ДЕМО2.7 листинги которого приведены ниже.
Клиентская часть

$(function(){
       $('#table').jqGrid({
           sortable: true,
                  url:'p2e1.php?userdata=true',
                  datatype: 'json',
                  mtype: 'GET',
                  colNames:['Код страны','Код региона', 'Город','Долгота','Широта','nbip'],
                  colModel :[
                    {name:'country_code', index:'country_code', width:80},
                    {name:'region_code', index:'region_code', width:80},
                    {name:'city', index:'city', width:90},
                    {name:'latitude', index:'latitude', width:60},
                    {name:'longitude', index:'longitude', width:60, resizable: false},
                    {name:'nbip', index:'nbip', width:30}],
                  pager: $('#tablePager'),
          toolbar: [true,'both'],
                  sortname: 'city',
                  sortorder: 'asc',
                  caption: 'Пользовательские панели инструментов',
                  autowidth: true,
                  loadComplete: function() {
                                    var udata = $('#table').jqGrid('getUserData');
                                    $('#tb_table').css('text-align','right').html(udata.msg+' '+udata.sum_regions_numbers+' '+udata.button);
                                }
    });
$("#t_table").height(60); //Set height of toolbar
    $("#t_table").append('<input id="say_hello" type="button" value="Привет" style="height:60px; width:80px">');
    $("#say_hello").click(function(){
            alert("Привет! Спасибо что читаете linkexchanger.su!");
    });
    $('#show_sum').live('click',function(){
        var val = $(this).val();
        alert('Обратите внимание, с сервера мы получили кнопку с сууммой '+val+', а обработчик назначили уже на странице');
    });
   });

И серверная, практически полностью повторяющая пример 2.1

// Начало формирование массива
// для последующего преобразоования
// в JSON объект
$data['page']       = $page;
$data['total']      = $total_pages;
$data['records']    = $count;
// Дополнительная информация с сервера
if($_GET['userdata']){
  $data['userdata']['msg'] = '<span style="font-weight: normal; color: red;">Сумма всех чисел в столбце <em>"region_code"<em> равна</span> ';
  $data['userdata']['sum_regions_numbers'] = '<em>'. $row['sum'].'<em>';
  $data['userdata']['button'] = '<input id="show_sum" type="button" value="'.$row['sum'].'">';
}
// Строки данных для таблицы
$i = 0;
while($row = mysql_fetch_assoc($result)) {
    $data['rows'][$i]['id'] = $row['id'];
    $data['rows'][$i]['cell'][] = $row['country_code'];
    $data['rows'][$i]['cell'][] = $row['region_code'];
    $data['rows'][$i]['cell'][] = $row['city'];
    $data['rows'][$i]['cell'][] = $row['latitude'];
    $data['rows'][$i]['cell'][] = $row['longitude'];
    $data['rows'][$i]['cell'][] = $row['nbip'];
    $i++;
}
// Перед выводом не забывайте выставить header
// с типом контента и кодировкой
header("Content-type: text/script;charset=utf-8");
echo json_encode($data);

Ну а теперь по традиции давайте разберем пример подробнее
jqGrig позволяет создавать две независимые панели инструментов. Для этого стоит свойству toolbar: присвоить массив [true,'both'], элементы которго в данном случае означают, что нужно создать обе(верхнюю и нижнюю) панели инструментов. Вместо ‘both’ также можно указать ‘top’ или ‘bottom’ для верхней и нижней панелей соответственно.
Теперь давайте рассмотрим первый вариант манипуляции с элементами на панелях, начнем с верхней панели. При инициализации плагина с определенным свойством toolbar: jqGrid автоматически выставит атрибут id верхней панели как id=»t_»(«t_table» в нашем случае), а нижнюю id=»tb_» («tb_table» в нашем случае). С помощью этих идентификаторов можно отыскать «тулбары» в DOM и выполнить например такие манипуляции

$("#t_table").height(60);
$("#t_table").append('<input id="say_hello" type="button" value="Привет" style="height:60px; width:80px">');
...
$("#say_hello").click(function(){
            alert("Привет! Спасибо что читаете linkexchanger.su!");
});

Первая строка сделает высоту верхней панели равной 60px, а вторая поместит на нее кнопку, код которой вы видите. После этого определяется функция-обработчик которая выполнится при щелчке по добавленной кнопке. Думаю такая методика использования не вызовет затруднений.
А вот второй, альтернативный вариант манипуляций с элементами на панелях, иллюстрируется на примере нижней панели. Это следующие строки кода

...
loadComplete: function() {
                                    var udata = $('#table').jqGrid('getUserData');
                                    $('#tb_table').css('text-align','right').html(udata.msg+' '+udata.sum_regions_numbers+' '+udata.button);
                                }
...
 $('#show_sum').live('click',function(){
        var val = $(this).val();
        alert('Обратите внимание, с сервера мы получили кнопку с суммой '+val+', а обработчик назначили уже на странице');
    });
...

Работает это следующим образом. После окончания загрузки данных возникает событие loadComplete: и вызывается функция. Эта функция (var udata = $(‘#table’).jqGrid(‘getUserData’); ) получает пользовательские данные из ответа сервера, об этом немного ниже, в виде JSON объекта в данном случае и выводит эти данные на нижнюю панель ($(‘#tb_table’)) в виде HTML выравнивая по правому краю (css(‘text-align’,'right’)). После чего выполняется объявление обработчика используя метод live.
Ну откуда же берутся эти пользовательские данные? С сервера как и все остальные! Вот например как сделал я

$userdata = $_GET['userdata'];
// Выполним запрос, который вернет суммарное кол-во записей в таблице
$result = mysql_query("SELECT COUNT(*)AS count, SUM(region_code) AS sum FROM cities");
if($userdata){
            $data['userdata']['msg'] = '<span style="font-weight: normal; color: red;">Сумма всех чисел в столбце <em>"region_code"<em> равна</span> ';
            $data['userdata']['sum_regions_numbers'] = '<em>'. $row['sum'].'<em>';
            $data['userdata']['button'] = '<input id="show_sum" type="button" value="'.$row['sum'].'">';
        }
// Строки данных для таблицы
        $i = 0;
        while($row = mysql_fetch_assoc($result)) {
            $data['rows'][$i]['id'] = $row[id];
            $data['rows'][$i]['cell'][] = $row[country_code];
            }
            echo json_encode($data);

Итак я запрашиваю серверный скрипт (url:’p2e1.php?userdata=true’), который выполняет запрос. После выполнения запроса, вместе с суммарным кол-вом записей получаем сумму всех значений полей region_code. Далее полученные данные помещаем в массив $data и кодируем в формат JSON.
IV. Управление столбцами данных
1) Изменение размера и положения столбцов
На самом деле никаких манипуляций для реализации этих возможностей таблицы делать не придется. Возможно вы заметили что в листинге предыдущего примера есть не рассмотренное свойство sortable: true и если схватить за заголовок любого из столбцов, то можно drag’n'drop’ом переместить его на место другого столбца. Определение этого свойства как true как раз и включает возможность перетаскивать столбцы. Но перед использованием этой опции плагина убедитесь:

• Что вы послушали мой совет в первой части и при скачивании архива с прагином в Download Builder вы выставили все галки в том числе jQuiery UI addons.
• Что вы подключили к странице jQueryUI,а именно виджет sortable.

При этом можно изменять ширину любых столбцов, в colModel-опциях которых не определено свойство resizable: false как столбец «Широта» в ДЕМО2.7, при условии что вы скачали jqGrid с опцией jQuiery UI addons.
2) Скрываем не нужные или отображаем нужные столбцы данных
Начнем обсуждение с ДЕМО2.8.

<link rel="stylesheet" type="text/css" media="screen" href="../../../_library/css/ui.multiselect.css" />
<script type="text/javascript" src="../../../_library/js/ui.multiselect.js"></script>
    <script type="text/javascript">
$(function(){
      var table = $('#table');
      table.jqGrid({
                  url:'p2e1.php',
                  datatype: 'json',
                  mtype: 'GET',
                  colNames:['Код страны','Код региона', 'Город','Долгота','Широта','nbip'],
                  colModel :[
                    {name:'country_code', index:'country_code', width:80, hidden: true},
                    {name:'region_code', index:'region_code', width:80, hidden: true},
                    {name:'city', index:'city', width:90},
                    {name:'latitude', index:'latitude', width:60},
                    {name:'longitude', index:'longitude', width:60},
                    {name:'nbip', index:'nbip', width:30, hidden: true}],
                  pager: $('#tablePager'),
                  toolbar: [true,"top"],
                  sortname: 'city',
                  sortorder: 'asc',
                  caption: 'Управление видимостью столбцов',
                  width: 400
        });

    var tBar = $("#t_table");
    tBar.append('<input id="c_chooser1" type="button" value="Базовый мастер">');
    tBar.append('<input id="c_chooser2" type="button" value="Сторонний мастер">');

    $("#c_chooser1").click(function(){
        table.jqGrid('setColumns',{
                                   colnameview:false,
                                   updateAfterCheck: true
                                  });
    });

    $("#c_chooser2").click(function(){
        table.jqGrid('columnChooser');
    });

});
</script>

Первое что бросается в глаза так это то, что не все столбцы показаны, хотя все объявлены. Эта опция будет полезна если у вас имеется очень много колонок, при этом обычно не все они нужны, но могут понадобится при более детальном рассмотрении каких-то строк. Сделать столбец не видимым при инициализации таблицы можно указав в colModel колонки свойство hidden: true. Но спрятанные колонки нужно как-то показывать при необходимости. Для таких целей можно воспользоваться 2 способами.

• Использовать метод setColumns, я предпочитаю этот метод ввиду его простоты, не часто нужно управлять столбцами, но если нужно то этот метод самое оно.
• Использовать метод-плагин columnChooser – этот подходя для истинных гурманов эстетов, очень эффектен если подключить соответствующие файлы. Для начала скачиваем плагин UI.MultiSelect и подключаем файлы ui.multiselect.css и ui.multiselect.js как в демо. И снова напомню что для этого метода jqGrid должна быть с модулями jQuiery UI addons.

Послесловие
В данной статье мы рассмотрели очень много вспомогательных возможностей плагина-таблицы jqGrid, при этом мы пересекли черту «начального использования» таблицы, от всей души поздравляю! Мы хорошо потрудились и дальше нас ждет еще больше интересного, а именно:

• jqGrid и «деревья»
  • jqGrid и MySQL деревья
  • jqGrid и статические деревья
• Связывание данных в jqGrid
  • Простая подтаблица (subgrid)
  • jqGrid как subgrid
  • Ведущая и ведомая jqGrid
  • Перемещение строк данных между таблицами
• …

Предисловие

Весь цикл статей направлен в первую очередь на начинающих разработчиков, которые постигают все прелести jQuery. Которые имеют базовые знания и понимания работы с этой библиотекой. Для разработчиков, которые впервые слышат слово jQuery я бы посоветовал цикл видео уроков Евгений Попова (Уроки 1-4 и Уроки 5-6) или книгу Геннадия Самкова jQuery. Сборник рецептов.

Во всех статьях, я постараюсь максимально подробно охватить материал, чтобы исключить появление примитивных вопросов. Также хочется сразу предупредить, я не буду учить вас программированию на PHP, этот материал как и весь ресурс посвящен в первую очередь jQuery и технологиям AJAX. Поэтому пожалйста не задавайте вопросы «как мне защититься от хакеров?», «как мне сделать авторизацию?» и т.п., на эту тему вы всегда сможете найти массу материала на дружественных сайтах.

Введение

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

В данном цикле статей я постараюсь познакомить вас и вместе с вами сам постигнуть все прелести замечательнейшего плагина для jQuery – jqGrid. Чтобы дать вам почувствовать этого «монстра», да-да именно «монстра», я приведу ссылку на демо-галерею сайта разработчика. Рекомендую посмотреть все примеры работы с таблицей.

Лично я, когда увидел «это» был шокирован и решил разобрать этот плагин. Но сразу же был разочарован, он не заработал! А перепроверив все еще раз я понял, что проблема не в плагине, а во мне. Вот еще одна причина, по которой я сел за этот цикл. Далее меня настигло еще одно разочарование, скрипт вызывал ошибку в IE и отказывался работать. Это было связанно с багом в коде плагина, которую устранили к версии 3.6.1 (На момент написания статьи, последняя версия была 3.6.2). Таким образом я «вляпался» в этот плагин. Уверен вы устали от моей пустой болтовни и следует перейти к делу.

I. Подготовка к установке

Перед началом любых работ нам необходимо заготовить «инструменты» и «материалы».
Инструменты (которые использую я)

• Apache/2.2.9
• PHP/5.2.6
• MySQL-server/5.0.51a-24

Вобщем все стандартные пакеты в репозитории Debian. Если вы предпочитаете Windows, то я могу посоветовать вам Denwer
Материалы

• jQuery – скачать с официального сайта или подключить по ссылке Google http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js
• jQueryUI CSS Framework (проще говоря тема для jQueryUI) – выбирайте и скачивате на официальном сайте
• jqGrid Plugin – скачивайте с официального сайта. ВАЖНО! Выберите все модули, т.к. мы пока разбираемся и будем тестировать все возможности jqGrid! В дальнейшей работе, вы можете выбирать только те модули которые вам необходимы.

II. Документ, в котором будет использоваться jqGrid
Аннотация:

• Весь материал, который начинается с этого момента я буду осваивать заново, поэтому все ответы на вопросы я буду искать вмести с вами.
• Мы будем работать с кириллицей в кодировке UTF-8. Но я дам некоторые рекомендации при использовании плагина с кодировкой Windows-1251(CP1251) .

1) Html – разметка
Итак создадим документ с разметкой следующего вида:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Осваиваем jqGrid с Linkexchanger</title></head>
<body>
<table id="le_table"></table>
<div id="le_tablePager"></div>
</body>
</html>

Как видите самый незаурядный код чистой страницы, где <table id=»le_table»></table> это и есть таблица которую вы видели на демо, а <div id=»le_tablePager»></div> – это элемент таблицы, «статус бар» (status bar), о нем поговорим позже. Здесь следует сказать, что в качестве селектора таблицы лучше использовать именно атрибут ID, почему? Ответ на этот вопрос будет дан по мере изучения плагина.

2) Html + CSS + JS
Далее переходим к подключаем необходимые стили и скрипты. Для начала создадим на сервере, в рабочем каталоге следующую структуру.

• css/ – в этом каталоге будут все *.css файлы и прочие файлы относящиеся к визуальному оформлению страницы.
• js/ – в этом каталоге будут все *.js файлы

Теперь по каждому каталогу подробнее:

• css – в него следует положить
  «jqueryUI Theme» – каталог с темой оформления jQueryUI (например flick)
  ui.jqgrid.css – дополнительные стили jqGrid (находятся в скачанном в п.I архиве css/ui.jqgrid.css)
• js – в него следует положить
  jQuery - библиотеку
  Каталог i18n – это каталог с локализациями плагина, проще говоря с «языками» (находятся в скачанном в п.I архиве js/i18n) . На этом этапе я остановлюсь подробнее, потому что тут дам обещанный совет по использованию плагина с кирилице кодировки CP1251. Если вы планируете использовать плагин в таких условиях, то вам необходимо в каталоге i18n найти и переконвертировать кодировку файла grid.locale-ru.js из UTF-8 в CP1251. Рассказ о том как это сделать выходит за рамки данной статьи. Также вы можете не загружать все языки, а выбрать только тот, который вам необходим.
  jquery.jqGrid.min.js – собственно сам плагин.

Теперь следует перепроверить всю структуру каталога еще раз. Именно на этом этапе я допустил первую ошибку, упоминавшуюся во введении.

• /css/
  • flick/
    • images/
    • …
    • jquery-ui-1.7.2.custom.css
  • ui.jqgrid.css
• /js/
  • i18n/
    • grid.locale-ru.js
    • …
  • jquery-1.4.min.js
  • jquery.jqGrid.min.js

Далее необходимо подключить всю эту кухню

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Осваиваем jqGrid с Linkexchanger</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/flick/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" mce_href="css/ui.jqgrid.css" />
<style>html, body {
    margin: 0;
    padding: 0;
    font-size: 80%;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/i18n/grid.locale-ru.js"></script>
<script type="text/javascript" src="js/jquery.jqgrid.min.js"></script>
</head>
<body>
<table id="le_table"></table>
<div id="le_tablePager"></div>
</body>
</html>

Как видите в разметке есть еще дополнительный стиль. Этот стиль задает базовые параметры для отступов и самое главное размер шрифта! Если этого не сделать, то при использовании jQueryUI CSS Framework размер шрифта будет «не маленьким» и при этом различным в различных браузерах.

3) MySQL
Как бы мы не хотели, но в данной статье мы никак не сможем обойтись без базы данных. Поэтому я подготовил для вас дамп. Вы можете скачать его по этой ссылке или с моего домашнего сервера и экспортировать в любую БД (MySQL) например используя phpMyAdmin, у данного дампа есть один ньюанс. Аименно у некоторых названий городов «искаверкана» кодировка, т.е. проблема в дампе, но никак не в плагине!
В дампе сохранены 10тыс городов с кодами страны, региона, названием на англ., долготой, широтой, и nbit. Фактически это кусок одной таблицы БД распределения IP адресов в интернете. В принципе нам абсолютно не важно, что это будет за БД и для опытов подойдет и такая.

4) PHP
На данном этапе следует создать PHP скрипт, который будет возвращать таблице, запрашиваемую ею информацию. Вот пример такого скрипта для наших нужд

<?php
// Подключение и выбор БД
$db = mysql_connect('database_host', 'database_user',
'database_password');
mysql_select_db('database_name');
# ВНИМАНИЕ!!!
# Данный код не имеет проверок запрашиваемых данных
# что может стать причиной взлома!
# Обязательно проверяйте все данные
# поступающие от клиента

// Номер запрашиваемой страницы
$page = $_GET['page'];

// Количество запрашиваемых записей
$limit = $_GET['rows'];

// Номер элемента массива по которому
// следует производить сортировку
// Проще говоря поле, по которому
// следует производить сортировку 
$sidx = $_GET['sidx'];                 

// Направление сортировки
$sord = $_GET['sord'];                         

// Если не указано поле сортировки,
// то производить сортировку по первому полю
if(!$sidx) $sidx =1;                 

// Выполним запрос, который
// вернет суммарное кол-во записей в таблице
$result = mysql_query("SELECT COUNT(*) AS count FROM cities");
$row = mysql_fetch_array($result,MYSQL_ASSOC);
 // Теперь эта переменная хранит кол-во записей в таблице
$count = $row['count'];                   

// Рассчитаем сколько всего страниц займут данные в БД
if( $count > 0 && $limit > 0) {
    $total_pages = ceil($count/$limit);
} else {
    $total_pages = 0;
}                   

// Если по каким-то причинам клиент запросил
if ($page > $total_pages) $page=$total_pages;                   

// Рассчитываем стартовое значение для LIMIT запроса
$start = $limit*$page - $limit;                   

// Зашита от отрицательного значения
if($start < 0) $start = 0;                   

// Запрос выборки данных
$query = "SELECT id, country_code, region_code, city, latitude,
longitude, nbip FROM cities
ORDER BY ".$sidx." ".$sord." LIMIT ".$start.", ".$limit;
$result = mysql_query($query);                   

// Начало xml разметки
$s = "<?xml version='1.0' encoding='utf-8'?>";
$s .=  "<rows>";
$s .= "<page>".$page."</page>";
$s .= "<total>".$total_pages."</total>";
$s .= "<records>".$count."</records>";                   

// Строки данных для таблицы
// Не забудьте обернуть
//текстовые данные в <![CDATA[]]>                   

while($row = mysql_fetch_assoc($result)) {
  $s .= "<row id='". $row[id]."'>";
  $s .= "<cell><![CDATA[". $row[country_code]."]]></cell>";
  $s .= "<cell>". $row[region_code]."</cell>";
  $s .= "<cell><![CDATA[". $row[city]."]]></cell>";
  $s .= "<cell>". $row[latitude]."</cell>";
  $s .= "<cell>". $row[longitude]."</cell>";
  $s .= "<cell>". $row[nbip]."</cell>";
  $s .= "</row>";
}
$s .= "</rows>";                   

// Перед выводом не забывайте выставить header
// с типом контента и кодировкой
header("Content-type: text/xml;charset=utf-8");                 

echo $s;
?>

5) Инициализация плагина
Последний этап подготовительных работ. Здесь мы должны инициализировать плагин JqGrid. Делается это вызовом метода jqGrid(), который в качестве параметра, принимает объект со свойствами таблицы.
Теперь давайте посмотрим на примере разметки, приведенной выше.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Осваиваем jqGrid с Linkexchanger</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/flick/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" mce_href="css/ui.jqgrid.css" />
<style>html, body {
    margin: 0;
    padding: 0;
    font-size: 80%;
}
</style>
<script type="text/javascript" src="js/jquery-1.4.min.js"></script>
<script type="text/javascript" src="js/i18n/grid.locale-ru.js"></script>
<script type="text/javascript" src="js/jquery.jqgrid.min.js"></script>
<script type="text/javascript">
$(function(){           

$('#le_table').jqGrid({
   url:'p1e1.php',
   datatype: 'xml',
   mtype: 'GET',
   colNames:['Код страны','Код региона', 'Город','Долгота','Широта','nbip'],
   colModel :[
     {name:'country_code', index:'country_code', width:80},
     {name:'region_code', index:'region_code', width:80},
     {name:'city', index:'city', width:90},
     {name:'latitude', index:'latitude', width:60},
     {name:'longitude', index:'longitude', width:60},
     {name:'nbip', index:'nbip', width:30}],
  pager: $('#le_tablePager'),
  rowNum:10,
  rowList:[10,20,30,100],
  sortname: 'city',
  sortorder: 'asc'
});           

});
</script>
</head>
<body>
<table id="le_table></table>
<div id="le_tablePager"></div>
</body>
</html>

Cейчас можно взглянуть результаты наших трудов. Вот ссылка на просмотр ДЕМО1 и на архив с ДЕМО1 (тот же архив на зеркале)

III. Разбор параметров
Остался последний пункт сегодняшней статьи в котором я дам пояснения по каждому из используемых в данном примере свойств плагина.

• url – этот параметр указывает URL на скрипт
• datatype – тип возвращаемых сервером данных. В данном примере, плагин ожидает данные с сервера в виде XML. Забегая наперед скажу что в следующей статье мы рассмотрим ответ сервера в виде JSON и Offline варианты использования плагина.
• mtype – определяет каким методом будут переданы данные серверу
• colNames – массив с заголовками столбцов таблицы
• colModel – параметр-массив, каждый элемент которого является объектом свойств столбца с данными
  • name – «имя колонки», используется внутренними механизмами jqGrid
  • index – «имя колонки», передается серверу при запросах данных
  • width – ширина столбца в пикселах
• pager – определяет элемент, который будет преобразован в «панель-листалку». Может быть как строкой (‘#le_tablePager’) так и объектом jQuery ($(‘#le_tablePager’)). При этом сами разработчики рекомендуют присваивать этому параметру как раз объект jQuery.
• rowNum – определяет количество записей запрашиваемых у сервера и отображаемых за «один раз» (я написал именно так, потому что jqGrid может динамически подгружать строки с данными, что будет рассмотрено в последующих статьях) по умолчанию.
• rowList - параметр-массив. На основе этого параметра строится выпадающий список, позволяющий изменять кол-во записей выводимых за «один раз»
• sortname – определяет index(столбец) по которому будут отсортированы записи
• sortorder – определяет направление сортировки. asc – по возрастанию, desc – по убыванию.

Говоря о параметрах (options) следует сказать, что это лишь крохотная их часть. Эти параметры обеспечивают только базовую функциональность таблице. Множество других параметров мы с вами рассмотрим в последующих статьях, а пока поэкспериментируйте с теми что использованы в этом примере.

IV. Содержание следующей статьи

• Другие способы загрузки данных
  • В виде JSON объекта
  • В виде массива
  • Конвертирование простой таблицы в jqGrid
• Форматирование данных
  • Встроенные функции форматирования
  • Пользовательские функции форматирования
• Дополнительные панели и панели инструментов
  • Панель-листалка
  • Панели инструментов
  • Пользовательская панель
  • Управление столбцами данных

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

В ходе работы мы поняли принцип работы плагина. Фактически сам плагин это интерфейс пользователя, который отправляет AJAX запросы серверу и получает от него ответ. Таблица отправляет все необходимые параметры, для выборки данных на стороне сервера, в виде GET запроса, а сервер возвращает в виде набора строк в XML-разметке.

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

Это мой уважаемый коллега, человек с большим опытом разработки сложных приложений, в прошлом один из разработчиков javascript-фреймворка Dojo Toolkit.

» Профессиональное javascript-программирование
» Сложный AJAX и COMET: тонкости Web 2.0
» Мастер-класс по клиентской оптимизации
» Секреты jQuery

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

И еще, очень интересно! Принять участие в мастер-классе «Секреты jQuery» можно будет в режиме on-line.

Исходное объявление на javascript.ru »

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

Теперь подробнее о содержании мастер-классов.

«Профессиональное javascript-программирование»

- Javascript, browser tips & tricks.
- Фишки DOM, функции/замыкания, ООП – понятно и в деталях.
- Малоизвестные возможности javascript и браузеров.
- Javascript-фреймворки. Сравнение современных возможностей. jQuery в деталях.
- Полезный инструментарий, который сделает вашу разработку быстрее и качественнее. Гораздо больше, чем Firebug.
- Обмен информацией между окнами с разных доменов
- HTML5: что уже есть, а что нас ждет уже скоро.

Этот мастер класс – отнюдь не об основах javascript, здесь присутствует много информации для профессионалов.
Москва: суббота, 20 февраля, 11.00
Санкт-Петербург: суббота, 27 февраля, 11.00
Продолжительность – 4 часа.

«Клиентская оптимизация»

- Способы и принципы сжатия javascript, что делать, чтобы код сжимался эффективнее.
- Идеальное кеширование. Скрипты и серверная часть.
- Эффективная оптимизация javascript. Подходы, цифры, рецепты.
- Основные приемы оптимизации jQuery.
- Ускорение загрузки страницы через HTTP pipelining.
- Оптимизация с Google Gears и HTML5.
- Google Closure Compiler в деталях
- Удобные инструменты для оптимизации и профайлинга.

Про то, как ускорить страницу, почти ничего не делая, и как серьезно ускорить страницу и сайт, если что-то сделать.
Москва: воскресенье, 21 февраля, 11.00
Санкт-Петербург: воскресенье, 28 февраля, 11.00
Продолжительность – 4 часа.

«Сложный AJAX и COMET: тонкости Web 2.0″

- Асинхронная подгрузка событий с сервера (COMET) – различные варианты, сравнение и примеры реализации.
- Кнопки back-forward, закладки и история с AJAX.
- Cпособы написания чата/оповещающего демона, аспекты производительности и решения.
- Кросс-доменные ограничения, способы их преодоления.
- Асинхронный try..catch. Удобная работа с асинхронностью.
- Инструменты для разработки и отладки сложных AJAX-приложений.
- Специализированный COMET-сервер, установка, расширение, интеграция. Поднимем COMET прямо на мастер-классе.

Мастер-класс сделает современные подходы простыми и понятными для вас, позволит улучшить те приложения, которые есть сейчас, и перейти к качественно новой разработке в будущем.
Москва: суббота, 20 февраля, 16.00
Санкт-Петербург: суббота, 27 февраля, 16.00
Продолжительность – 4 часа.

«Секреты jQuery»

1. Как работает поисковой движок jQuery $(‘…’).
- Внутреннее устройство. Алгоритм поиска. No magic.
- Почему некоторые очевидные запросы тормозят, и как их ускорять.
- Расширение поискового движка, добавление своих фильтров.
2. Система событий в jQuery.
- Внутреннее устройство.
- Слабо- и недокументированные фичи, отсутствующие в обычных javascript-событиях.
- Влияние системы событий на быстродействие и DOM-манипуляции. Что тормозит и почему.
- Обход утечек памяти.
3. Фишки AJAX.
- Особенные фичи AJAX в jQuery, которых нет в других библиотеках и полезные приемы работы с ними.
4. $.изнутри.
- Внутреннее устройство функции $. Что она делает быстро, а что – нет.
- Создание плагинов. Внутренний механизм работы $.fn.plugin.
5. jQuery UI.
- Обзор и устройство jQuery UI.
- Написание собственных виджетов. Объявление, вызов методов и т.п. Примеры.
- Приемы для более удобной работы с виджетами.
6. Профайлинг jQuery-приложения
- Как из каши $(вызовов) получить читаемый профиль.
7. Дополнительно.
- Общий обзор библиотеки jQuery, ее сильных и слабых мест. Сравнение с другими фреймворками. Новое в jQuery 1.4.

Мастер-класс посвящен слабо документированным особенностям и устройству фреймворка jQuery. Это не вводный курс. Знакомство и опыт работы с фреймворком jQuery – обязательны.
Москва: воскресенье, 21 февраля, 16.00
Санкт-Петербург: воскресенье, 28 февраля, 16.00
Продолжительность – 3 часа.
On-line: суббота, 27 февраля, 20.00-21.50 и воскресенье, 28 февраля, 20.00-21.50

Дополнительная информация, запись на мастер-классы »

• Геннадий Самков
• jQuery. Сборник рецептов (+ CD-ROM)
• Издательство: БХВ-Петербург, 2010 г.
• Мягкая обложка, 410 стр.
• ISBN 978-5-9775-0495-9
• Тираж: 1500 экз.
• Формат: 70×100/16

Аннотация:
Книга является сборником решений наиболее часто встречающихся задач при веб-программировании пользовательских интерфейсов с использованием библиотеки jQuery. Рассмотрены практически все методы и вспомогательные функции jQuery, в том числе обеспечивающие взаимодействие jQuery и AJAX. Подробно рассказано о надстройке UI jQuery и приведены описания всех настроек для виджетов, входящих в ее состав, что позволяет использовать книгу в качестве справочника. Приведено большое количество примеров использования наиболее популярных плагинов для jQuery – создание графиков и диаграмм, фотогалерей, навигационных меню, всплывающих подсказок, работа с веб-формами, таймерами и cookies, обработка табличных данных. Компакт-диск содержит примеры, разобранные в книге, файлы библиотеки jQuery версий 1.2.6 и 1.3.2, файлы надстройки UI jQuery, а также файлы рассмотренных в книге расширений сторонних разработчиков.

От себя могу добавить, что книга написана в таком же духе, как и предыдущая: «AJAX. Программирование для Интернета«, т.е. примеры, примеры и еще раз примеры плюс подробные разъяснения….

Полное содержание: