Ссылка на исходники обновлена 25.06.2020 (пока без комментариев)
По просьбам трудящихся – исходники. В архиве .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, её и подключаем.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
Далее присваиваем нашей таблице уникальный идентификатор id, который соответствует названию таблицы в базе (это важно!).
Выводим все строки циклом и присваиваем строкам класс – edit, класс с названием столбца в БД и числовой класс с идентификатором строки в БД.
</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>
Далее нам необходим скрипт, который позволит редактировать данные в таблице. Как он работает, я опишу комментариями к каждой строке ниже в коде
//при нажатии на ячейку таблицы с классом 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();
});
Итак форма для редактирования текста у нас появилась, что же мы с ней будем делать дальше?
Теперь нам необходимо сохранять введенные данные при каком то событии, я приведу пример сохранения данных при нажатии Enter.
//определяем нажатие кнопки на клавиатуре
$('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');
}});
}});
Также для удобства, добавляем несколько строчек кода, которые убирают наш input при нажатии вне поля ввода, ведь мы можем не захотеть сохранять введенную информацию.
$('#editbox').live('blur',function(){
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
});
Вам остаётся только обработать полученные данные в файле update_cell.php, все необходимые переменные у Вас есть, пусть это будем вашей самостоятельной работой.
Таким образом мы получаем компактный, универсальный скрипт для быстрого редактирования любых табличных данных.
Если кому нужны будут полные исходники моего варианта скрипта – пишите в коменты.
Дополнение №1
В версии jQuery 1.9.1 отключен метод .live. Вместо него нужно использовать метод .on, сравните синтаксис сами:
$(document).on('blur', '#editbox', function(){
$('.ajax').html($('.ajax input').val());
$('.ajax').removeClass('ajax');
});
По материалам http://www.iwebux.com
