Привіт тобі дорогий читачу, сьогодні ми трохи поговоримо про інлайновом редагуванні даних в таблицях без перезавантаження сторінки (inline edit ajax).
Як я вже сказав, переді мною постало завдання редагування даних в таблицях. Після нетривалих пошуків знайшов підходящий варіант, який не використовує додаткові плагіни і бібліотеки крім самої jQuery. А таких насправді вагон і цілий візок і у кожного є свої переваги і недоліки. Один з найбільш непоганих по функціоналу - jqGrid, але про нього ми поговоримо наступного разу.
Уявімо, що наші дані, за замовчуванням, зберігаються в базі. У моєму прикладі це буде MySql, оновлюватися вони будуть за допомогою JS і PHP за технологією AJAX.
Отже обговоримо те, що у нас є, і те, що ми хочемо отримає в результаті
Таблиця з даними, які генеруються на PHP, запитом з нашої бази даних.
Припустимо у нас є дві таблиці: клієнти (clients) і співробітники (workers)
Поля наших таблиць насправді неважливо які, але візьмемо для прикладу такі:
Можливість редагування всіх полів всіх таблиць без перезавантаження сторінки.
Що нам для цього потрібно?
Приступимо до виконання нашого завдання
Насамперед підключаємо необхідну бібліотеку (jQuery) всередині тегів
. Я зазвичай використовую останню версію, щоб підтримувати актуальність знань про можливості цієї чудно бібліотеки і підключаю її мініфіцірованную версію з репозиторію Google Hosted Library. На момент написання статті актуальна версія 1.9.1, її і підключаємо.Далі присвоюємо нашій таблиці унікальний ідентифікатор id. який відповідає назві таблиці в базі (це важливо!).
Виводимо всі рядки циклом і присвоюємо рядках клас - edit. клас з назвою стовпця в БД і числовий клас з ідентифікатором рядки в БД.
[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 ( '');
// встановлюємо фокус на створеному елементі
$ ( '# 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 (
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. всі необхідні змінні у Вас є, нехай це будемо вашої самостійною роботою.
Таким чином ми отримуємо компактний, універсальний скрипт для швидкого редагування будь-яких табличних даних.
Якщо кому потрібні будуть повні вихідні мого варіанту скрипта - пишіть в коменти.
У версії jQuery 1.9.1 відключений метод .live. Замість нього потрібно використовувати метод .on, порівняйте синтаксис самі:
[Js]
$ (Document) .on ( 'blur', '#editbox', function () $ ( '. Ajax'). Html ($ ( '. Ajax input'). Val ());
$ ( '. Ajax'). RemoveClass ( 'ajax');
>);
[/ Js]