Update 31.10.2015 00:50

По просьбам трудящихся – исходники. В архиве .sql и .php – всё в одном, и вывод и обработчик, всё с подробными комментариями.


 

Привет тебе дорогой читатель, сегодня мы немного поговорим об инлайновом редактировании данных в таблицах без перезагрузки страницы (inline edit ajax).

Как я уже сказал, передо мной встала задача редактирования данных в таблицах. После непродолжительных поисков нашел подходящий вариант, который не использует дополнительные плагины и библиотеки кроме самой jQuery. А таких на самом деле вагон и целая тележка и у каждого есть свои преимущества и недостатки. Один из самых неплохих по функционалу – jqGrid, но о нём мы поговорим в следующий раз.

Представим, что наши данные, по умолчанию, хранятся в базе. В моём примере это будет MySql, обновляться они будут с помощью JS и PHP по технологии AJAX.

AJAX, Ajax (ˈeɪdʒæks, от англ. Asynchronous Javascript and XML — «асинхронный JavaScript и XML») — подход к построению интерактивных пользовательских интерфейсов веб-приложений, заключающийся в «фоновом» обмене данными браузера с веб-сервером. В результате, при обновлении данных веб-страница не перезагружается полностью, и веб-приложения становятся быстрее и удобнее.

Источник: Википедия

Итак обсудим то, что у нас имеется, и то, что мы хотим получит в итоге

Исходные данные:

ТаблицЫ с данными, которые генерируются на PHP, запросом из нашей базы данных.
Допустим у нас есть две таблицы: клиенты (clients) и сотрудники (workers)
Поля наших таблиц на самом деле неважно какие, но возьмём для примера такие:

  • id – первичный уникальный ключ с авто инкрементом.
  • firstname – имя сотрудника или клиента
  • lastname – фамилия сотрудника или клиента
  • phone – телефон сотрудника или клиента

Необходимый результат:

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

Что нам для этого потребуется?

  • jquery.js – jQuery javascript framework
  • Заполненные таблицы в БД
  • Азы PHP + JS
  • Смекалка

Приступим к выполнению нашей задачи

Первым делом подключаем необходимую библиотеку (jQuery) внутри тегов <head></head>. Я обычно использую самую последнюю версию, чтобы поддерживать актуальность знаний о возможностях этой чудно библиотеки и подключаю её минифицированную версию из репозитория Google Hosted Library. На момент написания статьи актуальная версия 1.9.1, её и подключаем.

[code lang=”html”]<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>[/code]

Далее присваиваем нашей таблице уникальный идентификатор id, который соответствует названию таблицы в базе (это важно!).
Выводим все строки циклом и присваиваем строкам класс – edit, класс с названием столбца в БД и числовой класс с идентификатором строки в БД.

[php]</pre>
<table id="clients">
<tbody>
<tr>
<th>Имя</th>
<th>Фамилия</th>
<th>Телефон</th>
</tr>
<!–Эта часть выводится с помощью php –>
<tr>
<td class="edit firstname ‘.$rows[‘id’].’">’.$rows[‘firstname’].'</td>
<td class="edit lastname ‘.$rows[‘id’].’">’.$rows[‘lastname’].'</td>
<td class="edit phone ‘.$rows[‘id’].’">’.$rows[‘phone’].'</td>
</tr>
</tbody>
</table>
<pre>
[/php]

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

[js]
//при нажатии на ячейку таблицы с классом edit
$(‘td.edit’).click(function(){
//находим input внутри элемента с классом ajax и вставляем вместо input его значение
$(‘.ajax’).html($(‘.ajax input’).val());
//удаляем все классы ajax
$(‘.ajax’).removeClass(‘ajax’);
//Нажатой ячейке присваиваем класс ajax
$(this).addClass(‘ajax’);
//внутри ячейки создаём input и вставляем текст из ячейки в него
$(this).html(‘<input id="editbox" size="’+ $(this).text().length+’" type="text" value="’ + $(this).text() + ‘" />’);
//устанавливаем фокус на созданном элементе
$(‘#editbox’).focus();
});
[/js]

Итак форма для редактирования текста у нас появилась, что же мы с ней будем делать дальше?
Теперь нам необходимо сохранять введенные данные при каком то событии, я приведу пример сохранения данных при нажатии Enter.

[js]
//определяем нажатие кнопки на клавиатуре
$(‘td.edit’).keydown(function(event){
//получаем значение класса и разбиваем на массив
//в итоге получаем такой массив – arr[0] = edit, arr[1] = наименование столбца, arr[2] = id строки
arr = $(this).attr(‘class’).split( " " );
//проверяем какая была нажата клавиша и если была нажата клавиша Enter (код 13)
if(event.which == 13)
{
//получаем наименование таблицы, в которую будем вносить изменения
var table = $(‘table’).attr(‘id’);
//выполняем ajax запрос методом POST
$.ajax({ type: "POST",
//в файл update_cell.php
url:"update_cell.php",
//создаём строку для отправки запроса
//value = введенное значение
//id = номер строки
//field = название столбца
//table = собственно название таблицы
data: "value="+$(‘.ajax input’).val()+"&id="+arr[2]+"&field="+arr[1]+"&table="+table,
//при удачном выполнении скрипта, производим действия
success: function(data){
//находим input внутри элемента с классом ajax и вставляем вместо input его значение
$(‘.ajax’).html($(‘.ajax input’).val());
//удаялем класс ajax
$(‘.ajax’).removeClass(‘ajax’);
}});
}});
[/js]

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

[js]
$(‘#editbox’).live(‘blur’,function(){
$(‘.ajax’).html($(‘.ajax input’).val());
$(‘.ajax’).removeClass(‘ajax’);
});
[/js]

Вам остаётся только обработать полученные данные в файле update_cell.php, все необходимые переменные у Вас есть, пусть это будем вашей самостоятельной работой.
Таким образом мы получаем компактный, универсальный скрипт для быстрого редактирования любых табличных данных.

Если кому нужны будут полные исходники моего варианта скрипта – пишите в коменты.

Дополнение №1

В версии jQuery 1.9.1 отключен метод .live. Вместо него нужно использовать метод .on, сравните синтаксис сами:

[js]
$(document).on(‘blur’, ‘#editbox’, function(){
$(‘.ajax’).html($(‘.ajax input’).val());
$(‘.ajax’).removeClass(‘ajax’);
});
[/js]

По материалам http://www.iwebux.com

53 КОММЕНТАРИИ

  1. Скачал исходники, ввёл свои данные, прочитал предыдущие комментарии и внёс необходимые изменения. Данные из базы выводятся, редактировать ячейки можно, но при обновлении страницы введённые данные исчезают. Значит в базу изменения не попали? В чём может быть дело? Необходимо производить какие действия с файлом update_cell.php? Или достаточно его наличия? Помогите, пожалуйста!

    [Ответить]

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here