Editarea browser-tabel MySQL

Utilizatorul ajunge la browser-ul toate tabel MySQL imediat ca o foaie de lucru Excel, și poate edita direct orice celulă vizibile (de asemenea, în Excel'e sau alte foi de calcul).

Declarația problemei

Sarcina este împărțită în două părți: 1) pentru a face disponibile pentru editarea conținutului celulei selectate; 2) trimite conținutul modificat la server, fără a supraîncărca pagina (deoarece poate fi destul de mare). Atunci când abordarea prima parte a problemei crezut mai întâi orice dezvoltator, desigur, ar fi: „De ce nu aduce întreaga masă la o dată sub formă de elemente de intrare și textarea»? La o primă aproximare, poate am putea. Dar există unele dificultăți: a) se pune întrebarea dacă este necesar să se facă tot textul în elementele editabile vizibile fără a derula (și, dacă este necesar, cum)? b) Firefox nostru preferat nu-i place un număr mare de elemente care se pot modifica pe o singură pagină (începe să încetinească vizibil în jos și chiar nervos). Prin urmare, prima parte, am decis să-și retragă întregul tabel „așa cum este“, în text simplu (sau, mai degrabă, HTML), și pune la dispoziție pentru editarea textului, la cererea utilizatorului (semnal) de celule.

Atunci când alegeți o astfel de strategie (acces „dinamic“ la textul), de asemenea, există două soluții posibile: 1a) a înlocui conținutul unei celule în elementul textarea și plasați textul în elementul direct în interiorul celulei; 1b) pentru a crea un „pop-up“ element de textarea undeva în apropiere, în imediata apropiere a celulei. Am ales a doua opțiune, deoarece este mult mai versatil - convenabil afișate în totalitate (dacă este posibil, fără a derula), tot textul și controale editabil; acestea trebuie să fie de cel puțin două: butonul „Save“ și butonul „Close“ (și, în mod ideal, chiar mai mult). In interiorul celulei, face textul la dispoziție, desigur, foarte tentant. „Close“ (refuz de la editare), în acest caz poate fi, de exemplu, pentru o Escape cheie „naturală“. Dar cum să imite pe butonul „Salvați“? Enter nu se va face, după cum poate fi necesar doar pentru a rupe o linie de text. Ctrl + Enter, evident, nu pentru toți utilizatorii (ar trebui să fie predate), și poate fi un motiv sau altul trebuie să browser-ul (și nu va permite să intercepteze o comandă rapidă de tastatură). În general, este necesar să fie cheia pentru a face (cel puțin pentru pierderea de focalizare în care puteți salva, de asemenea, textul). Cu toate că, în viitor, vom lucra ceva - doare idee prea privelkatelna.

În rezolvarea problemei 2) - pentru a comunica cu serverul, fără a supraîncărca pagina - vine în minte super-Duper-Ajax, cu care atât de multe purtat unii dezvoltatori entuziaști. Aceeași super-Duper-Ajax, care este de fapt oricine pe. p nu este necesară, deoarece se poate înlocui complet vechiul iframe kondovy. Cândva, înainte de filmare a filmului „și nava să navigheze“ unele Wed. e britanic Fellini oferit să lucreze pe o navă reală. „Skoko, galop?“ - a întrebat Fellini, iar britanicii trimise la același loc am trimis Ajax. Iar la sfârșitul filmului el a arătat modul în care un adevărat maestru poate face un film fără o navă „reală“.

Ne-ar, desigur, fără ezitare, a ales pentru a rezolva favorit scriptRequest nostru (). dar el poate comunica doar cu serverul folosind metoda GET (și, prin urmare, nu pot trimite mesaje text de dimensiuni mari). Prin urmare, pentru a nu supraîncărca pagina de mare, am decis să deschidă celula pentru editarea o fereastră nouă (cu pagina ma-Vermillion), chiar în mijlocul ferestrelor vechi. Aceasta este încă iframe. Dezvoltatorii precum Ajax, în special, pentru faptul că nu pot fi monitorizate în conformitate cu punerea în aplicare de fond http-cerere, iar în cazul în care cererea în pretenții, se raportează la utilizator (sau să efectueze alte acțiuni). Arătăm că atunci când se utilizează iframe Toate acestea se poate face cu ușurință.

Diagrama schematică a editării de masă într-un browser

Accesul la document în iFrame

Ultimul cadru de proprietate (documentul) nu este ne-a întâlnit în orice browser, în cazul în care nu a fost deja contentWindow. Dar, după testarea ipotezelor noastre la Google, ne-am decis pe acest design doar în cazul în care a adăugat prea (poate avea nevoie pentru versiunile mai vechi ale unor IE).

Pentru „pop-up» pagina iframe

Ne-am cam complicat viața lor, abandonarea iframe Încorporarea într-o celulă de tabel editabil. Acum, el trebuie într-un fel de poziționare foarte precisă, este posibil să nu ascundă celula, și el a putut vedea întreg. Dar, totuși, este de dorit să facă dimensiunea numai conținutul. Aceasta este dimensiunea unui iframe trebuie să fie de așa natură încât documentul său ar putea fi văzut fără a derula (dar nu mai mult). După ce am primit elementul iframe (editframe) și documentul extern legat de acest element (editdoc), pentru a calcula dimensiunea nu a fost dificil. Numai este necesar ca, la momentul de calcul, elementul este vizibil pe pagina (aceasta proprietate style.display ar trebui să fie „none“):

După ce a constatat din stânga-sus (poziția de la începutul documentului) editat de celule și înălțimea (offsetHeight) și cunoscând înălțimea formei de editare (inclus în iframe), puteți lua o decizie, deasupra sau dedesubtul celulei pentru a arăta forma. Aceasta este aritmetică. Pentru ea, cu toate acestea, veți avea nevoie (aproape uitat!) Cu toate acestea, distanța până la marginea superioară a părții vizibile (nu toate) a documentului. Apoi, să nu se gândească la oameni pentru o lungă perioadă de timp, nu am folosit marginea elementului (celule), iar locul în care se dă clic pe mouse-ul. Pentru că (proprietatea) este aceeași în toate browserele cunoscute - această sobytiyaevent.clientY proprietate.

Schema generală de a găsi cadrul spațiului a fost astfel:

Măsurați distanța de la clic pentru a plasa marginea de sus a ferestrei.
În cazul în care înălțimea se potrivesc formularul nostru de editare iframe, pune-l pe 20px deasupra marginii superioare a celulei.
Dacă nu se potrivesc, am pus-o pe 20px sub marginea inferioară a celulei.

Și ai nevoie pentru a pune, nu folosind distanța de la marginea cutiei, iar din partea de sus a întregului document (dacă este vizibil sau nu); doar pentru acest scop și este necesar să se calculeze înălțimea absolută a elementului de pe pagina. Complet funcția noastră de cod showframe () se află în fișierul tableedit.js.

Dacă tabelul modificat va restrânge în mijlocul ecranului cu câmpuri mari, un pop-up de editare formă este deplasată puternic spre stânga. Prin urmare, corectă, desigur, să coordoneze stânga forma prea vychilyat getOffsetSum funcția (). Ei bine, l-am lăsat ca este pentru claritate (pentru a simți diferența).

Unele caracteristici ale interogări SQL

edita formular este întotdeauna trimite date către server atunci când apăsați pe butonul de trimitere (îl avem „Salvați în“). Și pe serverul PHP script este și trimite interogarea bazei de date SQL. Ceva de genul „înlocuiți textul câmpului în rândul r f trimis la utilizator»: actualizare `$ table` set` $ = domeniul sanitar '$ text' în cazul în care` id` = '$ id'. Cererea este considerat (ne) succede în cazul în care datele din tabel au fost schimbate. Dar serverul MySQL nu se va schimba datele din tabel în cazul în care:

utilizator a trimis la server, fără nici o modificare a textului;
utilizatorul a schimbat doar cazul litere;
Numai utilizatorul a schimbat etichetele HTML.

În toate aceste cazuri, actualizarea nu se va întâmpla, iar forma de editare va rămâne agățat pe pagina. Ultimul punct este, cu toate acestea, un MySQL-server este irelevant (se execută PHP). caz Scrisoare - este configurabil (în principiu, este posibil să se schimbe interogarea numai scrierea cu majuscule pe SQL server), administratorii de baze de date se poate schimba această opțiune, la discreția sa.