Ajax редактирование таблиц и табличных данных

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, её и подключаем.

<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

60 комментариев

  1. Cordis says: -

    Саша, не получается сделать, выложи БД. Спасибо! Вообще хорошо пишешь, продолжай в том же духе!

    [Ответить]

  2. Roman says: -

    Статья помогла при написании проекта, спасибо. Единственное чем я дополнил это:
    Если добавить строчку if($(‘#editbox’).length>0) {return false} после $(‘td.edit’).click(function(){ то нормально станет тыкаться мышкой для редактирования текста

    [Ответить]

    Quato Reply:

    Рад что статья кому-то помогла, спасибо

    [Ответить]

  3. iozhik says: -

    Спасибо, получилось!

    [Ответить]

  4. Sergey says: -

    А можете бросить на почту реальный пример, где это используется? Заранее благодарен

    [Ответить]

  5. День добрый!
    А вот такого стиля я еще не видел.
    Можно полный исходник скрипта – не выходит у меня?
    Спасибо

    [Ответить]

  6. алексей says: -

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

    [Ответить]

  7. Михаил says: -

    Далее нам необходим скрипт, который позволит редактировать данные в таблице
    ============

    НЕ РАБОТАЕТ!

    [Ответить]

  8. Alex says: -

    Этот скрипт для определенной таблицы, если мы не знаем названия столбцов, то тогда это все бесполезно((

    [Ответить]

  9. Roman R. says: -

    Добрый день. Можно ли получить полные исходники вместе с update_cell.php?

    [Ответить]

  10. Quato says: -

    Всем привет! По многочисленным просьбам, в ближайше несколько дней выложу исходники и реальный пример

    [Ответить]

  11. Narek says: -

    Пожалуйста отправте исходник срипта на mnpartner@yandex.ru

    [Ответить]

  12. pwLs says: -

    Укажите, пожалуйста, где можно ознакомиться с исходниками?

    [Ответить]

  13. Евгений says: -

    добрый день, очень благодарен за код! Долго искал! А тут так компактно и удобно! Но , никак не могу понять как добиться редактирования таблицы в бд. Не могли бы все таки скинуть исходники? Больше всего интересует uptade_cell.php.. Заранее огромное спасибо!!

    [Ответить]

  14. Сергей says: -

    Вышлите пожалуйста исходники)

    [Ответить]

  15. dima says: -

    Можно исходники плиз!!!!

    [Ответить]

    Quato Reply:

    В начале статьи добавил живой пример и исходники

    [Ответить]

  16. cao says: -

    не работает поле field,скрипт постоянно меняет id а остальные колонки не трогает

    [Ответить]

    Quato Reply:

    Что значит не работает поле field? Опишите вашу проблему более подробно

    [Ответить]

  17. Игорь says: -

    Здравствуйте. Как сделать чтобы курсор при нажатии ставился в конец строки а не в начало. не могу настроить данный $(‘#editbox’).focus();
    спасибо большое, скрипт отличный.

    [Ответить]

    garry Reply:

    Например, так:

    Заменить
    $(‘#editbox’).focus();

    на
    var el=document.getElementById(‘editbox’);
    el.focus();
    el.setSelectionRange(el.value.length,el.value.length);

    [Ответить]

    Quato Reply:

    Такой пример на чистом javascript и взят из контекста судя по последней строке.

    [Ответить]

  18. Евгений says: -

    А как сюда еще пароль прикрутить? нехорошо ведь если кто-то в твою БД вносит изменения.

    [Ответить]

  19. Cyrillo says: -

    Большое спасибо за скрипт! Очень пригодился. Единственное, хотелось бы поправку внести: к ячейке таблицы наверное стоит обращаться не по классу, а по уникальному id, иначе скрипт будет делать столько запросов к базе, сколько на странице имеется этих самых ячеек с данным классом

    [Ответить]

    Cyrillo Reply:

    И еще одна проблемка нарисовалась)) Если таблиц на странице >1, то фиг получишь правильный id. Я добавил таблице класс и переписал
    var table = $(‘table.edit’).attr(‘id’);

    [Ответить]

    Quato Reply:

    Всё правильно – это ведь лишь пример а не готовое решение для мейнстрима.

    [Ответить]

  20. Galexy says: -

    В исходниках, в скрипте нужно написать

    //Сохранение при нажатии вне поля
    ……
    вместо
    var arr =(‘td.edit’).attr(‘class’).split( ” ” );
    написать
    var arr =(‘td.ajax’).attr(‘class’).split( ” ” );

    иначе выбирается 1 столбец 1строки

    [Ответить]

    Сергей Reply:

    Спасибо автору статьи и Galexy – . Ваш комментарий очень помог.
    Заменил:
    var arr = $(‘td.edit’).attr(‘class’).split( ” ” );
    на:
    var arr = $(‘td.ajax’).attr(‘class’).split( ” ” );

    и заработало, как надо.

    [Ответить]

  21. Николай says: -

    Круто пишешь. Такая качественная подача информации – редкость. Спасибо огромное!

    [Ответить]

  22. Луиза says: -

    Здравствуйте! Скиньте, пожалуйста исходники посмотреть, буду очень благодарна 0)))

    [Ответить]

    Quato Reply:

    Ссылка на исходник указана в статье

    [Ответить]

  23. pupil says: -

    спасибо!, все работает как часы)

    [Ответить]

  24. Site says: -

    Этот снимок с экрана демонстрирует выбранную строку. Отображаются значения, введенные в форму Add new item , за исключением значений, помеченных в коде таблицы как нередактируемые или несоздаваемые.

    [Ответить]

    Quato Reply:

    Немного не понятно, что вы имеете ввиду

    [Ответить]

  25. Скрипт полезный, но есть 2 проблемы:
    1) Изменяем и сохраняем любую ячейку, обновляем страницу
    Самая первая ячейка приняла то же значение!
    2) Во время редактирования ячейки при попытке ткнуть указателем мыши в нужное место слова, например в конец, чтобы дописать, курсор перескакивает в н ачало ячейки.

    [Ответить]

    Владимир Reply:

    1) Ситуация возникает из за последнего блока “Сохранение при нажатии вне поля”. Если его убрать, отрабатывает корректно.

    [Ответить]

  26. pupil says: -

    подскажите, почему появляется пробел в начале строки при нажатии на ячейку?
    Запись потом так и сохраняется в ячейке с пробелом в начале.
    спасибо!

    [Ответить]

  27. adamich says: -

    update_cell.php, где можно посмотреть?

    [Ответить]

    Quato Reply:

    В нашем случае указывается файл, который обработает отправленный запрос. Скачайте исходники и сравните код. Ссылка на исходники на этой странице – https://quato.com.ua/lessons/ajax-edit.php

    [Ответить]

  28. SiteMaker says: -

    Приветствую!
    Хорошая реализация.
    А вы можете выслать недостающий файл, полную версию скрипта?
    За ранее спасибо!
    Мой адрес: site_maker@mail.ru

    [Ответить]

  29. Terkel says: -

    Хорошого времени суток, а как зделать редактиррование нескольких таблиц з одной бази даних на 1 странице? Можно код или исходник?

    [Ответить]

  30. Tico says: -

    Не выводил значения в таблицу из базы. Поправил php код.

    Имя
    Фамилия
    Телефон


    fetch_assoc())
    {
    ?>

    <td class="edit firstname “>
    <td class="edit lastname “>
    <td class="edit phone “>

    [Ответить]

    Tico Reply:

    Вместо:
    foreach ($table as $rows)

    Поставить:
    while ($rows = $table->fetch_assoc())

    [Ответить]

    Tico Reply:

    А так, спасибо! То что искал. 🙂

    [Ответить]

    Tico Reply:

    Хм. Прошу извинить. Не работало только в OpenServer. На хостинге работает и при foreach и второй способ.

    [Ответить]

  31. Sergey says: -

    Добрый день! и Все же как устранить проблему с последним блоком? он важен для удобства, но обновление первой ячейки вместе с нужной убивает

    [Ответить]

    Sergey Reply:

    Прошу прощения, сам разобрался, возникла другая проблема, у меня таблицы в которых от 28 до 31 ячейки(графики работы) при заполнении возникла проблема не заполняются ячейки с 13 по 19, подскажите в чем проблема, спасибо

    [Ответить]

    Quato Reply:

    Приведите пример кода, или постучитесь в скайп. Контакты на странице контактов.

    [Ответить]

  32. Ivan says: -

    Добрый день!
    Можно ли мне полные исходники?
    navumov.ivan@yandex.ru

    [Ответить]

  33. Tico says: -

    Еще один момент.

    Не отрабатывает 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(){

    [Ответить]

Leave A Reply