jQuery и другое... » php

Yii framework. Часть 1 : Введение

M4V23 — Sat, 06 Mar 2010 04:44:29 +0000

Предисловие

В этом цикле статей я хочу рассказать о таком замечательном фреймворке, как yii. Предполагается, что у читателя есть некоторый навык работы с php5, особенно с его объектно-ориентированной частью. Я буду стараться охватить как можно больше разных аспектов создания веб-приложений на базе yii, добавляя от себя разные тонкости и хитрости; но не ждите от меня копипаста документации или api. И то и другое Вы можете найти на официальном сайте.

Введение

Что такое Yii?

Yii это свободный(распространяется под new BSD licence) высокопроизводительный объектно-ориентированный расширяемый php-фрэймворк для разработки веб-приложений.

Зачем он нужен?

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

Основные особенности :

MVC-архитектура
Работа с базами данных
Поддержка кэширования на разных уровнях
Большое количество встроенных компонентов
Возможность простого подключения сторонних библиотек
Интеграция с jQuery

Подготовка:

Системные требования:

Веб-сервер(рекомендуется Apache)
PHP версии не ниже 5.1.0
PDO-совместимая СУБД (MySql, PostgreSQL, SqLite, Microsoft SQL, Oracle8) и соответствующее php-расширение для её поддержки.

Рекомендуемые расширения для php:

gd – для работы с графикой.
mcrypt – для функций кодирования.
MemCache или APC – для кэширования, ускорения работы.

Такой нехитрый набор в наше время можно найти почти на любом хостинге.

Для домашнего тестирования на linux можно установить пакеты из стандартных репозитариев.Если же Вы предпочитаете на windows, могу порекомендовать в качестве готового решения denwer.

Для пользователей денвера:

(В данном случае, Z: это диск, монтируемый денвером)
1. Для начала прописываем в переменные окружения путь Z:\usr\local\php5\
2. Открываем /usr/local/php5/php.ini, ищем строчку extension_dir = «/usr/local/php5/ext», заменяем на extension_dir = «Z:\usr\local\php5\ext»
3. session.save_path = «/tmp» на session.save_path = «Z:\tmp»

Установка:

На момент написания статьи, последняя стабильная версия была 1.1.0. Скачать её можно в виде архива по адресу http://yiiframework.com/download
Вся установка сводится к распаковке содержимого архива.Для начала рекомендую распаковать всё в директорию доступную из веб и открыть папку requirments в браузере, чтобы убедиться в наличии всех необходимых компонентов.

Для создания приложения необходимо использовать коммандную строку(ssh при удалённом доступе). Нужно запустить файл yiic.bat(для windows) или yiic(для linux и других unix-based систем) с параметрами webapp /full/path/to/new/wbebapp/.
Например :

$ /var/www/framework/yiic webapp /var/www/testing

Убедитесь, что у вас есть права записи в директорию, где Вы хотите создать веб-приложение и она доступна из web. Можно зайти в нее через браузер и увидеть возможности, предоставлямые yii «из коробки».

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

Модель – Представление – Контроллер(MVC) – это модульная архитектура, применяющийся в веб-программировании(в частности и в yii). Она направлена на разделение логики(контроллер), управления данными(модель) и пользовательского интерфейса(представление) с целью возможности изменять одни части не внося изменения в другие.

Основные части, из которых состоит yii:

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

Входной файл
Входной файл(обычно index.php) это единственный скрипт, с которым контактирует пользователю. Вобщем-то, всё что он делает, это читает конфигурацию и создаёт экземпляр класса CWebApplication.
Приложение(application)
Приложение(экземпляр класса CWebApplication) обрабатывает запрос пользователя, выполняет роутинг и передаёт его на исполнение соответствующему контроллеру.
Контроллер(controller)
Контроллер(экзэмпляр класса CController или производного от него) определяет основную логику приложения, взаимодействует с моделями и отображениями. Контроллеры обычно находятся в папке /protected/controllers. По соглашению, класс контроллера и имя файла с ним : NameController.php
Действие(action)
Действие это тип действия, выполняемого пользователем, например просмотр статьи в блоге или отправка комментария. Обычно является методом контроллера(вида actionName), но может быть вынесенно в отдельный класс.
Модель (model)
Модель представляет собой сущность данных. Например таблица в базе данных(CActiveRecord) или форма на веб-странице(CForm). Она занимается непосредственной обработкой данных: созданием, получением, изменением. Также представляет интерфейс доступа к валидаторам(validator), проверяющим корректность введённых пользователем данных. Модели находятся в папке /protected/models. Модель обычно имеет имя, соответствующее таблице в бд, которую она представляет.
Представление(view)
Представление генерирует готовые части страницы, отдаваемой пользователю.Оно не использует логики, кроме как условий и циклов. Представления для каждого контроллера обычно раздельны и хранятся в /protected/views/controllername/.
Макет (layout)
Макет это специальное представление для вставки других представлений. Обычно он содержит части пользовательского интерфейса, используемого другими представлениями. Например, основной макет может содержать в себе шапку и подвал страницы, места для подключения других представлений и виджетов. Макеты храняться в /protected/views/layouts. По умолчанию используется макет main.php.
Виджет(widget)
Виджет это компонент для генерации самодостаточного элемента пользовательского интерфейса(например, верхнее меню в тестовом приложении). В zii (библиотеке расширений, поставляемых вместе с yii) имеется большое количество готовых виджетов.
Компонент(component)
Представляет сущность какого-либо аспекта веб-приложения. Например, авторизация пользователей. В yii много готовых компонентов, которые могут использоваться как в готовом виде, так и расширяться веб-разработчиками.
Модуль(module)
Модуль, это самодостаточная единица, состоящая из контроллеров, моделей, отображений, и.т.д. Модули используются для разделения сайта на логические части, например форум и блог.

Заключение

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

И на последок хочу дать несколько полезных ссылок:

Оффициальный сайт (en)

Русскоязычное сообщество (ru)

Блог, посвящённый yii (ru)

В следующей статье:

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

jqGrid Часть II: Базовые возможности

TRAHOMOTO — Sat, 27 Feb 2010 07:37:35 +0000

Итак в предыдущей статье (jqGrid Часть I:Знакомство) мы с вами подготовили платформу для опытов и выполнили «пробный запуск» плагина, с самыми «базовейшими» параметрами. Согласно которым таблица запрашивает данные с сервера в XML разметке, при этом у нас есть возможность сортировать данные в столбцах.

В данной статье мы продолжим эксперименты и прощупаем еще ряд замечательных возможностей 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.

Вот и листинг





Осваиваем jqGrid с Linkexchanger









// Запрос выборки данных
$query = 'SELECT id, country_code, region_code, city, latitude, longitude, nbip FROM cities LIMIT 30';
$result = mysql_query($query);
// Строим таблицу с данными
echo "";
echo "";
while($row = mysql_fetch_assoc($result)) {
    echo "td>'.$row['latitude'].'";
}
echo "ID Код страны Код региона Город Долгота Широта nbip
'.$row['id'].' '.$row['country_code'].' '.$row['region_code'].' '.$row['city'].' '.$row['longitude'].' '.$row['nbip'].'";
?>

ID	Код страны	Код региона	Город	Долгота	Широта	nbip
'.$row['id'].'	'.$row['country_code'].'	'.$row['region_code'].'	'.$row['city'].'	'.$row['longitude'].'	'.$row['nbip'].'

И ссылка на ДЕМО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('');
    $("#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'] = 'Сумма всех чисел в столбце "region_code" равна ';
  $data['userdata']['sum_regions_numbers'] = ''. $row['sum'].'';
  $data['userdata']['button'] = '';
}
// Строки данных для таблицы
$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(''); ... $("#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'] = 'Сумма всех чисел в столбце "region_code" равна '; $data['userdata']['sum_regions_numbers'] = ''. $row['sum'].''; $data['userdata']['button'] = ''; } // Строки данных для таблицы $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.

Первое что бросается в глаза так это то, что не все столбцы показаны, хотя все объявлены. Эта опция будет полезна если у вас имеется очень много колонок, при этом обычно не все они нужны, но могут понадобится при более детальном рассмотрении каких-то строк. Сделать столбец не видимым при инициализации таблицы можно указав в 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

Перемещение строк данных между таблицами

…

jqGrid Часть I: Знакомство

TRAHOMOTO — Mon, 25 Jan 2010 18:54:10 +0000

- Не робейте -, сказала Черная Королева, – это всего-навсего баранья нога, ни больше ни меньше.
Она вам понравится, уверяю вас.
Познакомьтесь. Алиса, это Баранья Нога.
Баранья Нога, это Алиса.

Предисловие

Весь цикл статей направлен в первую очередь на начинающих разработчиков, которые постигают все прелести 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 – разметка
Итак создадим документ с разметкой следующего вида:

Осваиваем jqGrid с Linkexchanger

Как видите самый незаурядный код чистой страницы, где
это и есть таблица которую вы видели на демо, а
– это элемент таблицы, «статус бар» (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

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

Осваиваем jqGrid с Linkexchanger

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

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

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

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 = ""; $s .= ""; $s .= "".$page.""; $s .= "".$total_pages.""; $s .= "".$count.""; // Строки данных для таблицы // Не забудьте обернуть //текстовые данные в while($row = mysql_fetch_assoc($result)) { $s .= ""; $s .= ""; $s .= "". $row[region_code].""; $s .= ""; $s .= "". $row[latitude].""; $s .= "". $row[longitude].""; $s .= "". $row[nbip].""; $s .= ""; } $s .= ""; // Перед выводом не забывайте выставить header // с типом контента и кодировкой header("Content-type: text/xml;charset=utf-8"); echo $s; ?>

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

Осваиваем jqGrid с Linkexchanger
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-разметке.
Пожалуйста оставляйте только конструктивные комментария и пожелания, а все вопросы задавайте на форуме!

AJAX. Программирование для Интернета

Gennady — Thu, 23 Apr 2009 05:03:33 +0000

Перед кем еще похвастаться, как не перед читателями своего блога? Тем более, что хвастаться я собираюсь по теме. Несколько дней назад в интернет-магазинах появилась в продаже книга «AJAX. Программирование для Интернета». Книга вышла в издательстве «БХВ-Петербург». Написана она преподавателем компьютерных дисциплин СПбГПУ – Санкт-Петербургского государственного политехнического университета Е. С. Бенкен и мной – автором этого блога.

Елена Бенкен, Геннадий Самков

AJAX. Программирование для Интернета (+ CD-ROM)

Издательство: БХВ-Петербург, 2009 г.

Твердый переплет, 464 стр.

ISBN 978-5-9775-0428-7

Тираж: 2000 экз.

Формат: 70×100/16

От издателя:
Описана технология AJAX и показаны возможности, которые открываются перед разработчиком с ее применением. Рассмотрена объектная модель документа: DOM в JavaSript и DOM-функции в PHP. Изложены основы языка XML и формат JSON. Показан принцип генерации асинхронных запросов к серверу средствами JavaScript. Сделан обзор основных JavaScript-библиотек: Prototype, Scriptaculous, ExtJS и jQuery. Подробно рассмотрены популярные и перспективные библиотеки ExtJS и jQuery: описана объектная модель языка JavaScript, на которой базируются эти библиотеки; применение AJAX-запросов; обработка событий и др. Приведено большое количество практических примеров.

Компакт-диск содержит дистрибутивы Web-сервера, модуля РНР и сервера MySQL, исходные коды описываемых библиотек, распространяемых на основании лицензии GPL, а также примеры из книги.

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

От себя:
А от себя хочу добавить, что библиотеке jQuery в книге уделено достаточно много внимания – этот раздел занимает 160 страниц. Естественно, что стояла задача показать именно то, как jQuery помогает при использовании AJAX, но для этого необходимо было объяснить базовые понятия самой библиотеки. Поэтому в раздел о jQuery были включена глава о функциях ядра библиотеки, очень подробно рассмотрены практически все селекторы jQuery, рассмотрена работа с событиями в jQuery и манипуляции элементами. И только после этого подробно рассказывается об использовании AJAX. Абсолютно все сопровождается примерами с довольно подробными пояснениями. В общем этим разделом можно пользоваться как мануалом по вышеупомянутым разделам библиотеки.
Жаль конечно, что не удалось рассказать о всей библиотеке – но наверное это тема для отдельной книги.

LiveStreet – бесплатный движок социальной сети.

Gennady — Tue, 11 Nov 2008 09:40:29 +0000

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

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

Желающие создать собственный сайт такого рода сталкиваются с одной проблемой – какой движок (скрипт) выбрать для построения сайта, т.к. программировать самому такую систему сложно и дорого. Еще один критерий – это бесплатность движка, обычно за хорошие движки их создатели просят денег.

В связи с этим хочу представить вам бесплатный движок социальной сети (или даже блоговой сети) от российский разработчиков – LiveStreet. Этот движок написан на PHP5 и использует в качестве хранения данных реляционную базу данных MySql. Внутренняя архитектура построена на принципе MVC (модель-вид-контроллер) с применением объектно-ориентированного программирования.

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

Но нас больше интересует, какие возможности предоставляет LiveStreet с точки зрения пользователей. Итак, возможности:

Полная поддержка кодировки UTF-8

Ведение персональных блогов

Возможность создания коллективных блогов

Система рейтингов блогов, топиков, комментариев, пользователей

Система голосования за блоги, топики, комментарии, пользователей

Возможность добавлять топики в избранное

Автоподстановка тегов

Коллективная внутренняя почта

Система контроля доступа (ACL) к разным возможностям сети (создание блога, возможность голосования и т.п.)

Возможность создать закрытый сайт

Система инвайтов

Топики-ссылки

Топики-опросы

Администрирование своих блогов

Назначение модераторов блогов

Настройки оповещений на e-mail

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

Что необходимо на хостинге для установки LiveStreet:

PHP5 и расширение mbstring для корректной работы с кодировкой UTF-8

Базы данных MySQL5 с типом таблиц InnoDB (хотя будет работать и на MyISAM)

Веб-сервер Apache с модулем mod_rewrite

Большинство хостингов удовлетворяют этим требованиям.

Процесс установки:

Скачать архив со страницы http://livestreet.ru/page/download/

Разархивировать в нужный каталог вашего сайта

Выполнить SQL дамп (sql.sql), предварительно создав базу данных

Настроить коннект к БД (config/config.db.php)

Настроить параметры движка (config/config.php)

Дать права 777 каталогам: logs, uploads, templates\compiled, templates\cache и каталогу для хранения временных файлов (/tmp/)

Готово! По умолчанию в системе создается администратор admin с паролем admin.

Ответы на большинство вопросов по использованию движка LiveStreet можно найт ина сайте проекта http://livestreet.ru.

jQuery Form – делаем ajax-форму

Gennady — Mon, 10 Mar 2008 21:05:15 +0000

Плагин jQuery Form позволяет не только сделать новые ajax-формы, но и довольно просто «проапгрейдить» уже существующие формы таким образом, чтобы их можно было использовать вместе с Ajax. Основные методы, ajaxForm и ajaxSubmit, собирают информацию из элементов формы, поддерживают многочисленные опции, использование которых даст полный контроль над передачей данных.

Итак, начнем. Нам потребуется подключить к странице два файла: библиотеку jQuery и файл jquery.form.js. Сделаем это в разделе HEAD.

Затем создадим самую простейшую форму, не содержащую какой-либо специальной разметки:

Имя: Комментарий:

и добавим еще немного javascript:

Вот так просто, но поспешу Вас разочаровать – то, что мы сделали, из серии «пыль в глаза». Объясню почему. Когда мы нажмем кнопку «Комментировать» значения полей name и comment будут переданы методом POST файлу comment.php. Если сервер вернет успешный ответ (т.е. всего лишь код 200) – пользователь увидит сообщение «Спасибо за комментарий!».

Эффектнее было бы не выводить сообщение в alert(), а вставить сообщение непосредственно в DOM.

Так что все, что мы здесь выиграли – избавились от перезагрузки страницы, в принципе уже неплохо, но хотелось бы большего…

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

Первое отличие состоит в том, что метод ajaxSubmit отправляет данные из формы, а метод ajaxForm – нет. Когда вызывается метод ajaxSubmit он упорядочивает данные формы в строку запроса и отправляет их серверу. Когда же вызывается метод ajaxForm – он только добавляет необходимое событие в форму таким образом, что можно определить, когда пользователь отправил данные.
Второе отличие: при использовании ajaxForm передаваемые значения будут включать пару имя/значение для самой кнопки (как в примере, или координаты клика мышью, если используется картинка).
Вывод: это не значит, что метод ajaxForm – плохой, а метод ajaxSubmit – хороший. Просто они разные. И какой именно метод использовать – надо решать в каждом конкретном случае.

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

// готовим объект var options = { target: "#divToUpdate", url: "form.php", success: function() { alert("Спасибо за комментарий!"); } }; // передаем опции в ajaxSubmit $("#myForm").ajaxSubmit(options);

target – идентифицирует тот элемент (или элементы) на странице, который должен быть обновлен при поступлении ответа от сервера. Значение может быть определено как объект или селектор jQuery или элемент DOM. Значение по умолчанию – null.
url – URL, куда должны быть переданы данные из формы. Значение по умолчанию – значение атрибута action формы.
type – метод, с помощью которого должны быть отправлены данные из формы (GET или POST). Значение по умолчанию – значение атрибута method формы. Если атрибут не определен, используется метод GET.
beforeSubmit – функция, которая будет вызвана до отправки данных из формы. Функция, вызываемая тут, может позволить выполнить какие-либо действия до отправки данных, например проверку введенных данных. И если она возвращает false – данные не будут отправлены на сервер. Принимает три аргумента: массив с данными формы, jQuery-объект формы, объект из опций определенных в ajaxForm/ajaxSubmit. Массив данных формы принимает такой вид:

[ { name: "username", value: "Vasya" }, { name: "password", value: "secret" } ]

Значение по умолчанию – null.
success – функция, которая будет вызвана после отправки данных серверу и при условии успешного ответа сервера. Полученные данные – или responseText или responseXML, в зависимости от значения опции dataType. Значение по умолчанию – null.
dataType – определяет ожидаемый тип данных в ответе сервера. Может принимать значения: null, «xml«, «script«, или «json«. Опция позволяет точно определить, как именно должен быть обработан ответ сервера.
- «xml»: if dataType == «xml» ответ сервера рассматривается как XML и в success (если опция определена) отправляется значение responseXML;
- «json»: if dataType == «json» ответ сервера будет выполнен и передан в success (если опция определена);
- «script»: if dataType == «script» ответ сервера будет выполнен в глобальном контексте;
Значение по умолчанию – null.
semantic – флаг, определяющий должны ли данные передаваться в строгом порядке следования (это происходит медленнее).

Упорядочивание данных формы происходит в порядке следования элементов, исключая элементы input, имеющие тип image.

Вы должны всего лишь установить эту опцию в true, если Ваш сервер требует строгого порядка следования И форма содержит элементы input типа image. Значение по умолчанию – false.
resetForm – флаг, определяющий должна ли форма быть сброшена если передача данных была успешной. Значение по умолчанию – null.
clearForm – флаг, определяющий должна ли форма быть очищена если передача данных была успешной. Значение по умолчанию – null.

Методы ajaxForm и ajaxSubmit не единственные. Давайте немного познакомимся с остальными.

Метод formSerialize – упорядочивает данные из элементов формы в строку запроса. Метод возвращает строку в формате: name1=value1&name2=value2.

var qString = $("#myFormId").formSerialize(); // теперь данные могут быть отправлены // через $.get, $.post, $.ajax, и т.д. $.post("myscript.php", qString);

Метод fieldSerialize – упорядочивает данные из элементов формы в строку запроса. Удобно применять, когда требуется упорядочить в строку запроса только часть данных из формы. Метод возвращает строку в формате: name1=value1&name2=value2

var qString = $("#myFormId .myFields").fieldSerialize();

Метод fieldValue – возвращает значения выбранных элементов в виде массива. С версии 0.91, метод всегда возвращает именно массив. Если нет корректных данных возвращается пустой массив, в противном случае массив содержит один или более элементов.

// получаем значения для полей с типом password var value = $("#myFormId :password").fieldValue(); alert("Пароль: " + value[0]);

Метод resetForm – сбросит форму в начальное состояние через новый вызов элементов формы из объектной модели документа.

$("#myFormId").resetForm();

Метод clearForm – очищает элементы формы. Этот метод очистит все элементы ввода с типом text, password, textarea, очистит выбор в элементах select и снимет отметки с элементов radio и checkbox.

$("#myFormId").clearForm();

Метод clearFields – очищает элементы формы. Удобно применять когда требуется очистить только часть формы.

$("#myFormId .myFields").clearFields();

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

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

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

Как работать с JSON?

Gennady — Mon, 03 Mar 2008 05:50:06 +0000

Вероятно Вы уже прочитали статью «Что такое JSON?«. Если нет, то я рекомендую сначала ознакомиться именно с ней, чтобы понять все с самого начала. А здесь мы поговорим о преобразованиях объектов JavaScript в формат JSON и обратных преобразованиях строки ответа от сервера в формате JSON в объект JavaScript, а также рассмотрим средства для работы с JSON на стороне сервера.

Дуглас Крокфорд (Douglas Crockford), который собственно и предложил формат JSON в качестве альтернативы XML при передаче данных от сервера клиенту, в рамках этого проекта разработал специальную утилиту, предназначенную для упомянутых выше преобразований. Исходник можно найти по адресу http://www.json.org/js.html.

В предыдущей статье о JSON мы уже немного коснулись преобразования строки данных в объект JavaScript с помощью функции eval(), но все-таки нельзя забывать о том, что функция эта не только поможет интерпретировать данные в формат JSON, но и выполнит любой JavaScript-код, который будет ей передан. Так как это обстоятельство может представлять собой потенциальную угрозу, логичнее воспользоваться утилитой Дугласа Крокфорда.

Но давайте обо всем по порядку. Для начала подключим утилиту к нужному файлу:

Создадим объект oAuto обычным способом, забыв о литеральной нотации.

var oAuto = new Object(); oAuto.firm = "Audi"; oAuto.model = "A6"; oAuto.year = 2008; oAuto.price = 78000; oAuto.sellers = new Array( "Фирма А", "Фирма Б", "Фирма В" );

Передадим объект методу JSON.stringify()

document.write(JSON.stringify(oAuto));

и в результате работы этого небольшого кусочка кода будет выведена строка в формате JSON, которую можно передавать по любому адресу.

{"firm":"Audi","model":"A6","year":2008, "price":78000,"sellers":["Фирма А","Фирма Б","Фирма В"]}

Предположим теперь, что эту самую строку мы получили в качестве ответа от сервера и ее надо преобразовать в объект JavaScript. Так нет ничего проще. Передаем строку методу JSON.parse()

var oAuto = JSON.parse(sAuto);

и получаем объект JavaScript.

Вы можете скачать исходный код примера, и испытать его на своем сайте.

Необходимо упомянуть также, что метод JSON.parse() может принимать опционально еще один параметр.

var myObject = JSON.parse(myJSONtext, filter);

Более полную информацию Вы всегда можете найти на сайте http://www.json.org/.

Мы вкратце познакомились с тем, как можно работать с данными в формате JSON на стороне клиента, а как обстоит дело при работе на стороне сервера? Оказывается существует довольно много программного обеспечения для работы с JSON в языках на которых пишутся серверные сценарии. JSON может применяться в Pyton, C#/.NET, PHP, ColdFusion, Perl, Java и т.д. Полный список можно найти на http://www.json.org/, а я для примера выбрал PHP, как наиболее близкий мне.

Утилита JSON-PHP написана Михалем Мигурски (Michal Migurski). Сама утилита – это один файл JSON.PHP, но для работы с утилитой требуется библиотека PEAR (PHP Extension and Application Repository). Скачать утилиту можно отсюда http://pear.php.net/pepr/pepr-proposal-show.php?id=198.

Если Ваш хостер не удосужился включить библиотеку PEAR – не расстраивайтесь. Вы вполне можете сделать все самостоятельно. Не обязательно даже иметь права администратора сервера. Я приведу ссылки. Кому очень понадобится – тот обязательно разберется.
http://pear.php.net/manual/en/installation.getting.php – см. раздел «PEAR in hosting environments».
В принципе нужно только получить инсталляционный файл, загрузить его на свой сервер, вызвать в адресной строке браузера и далее только следовать инструкциям.
А здесь посмотрите раздел «Динамическая коррекция пути к включаемым файлам».

Разберем все на примере. Пусть имеем такое определение класса (для PHP5)

class Auto { public $firm; public $model; public $year; public $price; public $sellers; function Auto($firm,$model,$year,$price) { $this->firm = $firm; $this->model = $model; $this->year = $year; $this->price = $price; $this->sellers = array(); } }

Используем этот класс так:

$oAuto = new Auto("Audi", "A6", 2008, 78000); $oAuto->sellers[0] = "Фирма А"; $oAuto->sellers[1] = "Фирма Б"; $oAuto->sellers[2] = "Фирма В";

Теперь то, что нас интересует больше всего. Подключаем утилиту JSON-PHP, создаем новый экземпляр объекта Services_JSON и передаем объект $oAuto методу encode():

require_once("JSON.php"); $json = new Services_JSON(); $sJSONText = $json->encode($oAuto);

В результате переменная $sJSONText будет содержать строку в формате JSON:

{"firm":"Audi","model":"A6","year":2008,"price":78000, "sellers":["\u0424\u0438\u0440\u043c\u0430 \u0410","\u0424\u0438\u0440\u043c\u0430 \u0411","\u0424\u0438\u0440\u043c\u0430 \u0412"]}

Здесь хочу обратить Ваше внимание на то, что утилита JSON-PHP понимает строки или в ASCII, или в UTF-8. Поэтому существенный выигрыш можно получить при использовании латинских символов, тогда как использование кириллицы в кодировке windows-1251 может привести к увеличению объема данных. Обратите внимание на то место в строке, где должны передаваться Фирма А, Фирма Б, Фирма В.

Но цели мы достигли – объект $oAuto готов к передаче в сценарий на языке JavaScript.

Разберем обратную операцию – преобразование строки текста в формате JSON в объект PHP. Все, что для этого нужно сделать, это передать строку методу decode():

$value = $json->decode($sJSONText);

Если теперь использовать например print_r(), то мы сможем убедиться, что объект был создан:

( [firm] => Audi [model] => A6 [year] => 2008 [price] => 78000 [sellers] => Array ( [0] => Фирма А [1] => Фирма Б [2] => Фирма В ) )

Все это есть в примере, который Вы сможете скачать. Пример включает и утилиту JSON-PHP. Естественно, Вам придется немного поправить пример в той части, где корректируются пути к библиотеке PEAR, либо удалить этот фрагмент кода, если библиотека у Вас уже подключена.

Архив с примером можно скачать здесь.

Что можно еще сказать? Разве что упомянуть о том, что утилита JSON-PHP не единственная для работы с JSON на стороне сервера. Существует расширение PHP – php-json (написано на C Омаром Килани (Omar Kilani)), однако для его установки потребуется умение устанавливать модули расширения PHP. Вот и все, пожалуй.

Буду рад, если найдете время для того, чтобы оставить свои отзывы…

PHP: запись информации в текстовый файл

Gennady — Sun, 13 Jan 2008 20:00:10 +0000

Чтение и запись в текстовый файл казалось бы простейшая операция. Блокировал, открыл, записал, закрыл, снял блокировку с файла. Однако просто это только на первый взгляд….

Давайте подумаем, что произойдет, если к одному и тому же файлу одновременно обратятся несколько процессов, с целью записать туда какую-либо информацию? Могу сразу ответить: часть, либо вся информация, хранящаяся в файле будет безвозвратно потеряна. И просто блокировкой файла здесь не обойтись.

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

function WriteToFile ($path_to_file,$data) { $lock = fopen(PATH_BLOCKFILE,"a"); if(flock($lock, LOCK_EX)) { $tmp=fopen(PATH_TEMPFILE,"w"); for($i=0;$i
Давайте разберем очень подробно, как это работает.
Функция WriteToFile принимает два аргумента: путь к файлу, в который будет записана информация и собственно информация, представленная в виде массива. Нам понадобятся еще два файла, пути к которым определяются константами PATH_BLOCKFILE и PATH_TEMPFILE. Собственно из названий понятно, что первый – это некий блокирующий файл, а второй – файл для временного хранения информации.

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