Salutări draga cititor, astăzi vorbim puțin despre datele inlaynovom de editare în tabele fără a reîncărca pagina (inline edita ajax).
După cum am spus, m-am confruntat cu sarcina editării datelor în tabele. După o scurtă căutare, am găsit o opțiune potrivită care nu utilizează pluginuri și alte biblioteci suplimentare decât jQuery. Și acestea sunt de fapt o mașină și un cărucior întreg și fiecare are avantaje și dezavantaje. Unul dintre cele mai bune pe funcțional - jqGrid, dar despre asta vom vorbi data viitoare.
Imaginați-vă că datele noastre, în mod implicit, sunt stocate în baza de date. În exemplul meu va fi MySql, acestea vor fi actualizate cu JS și PHP folosind tehnologia AJAX.
Așa că vom discuta despre ceea ce avem și ceea ce ne dorim va ajunge în cele din urmă
Tabele cu date generate în PHP, o interogare din baza noastră de date.
Să presupunem că avem două mese: clienți și angajați,
Câmpurile meselor noastre nu contează deloc, ci să luăm de exemplu:
Abilitatea de a edita toate câmpurile din toate tabelele fără a reîncărca pagina.
De ce avem nevoie de asta?
Să începem sarcina noastră
Mai întâi, conectăm biblioteca necesară (jQuery) în interiorul etichetelor
. Eu folosesc de obicei, cea mai recentă versiune pentru a menține relevanța cunoștințelor despre posibilitățile de această bibliotecă minunat și conectați-o versiune minifitsirovannuyu a găzduit de Google depozit Biblioteca. La momentul scrierii acestui articol, versiunea curentă 1.9.1, și conectați-l.Apoi, atribuim ID-ul nostru unic la masa noastră. care corespunde numelui tabelului din baza de date (acest lucru este important!).
Extinem toate liniile cu un ciclu și alocăm ediției de clasă rândurilor. O clasă cu numele unei coloane în baza de date și o clasă numerică cu un identificator de rând în baza de date.
[Js]
// când faceți clic pe o celulă dintr-un tabel cu clasa de editare
$ ('Td.edit') Faceți clic pe (funcția () // găsiți intrarea într-un element cu clasa ajax și inserați valoarea sa în loc de intrare
$ ('Ajax') Html ($ ('Intrare Ajax') Val ());
// șterge toate clasele ajax
$ ('Ajax') .Clasa de eliminare ('ajax');
// Alocați clase ajax celulei presate
$ (acest) .addClass ("ajax");
// în interiorul celulei creați intrarea și introduceți textul din celulă în ea
$ (acest) .html ('„);
// setați focalizarea asupra elementului creat
$ ('# Editbox'). Focus ();
>);
[/ js]
Deci, a apărut formularul de editare a textului, ce vom face cu el?
Acum trebuie să salvăm datele de intrare la un eveniment, voi da un exemplu de salvare a datelor când apăs pe Enter.
[Js]
// definiți apăsarea de pe tastatură
$ ('Td.edit') Keydown (funcția (event) // obține valoarea clasei și împărțiți-o într-o matrice
// ca rezultat vom obține o astfel de matrice - arr [0] = edita, arr [1] = numele coloanei, arr [2] = id al liniei
arr = $ (acest) .attr ("clasă"); împărțit ("");
// verificați ce tastă a fost apăsată și dacă a fost apăsată tasta Enter (cod 13)
dacă (event.which == 13)
// obțineți numele tabelului în care vom face modificări
tabelul var = $ ('table'). attr ('id');
// executați solicitarea ajax utilizând metoda POST
$ .ajax (
url: "update_cell.php",
// creați un șir pentru a trimite solicitarea
// value = valoarea introdusă
// id = numărul liniei
// field = numele coloanei
// table = numele tabelului real
date: "valoare =" + $ ("intrare ajax") val () + "id =" + arr [2] + "
// când scriptul este executat cu succes, efectuăm acțiuni
succes: funcția (data) // găsiți intrarea într-un element cu clasa ajax și inserați valoarea sa în loc de intrare
$ ('Ajax') Html ($ ('Intrare Ajax') Val ());
// ștergeți clasa ajax
$ ('Ajax') .Clasa de eliminare ('ajax');
>>);
>>);
[/ js]
De asemenea, pentru comoditate, adăugăm câteva linii de cod care ne elimină intrarea când apăsăm în afara câmpului de introducere, deoarece este posibil să nu doriți să salvați informațiile introduse.
[Js]
$ ('# Editbox') Live ('blur', function () $ ('Ajax').
$ ('Ajax') .Clasa de eliminare ('ajax');
>);
[/ js]
Puteți procesa numai datele primite în fișierul update_cell.php. toate variabilele pe care le aveți, lăsați-l să fie munca voastră independentă.
Deci, avem un script compact, universal, pentru editarea rapidă a tuturor datelor de tabel.
Dacă cineva are nevoie de sursa completă a versiunii mele de script - scrie în komenty.
În versiunea jQuery 1.9.1, metoda .live este dezactivată. În schimb, trebuie să utilizați metoda .on, comparați singuri sintaxa:
[Js]
$ (document) .on ('blur', '#editbox', funcția () $ ('. ajax'). html ($ ('ajax input').
$ ('Ajax') .Clasa de eliminare ('ajax');
>);
[/ js]