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
Похожие записи
Подскажите, что нужно изменить если у меня id а Number?
Скачал исходники, ввёл свои данные, прочитал предыдущие комментарии и внёс необходимые изменения. Данные из базы выводятся, редактировать ячейки можно, но при обновлении страницы введённые данные исчезают. Значит в базу изменения не попали? В чём может быть дело? Необходимо производить какие действия с файлом update_cell.php? Или достаточно его наличия? Помогите, пожалуйста!
Спасибо тем кто дает исходники
Не могли бы вы выслать мне исходники по корректировке БД. Как раз этим сейчас занимаюсь. Благодарю.
И мне пожалуйста, очень бы не помешали
Добрый день!
спасибо за обучалку
данные из БД вывел
а дальше затупаю
покажите исходник пожалуйста
Можно исходники плиз
Спасибо за статтю!!
Но можно повторно дать исходники, сcылка недоступна
Добрый день! Спасибо за информацию, очень информативно даже для чайников в js.
Останавливаюсь на моменте добавления в базу, можно исходники, пожалуйста.
исходники в студию, ссылка не работает
Здравствуйте. Можно ссылку на исходник?
Спасибо большое!
Здравствуйте, если ещё актуально, не могли бы вы выслать исходники данного решения, очень был бы благодарен.
Ссылку восстановил, можете скачать на странице примера.
Добрый день. Можно исходники получить?
[email protected]
По ссылке в статье исходники доступны для скачивания
Доброе время суток!
Спасибо за пример.
Все работает.
Вопрос: а как сделать чтобы при нажатии ЛКМ значение инпута выделялось?
Что бы сразу можно было ввести новое значение вместо старого, а не — сначала удаляем , а потом вводим новое значение.
С уважением.
Класс!
Но можно исходник для вставки данных в базу тоже получить?
В архиве ведь и .sql файл присутствует.