Ajax редактирование таблиц и табличных данных
Ссылка на исходники обновлена 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
Похожие записи
Саша, не получается сделать, выложи БД. Спасибо! Вообще хорошо пишешь, продолжай в том же духе!
Статья помогла при написании проекта, спасибо. Единственное чем я дополнил это:
Если добавить строчку if($(‘#editbox’).length>0) {return false} после $(‘td.edit’).click(function(){ то нормально станет тыкаться мышкой для редактирования текста
Рад что статья кому-то помогла, спасибо
Спасибо, получилось!
А можете бросить на почту реальный пример, где это используется? Заранее благодарен
День добрый!
А вот такого стиля я еще не видел.
Можно полный исходник скрипта — не выходит у меня?
Спасибо
сколько не пытался но тоже не выходит. можно исходничек, чтоб было от чего отталкиваться
Далее нам необходим скрипт, который позволит редактировать данные в таблице
============
НЕ РАБОТАЕТ!
Этот скрипт для определенной таблицы, если мы не знаем названия столбцов, то тогда это все бесполезно((
Добрый день. Можно ли получить полные исходники вместе с update_cell.php?
Всем привет! По многочисленным просьбам, в ближайше несколько дней выложу исходники и реальный пример
Пожалуйста отправте исходник срипта на mnpartner@yandex.ru
Укажите, пожалуйста, где можно ознакомиться с исходниками?
добрый день, очень благодарен за код! Долго искал! А тут так компактно и удобно! Но , никак не могу понять как добиться редактирования таблицы в бд. Не могли бы все таки скинуть исходники? Больше всего интересует uptade_cell.php.. Заранее огромное спасибо!!
Вышлите пожалуйста исходники)
Можно исходники плиз!!!!
В начале статьи добавил живой пример и исходники
не работает поле field,скрипт постоянно меняет id а остальные колонки не трогает
Что значит не работает поле field? Опишите вашу проблему более подробно
Здравствуйте. Как сделать чтобы курсор при нажатии ставился в конец строки а не в начало. не могу настроить данный $(‘#editbox’).focus();
спасибо большое, скрипт отличный.
А как сюда еще пароль прикрутить? нехорошо ведь если кто-то в твою БД вносит изменения.
Большое спасибо за скрипт! Очень пригодился. Единственное, хотелось бы поправку внести: к ячейке таблицы наверное стоит обращаться не по классу, а по уникальному id, иначе скрипт будет делать столько запросов к базе, сколько на странице имеется этих самых ячеек с данным классом
И еще одна проблемка нарисовалась)) Если таблиц на странице >1, то фиг получишь правильный id. Я добавил таблице класс и переписал
var table = $(‘table.edit’).attr(‘id’);
Всё правильно — это ведь лишь пример а не готовое решение для мейнстрима.
В исходниках, в скрипте нужно написать
//Сохранение при нажатии вне поля
……
вместо
var arr =(‘td.edit’).attr(‘class’).split( » » );
написать
var arr =(‘td.ajax’).attr(‘class’).split( » » );
иначе выбирается 1 столбец 1строки
Круто пишешь. Такая качественная подача информации — редкость. Спасибо огромное!
Здравствуйте! Скиньте, пожалуйста исходники посмотреть, буду очень благодарна 0)))
Ссылка на исходник указана в статье
спасибо!, все работает как часы)
Этот снимок с экрана демонстрирует выбранную строку. Отображаются значения, введенные в форму Add new item , за исключением значений, помеченных в коде таблицы как нередактируемые или несоздаваемые.
Немного не понятно, что вы имеете ввиду
Скрипт полезный, но есть 2 проблемы:
1) Изменяем и сохраняем любую ячейку, обновляем страницу
Самая первая ячейка приняла то же значение!
2) Во время редактирования ячейки при попытке ткнуть указателем мыши в нужное место слова, например в конец, чтобы дописать, курсор перескакивает в н ачало ячейки.
1) Ситуация возникает из за последнего блока «Сохранение при нажатии вне поля». Если его убрать, отрабатывает корректно.
подскажите, почему появляется пробел в начале строки при нажатии на ячейку?
Запись потом так и сохраняется в ячейке с пробелом в начале.
спасибо!
update_cell.php, где можно посмотреть?
В нашем случае указывается файл, который обработает отправленный запрос. Скачайте исходники и сравните код. Ссылка на исходники на этой странице — http://quato.com.ua/lessons/ajax-edit.php
Приветствую!
Хорошая реализация.
А вы можете выслать недостающий файл, полную версию скрипта?
За ранее спасибо!
Мой адрес: site_maker@mail.ru
Например, так:
Заменить
$(‘#editbox’).focus();
на
var el=document.getElementById(‘editbox’);
el.focus();
el.setSelectionRange(el.value.length,el.value.length);
Такой пример на чистом javascript и взят из контекста судя по последней строке.
Спасибо автору статьи и Galexy — . Ваш комментарий очень помог.
Заменил:
var arr = $(‘td.edit’).attr(‘class’).split( » » );
на:
var arr = $(‘td.ajax’).attr(‘class’).split( » » );
и заработало, как надо.
Хорошого времени суток, а как зделать редактиррование нескольких таблиц з одной бази даних на 1 странице? Можно код или исходник?
Не выводил значения в таблицу из базы. Поправил php код.
Имя
Фамилия
Телефон
fetch_assoc())
{
?>
<td class="edit firstname «>
<td class="edit lastname «>
<td class="edit phone «>
Вместо:
foreach ($table as $rows)
Поставить:
while ($rows = $table->fetch_assoc())
А так, спасибо! То что искал. :)
Хм. Прошу извинить. Не работало только в OpenServer. На хостинге работает и при foreach и второй способ.
Добрый день! и Все же как устранить проблему с последним блоком? он важен для удобства, но обновление первой ячейки вместе с нужной убивает
Прошу прощения, сам разобрался, возникла другая проблема, у меня таблицы в которых от 28 до 31 ячейки(графики работы) при заполнении возникла проблема не заполняются ячейки с 13 по 19, подскажите в чем проблема, спасибо
Добрый день!
Можно ли мне полные исходники?
navumov.ivan@yandex.ru
Приведите пример кода, или постучитесь в скайп. Контакты на странице контактов.
Еще один момент.
Не отрабатывает click на iOS (проверял на 10). На Android +Google Chrome, и Windows + FireFox + Google Chrome все работает.
Для решения проблемы, нужно добавить в код touchstart:
//при нажатии на ячейку таблицы с классом edit
$(document).on(‘click’, ‘td.edit’, function(){
//при нажатии на ячейку таблицы с классом edit
$(document).on(‘click touchstart’, ‘td.edit’, function(){