Ajax asztalok és táblázatos adatok szerkesztése

Helló, kedves olvasó, ma egy kicsit beszélünk az adatok közbeiktatott szerkesztéséről táblázatok nélkül az oldal újratöltése nélkül (inline edit ajax).

Mint mondtam, szembesültem a táblázatok adatainak szerkesztésével. Egy rövid keresés után megtaláltam a megfelelő opciót, amely nem használ további plugineket és könyvtárakat, mint a jQuery. És ezek valójában egy autó és egy teljes kosár, és mindegyiknek megvannak a maga előnyei és hátrányai. Az egyik legkedveltebb a funkcionális - jqGrid, de erről beszélünk legközelebb.

Képzeld el, hogy az adatok alapértelmezés szerint az adatbázisban tárolódnak. Példámban ez lesz a MySql, frissíteni fogják a JS-t és a PHP-t az AJAX technológiával.

Így azt fogjuk megvitatni, hogy mi van, és amit akarunk, a végére értünk

A PHP-ben generált adatok táblázata, adatbázisunk lekérdezése.
Tegyük fel, hogy két asztalunk van: az ügyfelek és a munkavállalók,
A tábláink mezõi nem igazán számítanak, de vegyük például:

Képes szerkeszteni az összes táblaterületet az oldal újratöltése nélkül.

Mi erre van szükségünk?

Kezdjük a feladatunkat

Először is a szükséges könyvtárat (jQuery) csatlakoztatjuk a címkéken . Általában a legfrissebb verziót használom, hogy naprakész ismeretekkel rendelkezzenek a csodálatos könyvtár lehetőségeiről, és összekapcsolják a minisített változatát a Google Hosted Library repositoryjával. Jelen írásakor, az aktuális 1.9.1-es verzióban csatlakozik.

Ezután hozzárendeljük az egyedi azonosítót táblánkhoz. amely megfelel az adatbázisban szereplő táblázatnak (ez fontos!).
Minden sort egy ciklussal adunk ki, és hozzárendeljük az osztály-szerkesztést a sorokhoz. Egy oszlopnév oszlop az adatbázisban és egy numerikus osztály egy sor azonosítóval az adatbázisban.

[Js]
// amikor egy szerkesztőosztálybeli táblázatban lévő cellára kattint
$ ('Td.edit') Kattintson a (function () // találja az elem belsejében egy elemet az ajax osztályba, és illessze be az értéket a bemenet helyett
$ ('.Ajax') .Html ($ ('.Ajax bemenet') Val ());
/ / töröl minden ajax osztályt
$ ('.Ajax') RemoveClass ('ajax');
// Adja meg az ajax osztályt a préselt cellához
$ (ez) .addClass ('ajax');
// a cellában belül hozza létre a bemenetet és helyezze be a szöveget a cellából
$ (this) .html ('„);
// állítsa a hangsúlyt a létrehozott elemre
$ ('# Editbox') Focus ();
>);
[/ js]

Tehát megjelenik a szövegszerkesztés formája, mit fogunk vele csinálni?
Most meg kell mentenünk a bemeneti adatokat valamilyen eseményen, egy példát adok az adatok mentésére, amikor megnyomom az Enter billentyűt.

[Js]
// határozza meg a gomb megnyomásával a billentyűzetet
$ ('Td.edit') Keydown (function (event) // értékelje az osztály értékét és oszd meg egy tömbre
// ennek eredményeképpen kapunk egy ilyen tömböt - arr [0] = szerkesztés, arr [1] = oszlopnév, arr [2] = a vonal azonosítója
arr = $ (ezt) .attr ('osztály') split ("");
// ellenőrizze, hogy melyik gombot megnyomta, és ha megnyomta az Enter billentyűt (kód: 13)
ha (event.which == 13)
// adja meg annak az asztalnak a nevét, amelyben változtatni fogunk
var table = $ ('táblázat'). attr ('id');
// hajtsa végre az ajax kérelmet a POST módszerrel
$ .ajax ( // a file update_cell.php fájlhoz
url: "update_cell.php",
// hozzon létre egy karakterláncot a kérés elküldéséhez
// value = beírt érték
// id = sor száma
// field = oszlopnév
// table = a tényleges táblázat neve
= "+ arr [1] +" field = "+ arr [1] +" table = "+ tábla:" value = "+ $ ('.ajax bemenet'
// ha a szkript sikeresen végrehajtódik, műveleteket hajtunk végre
siker: function (data) // találjon bemenetet egy elemen belül az ajax osztályban, és adja be az értékét a bemenet helyett
$ ('.Ajax') .Html ($ ('.Ajax bemenet') Val ());
// törölje az ajax osztályt
$ ('.Ajax') RemoveClass ('ajax');
>>);
>>);
[/ js]

Szintén a kényelem érdekében néhány sornyi kódot adunk hozzá, amelyek eltávolítják a bevitelt, amikor a beviteli mezőn kívülre nyomják, mert előfordulhat, hogy nem szeretnénk menteni a bevitt adatokat.

[Js]
Élő ('elmosódott', függvény () $ ('.Ajax') .Html ($ ('.Ajax bemenet') Val ());
$ ('.Ajax') RemoveClass ('ajax');
>);
[/ js]

A fogadott adatokat csak a update_cell.php fájlban tudja feldolgozni. minden szükséges változó, legyen az önálló munkája.
Így egy kompakt, univerzális szkriptet kapunk, amely a táblázatok gyors szerkesztését szolgálja.

Ha valakinek szüksége van a forgatókönyv teljes verziójára - írni komentyre.

A jQuery 1.9.1 verziójában a .live módszer le van tiltva. Ehelyett a .on módszer használatához, a szintaxis összehasonlításához:

[Js]
$ (Document) .ON ( 'életlenség', '#editbox', funkció () $ ( 'Ajax.') Html ($ ( 'Ajax input.') Val ()) ..;
$ ('.Ajax') RemoveClass ('ajax');
>);
[/ js]