jqGrid: редактирование табличных данных с помощью inline редакторов

В одной из прошлых статей (jQuery Grid Plugin – "продвинутое" решение для создания таблиц) я рассказывал об использовании jqGrid для создания таблиц.
jqGrid представляет собой плагин к библиотеке jQuery предназначенный для работы с таблицами. С его помощью можно создавать многостраничные таблицы, выполнять сортировку и, конечно, редактировать данные.
В прошлой статье речь шла только о самых простых возможностях и, как справедливо заметили в комментариях, о самой интересной части, редактировании, не было ничего сказано. Я пообещал это исправить и сегодня постараюсь это обещание выполнить.
Прежде всего, напомню, что данные хранятся на стороне сервера (в базе данных) и плагин к ним непосредственного доступа не имеет. Он может только вызвать серверный (PHP) скрипт и передать ему новые значения.
Редактировать записи в таблице можно 2 способами.
1) В отдельном окне. При редактировании строки появляется окно со всеми полями, в которые нужно ввести новые значения. Клик по кнопке «OK» отправит данные серверу.
2) С использованием inline редакторов. В режиме редактирования текст строки заменяется полями для ввода данных. Нажатие на клавишу Enter отправляет измененные данные.
Общий принцип работы в обоих случаях один и тот же. Поэтому мы рассмотрим только один вариант (с использованием inline редакторов).
Использовать будем предыдущий пример. На данный момент он только создает таблицу с данными из базы, а мы добавим возможность их редактирования.
В тексте этой статьи приводить полный код скриптов нет смысла, остановимся только на тех моментах, которые касаются редактирования. Но вы можете скачать архив с этим примером и поэкспериментировать с демонстрационной страницей.
Прежде всего, сделаем поля таблицы редактируемыми. Для этого нужно внести несколько изменений в скрипт, создающий таблицу.
jQuery(document).ready(function(){
var lastSel;
jQuery("#list").jqGrid({
url:'getdata.php',
datatype: 'json',
mtype: 'POST',
colNames:['#', 'Фамилия', 'Имя', 'Отчество'],
colModel :[
{name:'id', index:'id', width:30}
,{name:'surname', index:'surname', width:80, align:'right', editable:true, edittype:"text"}
,{name:'fname', index:'fname', width:90, editable:true, edittype:"text"}
,{name:'lname', index:'lname', width:80, align:'right', editable:true, edittype:"text"}
],
pager: jQuery('#pager'),
rowNum:5,
rowList:[5,10,30],
sortname: 'id',
sortorder: "asc",
viewrecords: true,
imgpath: 'themes/basic/images',
caption: 'Данные пользователей',
ondblClickRow: function(id) {
if (id && id != lastSel) {
jQuery("#list").restoreRow(lastSel);
jQuery("#list").editRow(id, true);
lastSel = id;
}
},
editurl: 'saverow.php'
});
});
В строке 2 мы добавили переменную lastSel, которая служит для хранения id строки, редактируемой в данный момент.
Также немного изменились строки 10-12 (по сравнению с предыдущим примером). В них перечислены параметры ячеек таблицы и для каждой ячейки (кроме первой, в которой хранится id записи) мы добавили параметры editable:true и edittype:"text".
Первый параметр делает ячейку редактируемой, второй – указывает, что в ячейке нужно создать обычное текстовое поле. Другие значения этого параметра: textarea, checkbox и select.
После этого создаем обработчик события ondblClickRow (строки 22-28). В нем мы проверяем что пользователь кликнул по строке и эта строка в данный момент не редактируется. Восстанавливаем значения в строке, которая редактировалась перед этим (с помощью restoreRow) и переводим новую строку в режим редактирования (функция editRow).
Обратите внимание на второй параметр функции editRow. Он должен быть равен true для того, чтобы сохранение данных выполнялось при нажатии на клавишу Enter.
И последнее изменение (строка 29). В параметре editurl указываем имя серверного скрипта, который будет сохранять данные.
Теперь остается только написать серверный (PHP) скрипт (saverow.php).
<?php
require_once('dbdata.php');
try {
//читаем новые значения
$id = $_POST['id'];
$surname = $_POST['surname'];
$fname = $_POST['fname'];
$lname = $_POST['lname'];
//подключаемся к базе
$dbh = new PDO('mysql:host='.$dbHost.';dbname='.$dbName, $dbUser, $dbPass);
//указываем, мы хотим использовать utf8
$dbh->exec('SET CHARACTER SET utf8');
//определяем количество записей в таблице
$stm = $dbh->prepare('UPDATE users SET surname=?, fname=?, lname=? WHERE id=?');
$stm->execute(array($surname, $fname, $lname, $id));
}
catch (PDOException $e) {
echo 'Database error: '.$e->getMessage();
}
// end of saverow.php
Здесь мы читаем новые значения (названия параметров в массиве $_POST совпадают с названиями столбцов таблицы) (строки 6-9).
После этого подключаемся к базе и обновляем запись (строки 11-18). Чтобы показать основную идею я максимально сократил код, убрал проверки и использовал PDO для работы с базой.
Всё, теперь можно спокойно редактировать записи в таблице.
Если есть вопросы или замечания, пишите, постараюсь ответить
До встречи!
Понравилась статья? Подписывайтесь на продолжение
!
Добавьте эту страницу в
Tweet
Опубликовано в Ajax, JavaScript, MySQL, PHP, Web разработка Комментарии (287) »
Вы можете оставить комментарий. Трекбеки закрыты.
-
Tovit
-
Tovit
-
Serator
-
Serator
-
Serator
-
http://www.simplecoding.org/ Владимир
-
Serator
-
Big_Shark
-
http://www.simplecoding.org/ Владимир
-
Big_Shark
-
http://adw0rd.ru/ adw0rd
-
http://www.simplecoding.org/ Владимир
-
http://adw0rd.ru/ adw0rd
-
http://adw0rd.ru/ adw0rd
-
http://adw0rd.ru/ adw0rd
-
http://adw0rd.ru/ adw0rd
-
http://www.simplecoding.org/ Владимир
-
http://adw0rd.ru/ adw0rd
-
http://adw0rd.ru/ adw0rd
-
http://adw0rd.ru/ adw0rd
-
viking
-
http://www.simplecoding.org/ Владимир
-
http://www.westcreate.ru/ Владимир
-
http://www.simplecoding.org/ Владимир
-
viking
-
http://www.westcreate.ru Владимир
-
Антон
-
http://www.simplecoding.org/ Владимир
-
Антон
-
Антон
-
Антон
-
http://www.simplecoding.org/ Владимир
-
Антон
-
Антон
-
Denis
-
http://www.simplecoding.org Владимир
-
http://www.simplecoding.org Владимир
-
Антон
-
Антон
-
Виктор
-
http://www.simplecoding.org/ Владимир
-
Виктор
-
http://www.simplecoding.org/ Владимир
-
Виктор
-
Виктор
-
http://www.mk-euroservice.ru/ Димитрий
-
http://www.simplecoding.org/ Владимир
-
http://www.mk-euroservice.ru Димитрий
-
rus
-
http://adw0rd.ru/ adw0rd
-
http://www.simplecoding.org/ Владимир
-
rus
-
http://adw0rd.ru adw0rd
-
Самат
-
http://www.simplecoding.org/ Владимир
-
Самат
-
Игорь
-
http://www.simplecoding.org/ Владимир
-
Игорь
-
http://www.simplecoding.org/ Владимир
-
Игорь
-
Игорь
-
Евгений
-
http://www.simplecoding.org/ Владимир
-
Евгений
-
Евгений
-
http://www.simplecoding.org/ Владимир
-
Евгений
-
Евгений
-
http://www.simplecoding.org/ Владимир
-
Евгений
-
Евгений
-
http://www.simplecoding.org/ Владимир
-
Евгений
-
Евгений
-
Евгений
-
Евгений
-
Евгений
-
Евгений
-
http://www.simplecoding.org/ Владимир
-
Евгений
-
Евгений
-
http://www.simplecoding.org/ Владимир
-
Евгений
-
Игорь
-
http://www.simplecoding.org/ Владимир
-
Игорь
-
Игорь
-
Игорь
-
http://proplazma.com.ua/ Александр
-
http://www.simplecoding.org/ Владимир
-
http://proplazma.com.ua Александр
-
Дмитрий
-
http://www.simplecoding.org/ Владимир
-
http://www.simplecoding.org/ Владимир
-
Дмитрий
-
http://www.simplecoding.org/ Владимир
-
Дмитрий
-
http://www.simplecoding.org/ Владимир
-
Дмитрий
-
Дмитрий
-
Дмитрий
-
Олег
-
http://www.simplecoding.org/ Владимир
-
http://- Олег
-
Юрий
-
http://www.simplecoding.org/ Владимир
-
Юрий
-
http://www.simplecoding.org/ Владимир
-
Юрий
-
Юрий
-
Юрий
-
http://www.simplecoding.org/ Владимир
-
Last
-
Юрий
-
Last
-
Юрий
-
http://www.simplecoding.org/ Владимир
-
Юрий
-
Юрий
-
http://www.simplecoding.org/ Владимир
-
Юрий
-
Павел
-
http://www.simplecoding.org/ Владимир
-
Павел
-
Павел
-
http://www.simplecoding.org/ Владимир
-
Павел
-
http://spec.kiev.ua/ Slamm
-
http://www.simplecoding.org/ Владимир
-
http://spec.kiev.ua Slamm
-
Last
-
http://www.simplecoding.org/ Владимир
-
Last
-
Last
-
http://www.simplecoding.org/ Владимир
-
Last
-
Zarema
-
http://www.simplecoding.org/ Владимир
-
Zarema
-
http://www.simplecoding.org/ Владимир
-
Zarema
-
Zarema
-
vredin
-
http://www.simplecoding.org/ Владимир
-
vredin
-
Tomkit
-
Tomkit
-
http://www.simplecoding.org/ Владимир
-
Tomkit
-
Tomkit
-
Tomkit
-
Tomkit
-
Галина
-
http://www.simplecoding.org/ Владимир
-
Галина
-
Денис
-
Денис
-
Last
-
http://www.simplecoding.org/ Владимир
-
Last
-
Денис
-
http://www.simplecoding.org/ Владимир
-
Денис
-
Галина
-
Last
-
Галина
-
Last
-
Евгений
-
http://www.simplecoding.org/ Владимир
-
Евгений
-
http://www.simplecoding.org/ Владимир
-
Евгений
-
Евгений
-
Frag
-
Frag
-
Drakoniha
-
Drakoniha
-
http://www.simplecoding.org Владимир
-
Андрей
-
http://www.simplecoding.org Владимир
-
Drakoniha
-
http://www.simplecoding.org Владимир
-
Drakoniha
-
http://www.simplecoding.org Владимир
-
Qw1564
-
http://www.simplecoding.org Владимир
-
Drakoniha
-
http://www.simplecoding.org Владимир
-
Drakoniha
-
http://www.simplecoding.org Владимир
-
Kamil-shagaliev
-
http://www.simplecoding.org Владимир
-
JtNET
-
http://www.simplecoding.org Владимир
-
JtNET
-
JtNET
-
JtNET
-
JtNET
-
JtNET
-
JtNET
-
http://www.simplecoding.org Владимир
-
http://www.simplecoding.org Владимир
-
http://www.simplecoding.org Владимир
-
http://www.simplecoding.org Владимир
-
JtNET
-
http://www.simplecoding.org Владимир
-
Vodennikov
-
Iprodigy
-
http://www.simplecoding.org Владимир
-
Сергей
-
http://www.simplecoding.org Владимир
-
http://www.facebook.com/dospehov Анатолий Доспехов
-
http://www.simplecoding.org Владимир
-
www78
-
http://www.simplecoding.org Владимир
-
Гость
-
http://www.simplecoding.org Владимир
-
Александр
-
http://www.simplecoding.org Владимир
-
sicil
-
http://www.simplecoding.org Владимир
-
Luba
-
http://www.simplecoding.org Владимир
-
Dogidogi
-
http://www.simplecoding.org Владимир
-
Dogidogi
-
http://www.simplecoding.org Владимир
-
dogidogi
-
http://www.simplecoding.org Владимир
-
Иван
-
http://www.simplecoding.org Владимир
-
D_mike
-
http://www.simplecoding.org Владимир
-
D_mike
-
D_mike
-
http://www.simplecoding.org Владимир
-
D_mike
-
http://www.simplecoding.org Владимир
-
Paoock








