Update: Внимание! Эта статья устаревшая, а плагин, который здесь используется уже не поддерживается автором и имеет неисправленные ошибки.
В одной из прошлых статей я писал о том, как сделать текст на странице динамически редактируемым. Там был представлен метод редактирования при помощи плагина jEditable. Таким образом можно динамически редактировать любой блок текста на странице. Однако если речь идет о табличных данных, то гораздо удобнее использовать другое решение – плагин tableFormSynch. Этот плагин связывает таблицу с формой, давая возможность динамически редактировать данные в таблице, а также добавлять и удалять записи.
В этой статье я покажу, как сделать простое приложение, реализующее редактирование, добавление и удаление записей таблицы, сохраняя данные при помощи AJAX. Чтобы создать приложение нам будут нужны библиотека jQuery, плагин metadata (требуется для работы плагина tableFormSynch), а также jQuery Form Plugin для сохранения данных формы через AJAX. Но прежде чем мы начнем, предлагаю посмотреть на готовый результат. Смотреть демо пример.
Итак, начинаем с того, что создаем HTML страницу и подключаем к ней необходимые нам скрипты:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="ru-RU"> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.2.6.min.js"></script> <script type="text/javascript" src="jquery.metadata.min.js"></script> <script type="text/javascript" src="jquery.tableFormSynch.documented.js"></script> <script type="text/javascript" src="jquery.form.js"></script> </head> <body> </body> </html>
Далее добавляем табличные данные, которые мы собираемся редактировать, плюс сюда же добавляем ссылки на редактирование и удаление записи. Здесь есть обязательные условия: для каждой строки таблицы нужно указать ID записи в атрибуте id и метаданные (то есть все данные записи) в атрибуте class. И еще – все строки таблицы должны быть обязательно заключены в тэги <tbody>:
<tr id="1" class="{personId:1,first_name:'Иван',last_name:'Иванов',position:'Программист'}">
<td>Иван</td>
<td>Иванов</td>
<td>Программист</td>
<td><a href="#" class="edit">Редактировать</a> | <a href="#" class="delete">удалить</a></td>
</tr>
Следующий шаг – создание формы: она будет располагаться в последней строке таблицы и при загрузке страницы будет не видна. Появляться она будет по надобности, при нажатии на ссылки “добавить запись” или “редактировать”. Форма будет иметь все нужные поля (в нашем случае текстовые поля) и три кнопки – “добавить” и “редактировать”, которые появляются в зависимости от выбранного действия, а также “отмена”, по нажатию на которую форма будет исчезать.
<form id="rowEditForm" action="save.php" method="post"> <table width="100%" cellpadding="0" cellspacing="0" border="0" id="demoTable" class="tablesCorp"> <!-- строки таблицы --> <tr id="editableRow"> <td><input type="hidden" name="personId" value="0"/><input type="text" name="first_name" value=""/></td> <td><input type="text" name="last_name" value=""/></td> <td><input type="text" name="position" value=""/></td> <td> <input id="updateBtn" type="submit" name="update" value="Обновить"/> <input id="addBtn" type="submit" name="add" value="Добавить"/> <input id="cancelBtn" type="button" name="cancel" value="Отмена"/> <img id="loading" src="loading.gif" /> </td> </tr> </tbody> </table> </form>
Ну и самая малость – под таблицей размещаем ссылку “добавить запись”:
<a href="#" class="add">Добавить запись</a>
Теперь приступим к созданию скрипта нашего приложения. Как полагается для скриптов, написанных под jQuery, заключаем весь наш код в функцию $.ready(), и первое, что мы туда поместим, это вызов функции bindTableToForm(), которая связывает таблицу с формой:
$(document).ready(function() {
$("#demoTable").bindTableToForm($("#rowEditForm"),"personId");
});
Первым параметром в функцию мы передаем форму, а вторым – название ключевого поля записи, в нашем случае это ID пользователя.
Далее, создаем фукнцию редактирования. Добавляем ко всем ссылкам “редактировать” обработчик, который будет показывать форму редактирования под нужной строкой. Форму заполняем данными при помощи функции populateForm()и здесь же показываем конпку “редактировать” и прячем конпку “добавить”. Таким образом мы переводим форму в режим редактирования. Ну и для красоты подкрашиваем редактируемую строку бледно розовым цветом:
$("a.edit").click(function() {
$("#addBtn").hide();
$("#updateBtn").show();
$(this).populateForm();
var row = $(this).parent().parent();
row.find('td').css('background-color','#faa');
$('#editableRow').insertAfter(row).fadeIn('slow');
// отмена действия по умолчанию
return false;
});
При нажатии на кнопку “обновить”, данные формы будут отправляться на сервер через AJAX, и при успешном сохранении, запись в таблице будет обновляться. Выполняем это все в обработчике onclick кнопки:
$("#updateBtn").click(function() {
$('#rowEditForm').ajaxForm({
beforeSubmit : function(){
$('#loading').show();
},
success : function(response){
$('#loading').hide();
if (response == 1)
$("#rowEditForm").updateRow();
else
alert('Ошибка сохранения данных');
var rowId = $("input[name='personId']").val();
var row = $('tr#'+rowId).find('td').css('background-color','#F5F5F5');
$('#editableRow').fadeOut('slow');
}
});
});
Здесь мы используем функцию ajaxForm() для выполнения AJAX запроса с данными формы. При успешном сохранении данных, сервер возвращает значение 1, в любом другом случае, трактуем результат как ошибку. Данные в таблице обновляем фукнцией updateRow().
Далее реализовуем добавление новой записи. Всё делаем также, как и для обновления, только вместо того, чтобы заполнять форму, очищаем её функцией clearForm(). Ну и естественно, вместо кнопки “редактировать” делаем активной кнопку “добавить”:
$("a.add").click(function() {
$("#addBtn").show();
$("#updateBtn").hide();
// очищаем форму
$("#rowEditForm").clearForm();
$("input[name='personId']").val(0);
$('#demoTable tbody').append($('#editableRow'));
$('#editableRow').fadeIn('slow');
return false;
});
Обработчик для кнопки “добавить” также мало чем отличается от функции обновления, за исключением того, что сервер возвращает ID новой записи, который затем передается в функцию addRow() для добавления записи:
$("#addBtn").click(function() {
$('#rowEditForm').ajaxForm({
beforeSubmit : function(){
$('#loading').show();
},
success : function(response){
$('#loading').hide();
if (response == 0)
alert('Ошибка добавления данных');
else
$("#rowEditForm").addRow(response);
$('#editableRow').fadeOut('slow');
}
});
});
Теперь выполним удаление записи – используем для этого функцию deleteRow(). Для отправки запроса на сервер будем использовать функцию $.post(), которая будет отправлять запрос в отдельный файл delete.php. Последний выполняет удаление записи и возвращает 1 если запись удалилась, и 0 если произошла ошибка. В самом начале функции мы получаем ID записи которую необходимо удалить, затем передаем это значение в функцию $.post() в качестве параметра personId, который будет установлен переменной в POST:
$("a.delete").click(function() {
var id = $(this).parent().parent().attr('id');
var that = $(this);
$.post('delete.php',
{personId : id},
function(data){
if (data == 1)
that.deleteRow();
else
alert('Ошибка удаления записи');
});
return false;
});
Ну и последняя, самая простая функция – “отмена”. Здесь мы просто прячем форму и закрашиваем все строки формы в стандартный цвет:
$("#cancelBtn").click(function(){
$("#editableRow").fadeOut("slow");
$(".tablesCorp td").css('background-color','#F5F5F5');
});
Посмотреть скрипт полностью можно здесь.
После этого нужно еще установить пару обязательных стилей:
#editableRow {display:none}
#addBtn {display:none}
Первая строка прячет форму редактирования, а вторая кнопку “добавить”, которые в начале работы должны быть скрытыми.
Вот и все, наше приложение готово. Буду рад услышать Ваши замечания 
До встречи!
Update: Внимание! Эта статья устаревшая, а плагин, который здесь используется уже не поддерживается автором и имеет неисправленные ошибки.
Автошколы, автокурсы и автоинструкторы Москвы
Курсы MBA, бизнес школа мба одесса
Инструктор по вождению – обучение вождению автомобиля в Москве
