Szekrényszervező: 13 lépés

2024 Szerző: John Day | [email protected]. Utoljára módosítva: 2024-01-30 09:41

Akár ruhavásárlásról van szó, akár arról, hogy mindig kölcsönkérjenek bármilyen tárgyat, van, amikor azt szeretné, ha bárhonnan bekukucskálhatna a szekrényébe, hogy megnézze, van -e valami hasonló.

Ez egyablakos, és sok más célra is kiterjedt. A Saját szekrényszervező a Google Táblázatok mint SQL adatbázis, a Google Scripts az adatok kezelésére és a Google WebApp kombinációja az adatok portáljára. A végfelhasználó láthatja az összes elemet, szűrhet valami konkrétat, megjelölheti a kölcsönzött tárgyakat, kezelheti a mosodáját, és megakadályozhatja, hogy anyja minden évben ugyanazt az inget vegye meg Önnek*.

(*Nincs garancia. Az anyák megveszik, amit akarnak, akár szüksége van rá, akár nem.)

Ha gyors pillantást vet a weboldal kialakítására a fenti képen, ismerős elrendezést ismerhet fel. A ruhatár -szervező úgy van beállítva, mint minden szokásos ruházati webhely. Az osztályok és a mellékelt szűrők által felosztva ez a felület ismeri a funkcionalitást az alkalmi felhasználók számára. ÉS használata egyszerű.

1. lépés: A saját másolat beállítása

Kezdjük azzal, hogy elkészítjük saját példányunkat a projektről.

Google Drive

A fenti linkre kattintva eljuthat az alkalmazás jelenlegi verziójához.

Ebben a mappában 3 elemet láthat: egy Google Űrlapot, egy Google Táblázatot és egy mappát.

Kattintson a jobb gombbal a Google Táblázatra, és kattintson a Másolat készítése lehetőségre.

Állítsa a másolat helyét saját meghajtójára.

A dokumentum másolása után a Google Űrlap automatikusan létrejön ugyanabban a mappában, ahová áthelyezte a Google Táblázatot.

A mappa létrehozásához (ez szükséges az elemfotók feltöltésének gyűjtéséhez), kattintson a másolt Google Űrlapra, és megjelenik egy üzenet, amely arra kéri, hogy állítsa vissza a mappa helyét a feltöltésekhez.

Most megvan a dokumentum egy példánya, amelyet saját maga dolgozhat fel!

2. lépés: A Google űrlap áttekintése

Most, hogy megvan az alkalmazás saját verziója, nézzünk körül.

Google Űrlapja sokféle elem elfogadására van beállítva. Az ingek, nadrágok, ruhák és cipők azonban különböző méretkorlátozásokkal rendelkeznek. Ezért ennek az űrlapnak egy másik szakasza kerül kitöltésre annak a részlegnek az alapján, amely alatt a tételt benyújtja. A (Férfi cikk) sablonomban 5 különböző méretkategóriát hoztam létre. (Női cikkekért kattintson ide, még sok más van).

Minden méretezési rész alatt egyedi címet állítottam be minden egyes gyűjteni kívánt paraméterhez. Nem szeretnénk, ha adatbázisunkban több oszlop szerepelne a "Méret" névvel, különben nem tudnánk meghatározni, hogy ez a méret melyik ruházati típusra vonatkozik.

Minden rész végén a felhasználó az űrlap utolsó részéhez, a Helyhez kerül. Én személy szerint úgy döntöttem, hogy hozzáadom a Helyszínt, hogy meghatározzam a vegytisztító, a mosoda, a helyükön lévő tárgyakat, vagy azokat az elemeket, amelyekben kölcsönadtam egy barátomnak. Ez lehetővé teszi, hogy szervezett legyek, és soha ne érezzem úgy, hogy valahol hiányzik egy ruhadarab.

Amint a kezdetektől említettem, ez a projekt millió különböző módon bővíthető. Használhatja leltárhoz, pontosabb szervezési eszközhöz vagy ruhák szigorú kölcsönzéséhez. A hozzáadható mezők és szakaszok végtelenek, ezért ne érezze magát korlátozva az űrlapom tartalmának. (A női cikkekért kattintson ide)

Mielőtt néhány saját elemét feltöltené, folytassuk a következő lépéssel, hogy biztosítsuk a megfelelő beküldést.

3. lépés: Google Scripts: (Szerver Code.gs) Először nézze meg az adatokat és a kódot

A Google Táblázatok dokumentumra kattintva számos adatoszlopot láthat (és néhány sort, amelyeket bemutatás céljából hagytak be). Az űrlapküldés során egyes szakaszok kihagyásra kerülnek, ez nyilvánvaló az egyes oszlopok hiányzó adataiból. De további oszlopokat, például az azonosítót, az alapértelmezett helyet, a ki és a frissített elemeket adtunk hozzá, hogy jobban nyomon lehessen követni az elemek szerkesztését.

Az űrlap elküldésekor létrehozott egy azonosítómezőt, amely lehetővé teszi az egyedi azonosító megadását az adatbázis bejárásakor. Ennek a mezőnek a létrehozásához nézzük meg a Szkriptszerkesztőt az Eszközök> Szkriptszerkesztő elemre kattintva.

A Script Editor megnyitásakor 8 dokumentumot fog látni az új ablak oldalsávján. Ezek a dokumentumok segítenek a háttér-folyamat, az előlapi kijelzők és a kezelőfelület működésének vezérlésében. Beugrunk mindegyikbe (ha maradunk), de most kattintsunk a szerverkódra.

A Server Code.gs fájlban számos funkció található:

onSubmit (e), onOpen (), doGet (), include (fileName), openApplication (), openLaundryApp (), changeValueOnSubmit (e), setIDOnSubmit (e)

onSubmit (e) - Ez a funkció lesz konfigurálva, mint az első funkció, amelyet a Google űrlap elküldésekor kell futtatni. Más funkciókat is elhelyezhet ezen a függvényen belül, hogy lehetővé tegye számos különböző folyamat végrehajtását.

onOpen (e) - Ezt a funkciót a Google Táblázatok megnyitásakor hívják meg. Új menüopciót tölt be, amely lehetővé teszi az alkalmazás linkjeinek és nézeteinek gyors elérését.

doGet ()- Ezt a funkciót a Web App címhívás hívja meg. Amikor a felhasználó a közzétett webalkalmazásban böngészik, ez a kód megmondja az oldalnak, hogy mit kell megjeleníteni. Ebben az esetben az Application.html dokumentumról van szó.

include (fájlnév) - Ezt a funkciót a HTML oldalakon belül más dokumentumok olvasására és azok tartalmának megfelelő HTML formátumba való beillesztésére használják egy másik oldalon belül. CSS.html és JS.html fájljainkhoz használjuk.

openApplication () és openLaundryApp () - Ezek a funkciók tartalmazzák azt a kódot, amelyet akkor kell futtatni, ha a felhasználó rákattint a Google Lap eszköztárához hozzáadott menügombokra.

changeValueOnSubmit (e) és setIDOnSubmit (e)- Ezeket a funkciókat fogjuk megvizsgálni. Ők felelősek bizonyos mezők alapértelmezett értékekkel történő frissítéséért az űrlap kezdeti beküldésekor.

4. lépés: Az OnFormSubmit engedélyezése

Ezt a két függvényt, a changeValueOnSubmit (e) és a setIDOnSubmit (e), össze kell kapcsolni az űrlap elküldésével kapcsolatos felhasználói művelettel. Ehhez engedélyeznünk kell a Triggert.

A trigger aktiválásához kattintson a Szerkesztés> Aktuális projekt triggerjei lehetőségre. Ezzel megnyílik a Google Developer Hub.

A trigger műszerfal jobb alsó sarkában található egy gomb. Kattints ide.

Most beállítjuk a függvényt, hogy az űrlap beküldésekor fusson. Esetünkben több függvényem van (changeValueOnSubmit (e) és setIDOnSubmit (e)), amelyeket egy onSubmit () függvénybe helyezek, így csak 1 trigger -t kell beállítanom. Ezért az onSubmit () lehetőséget választjuk, és beállítjuk, hogy ez az aktiváló fusson a beküldési űrlapon.

Van egy működő űrlapunk, amely kitölti a Google Táblázatot egyedi azonosítókkal, és beállítja az alapértelmezett értékeket.

Mostantól feltöltheti saját elemeit a Google Űrlap használatával. (Ez nem szükséges a folytatáshoz, mivel már vannak demo értékek.) Most belemerülünk a felhasználói felületbe.

5. lépés: A felhasználói felület beállítása

ÜDVÖZÖLJÜK! Végre elérkeztünk ahhoz a részhez, amiért jöttél, a felhasználói felülethez !!!!

Első ránézésre itt nincs semmi. Még nem telefonáltunk. Hogy gyorsabban betöltsem az oldalt, úgy döntöttem, hogy nem sújtom az első oldalt MINDEN elemével, és lehetővé teszem, hogy gyorsabban rákattints arra, amit látni szeretnél. Mivel ez a helyzet, nincsenek elemek a fő tartalommezőben, és nincsenek szűrők az oldalsávon. Kattintson az Összes gombra, hogy megnézze, mi található az adatbázisunkban.

Most az adatbázisunk minden elemét betöltöttük a fő tartalommezőbe. Látni fogja a képeket, azonosító számokat, színeket, méreteket és helyeket. A helymező itt frissíthető! Ha úgy dönt, hogy kölcsönadja az elemet, akkor válassza ki ezt a lehetőséget, akkor elhelyezheti a szekrényében, a komódjában vagy a mosodában.

Oldalsávunkban pedig minden lehetséges mező megtalálható az új lekérdezésünkben szereplő ruházati cikkekhez. Képzelje csak el, hogy ezen az oldalsávon 20 különböző méretezési lehetőség áll rendelkezésre, ez nem lenne túl hatékony, ezért szűkítsük le a keresést a Tartozékok elemre kattintva.

Most, hogy betöltöttük a tartozékokat, nézzük meg az oldalsávot. Csak 3 mezőre módosult, mivel ezek a paraméterek érvényesek a lekérdezés minden elemére. Csinálok szín szerint rendezést. A színre kattintva egy legördülő ablak jelenik meg. Itt beírhatom a kívánt színt, majd kiválaszthatom, vagy ha azonnal látom az opciómat, csak rákattintok. Erre a bemutatóra a vöröset választottam. Kattintson az oldalsáv alján található Szűrő alkalmazása gombra, és a fő tartalom frissül, és megmutatja azokat az elemeket, amelyek színparamétereként a piros szín van beállítva.

Korábban említettem, hogy ez az adatbázis segít a kölcsönben és a mosodában lévő tételeim kezelésében. Egy kicsit megkönnyítem, ahelyett, hogy manuálisan rákattintottam volna a főoldalon található összes legördülő helyre, létrehoztam a mosodai módot. Térjen vissza a Google Táblázat oldalára, és az Alkalmazásnézet alatt megjelenik a Mosodai mód. Ez az opció előhív egy kisebb modált, amely csak a Mosoda helyével rendelkező elemeket jeleníti meg. Most már ezeket az elemeket meg tudom jelölni alapértelmezettként, ami visszahelyezi azokat a helyükre, ahol általában tárolják.

7. lépés: A projekt befejeződött

GRATULA

Azoknak, akik csak működő adatbázist szeretnének kezelni a tételeihez, üdvözöljük az online szervezőben. Azok számára, akik kíváncsiak az alkalmazás mögötti kódra. Maradj, amíg lebontom.

*A teszt elemeket szabadon törölheti, miután legalább egy elemét bevitte az adatbázisba. (Később elmagyarázom, ha maradsz.)

8. lépés: 1. lépés: a háttérkód (Server Code.gs)

Korábban megnyitottuk a Server Code.gs fájlt, és gyorsan lefuttattam mindegyik funkciót, mivel azok célja az volt, hogy kiszolgálja az Ön által beállított elemeket, de most lebontjuk néhány funkciót és segédprogramot. hogy ez a kód sikeres legyen.

1) Asztal bejárás:

var ss = SpreadsheetApp.getActiveSpreadsheet (); var sheet = ss.getSheetByName ("Űrlapválaszok 1"); var range = sheet.getRange (1, 1, sheet.getMaxRows ()); var rowNum = range.getLastRow ();

• Ez a kód a Google Táblázat bejárásának alapja. A lapot név szerint hívom, nem szám szerint, hogy a lapok törlése vagy funkció szerinti átrendezése továbbra is megfelelően működjön.
• Ebben a kódban csak a táblázat összes adatának tartományát gyűjtöm.

2) Azonosító hozzárendelése:

var LastID = tartomány.getCell (sorNum-1, 1); var CellValue = Szám (LastID.getValue ()); var ColA = 1; var max = 15; var min = 5; CellValue = CellValue + Math.round ((Math.random ()* (max - min) + min)); e.source.getActiveSheet ().getRange (range.getLastRow (), ColA).setValue (CellValue); changeValueOnSubmit (e);

• Korábban kértem, hogy a demóértékeket hagyják a táblázatban mindaddig, amíg a felhasználó be nem nyújt legalább egy értéket magának. Ennek oka az, hogy az Auto ID generátor az adatbázis utolsó értékére támaszkodik.
• Az utolsó 2. és utolsó sort lekérem, mert az utolsó sor az új értékünk, az 1. oszlop pedig az azonosító érték.
• Ezután véletlenszerűen generálok egy számot 5 és 15 között, és hozzáadom az utolsó értékhez. *
• Végül elhelyezem ezt az értéket az utolsó sor azonosító oszlopában.
• Ezután hívjuk a changeValueOnSubmit (e) függvényt.

* Az 5-15 lehetőséget választottam, hogy lehetővé tegyem a jövőbeni címkézést és a Google Home integrálását, hogy a számok ne legyenek elég közel ahhoz, hogy zavart okozzanak az akasztókon, ruházati címkéken vagy vonalkódokon.

3) URL -érték módosítása:

var DataChange = e.namedValues ["Item Picture"]; var DefaultLocation = e.namedValues ["Hol tartja ezt a ruhadarabot?"]; var ColD = OszlopID _ ("Elemkép") +1; var ColLoc = OszlopID _ ("Alapértelmezett hely")+1; DataChange = DataChange.toString (). csere ("nyitott?", "uc? export = view &"); e.source.getActiveSheet ().getRange (e.range.rowStart, ColD).setValue (DataChange); e.source.getActiveSheet ().getRange (e.range.rowStart, ColLoc).setValue (DefaultLocation);

• Amikor egy fotót Google űrlapon keresztül küld be, a Google Táblázatokba beillesztett URL egy link a tényleges dokumentumhoz. Esetünkben, amikor HTML oldalt készítünk, azt akarjuk, hogy a link csak a kép legyen.
• A "nyitott" megváltoztatásával? az "uc? export = view &" URL -cím egy részét, helyette létrehoztunk egy linket a képre.
• Ezt az új értéket ismét az aktuális Tételkép hivatkozás helyére helyezzük.
• Az elem "Alapértelmezett helyét" és "Jelenlegi helyét" is ugyanazokra állítom be az adatbázisban. Ez segít, ha megpróbálom használni a mosodai módomat.

• A következő oldalon belemerülünk ebbe, de ez az első pillantásunk az általam létrehozott ColumnID_ () függvényre.

  Ez a függvény az Oszlopnevek felhasználásával fordítja át az oszlop egész számává, ami hasznos a tartományhíváshoz, amelyhez nem oszlopszám, hanem oszlopszám szükséges

4) SpreadsheetApp.getUI ()

• A második képen láthatja a SpreadsheetApp.getUI () használatát, ahogy az Eszköztár menü kiegészítését hozta létre a Google Táblázatban.
• A.getUI () függvény elősegíti a modális előugró ablak létrehozását is, amelyet Mosoda módban használnak, és gyors linkként a webhely felületére.

5) HTMLService

• A kódban kétféle HTML -szolgáltatás használható: sablon és HTMLOutput
• A sablon lehetővé teszi a kód beillesztését a HTML kódba, így a szerverről érkező információk feltölthetők az oldal meghívásakor.
• A HTML kimenet egyszerű HTML oldalakat jelenít meg.
• Rendelkezünk az include () metódussal is, amely lehetővé teszi számunkra, hogy több HTML -fájlt hozzunk létre, és egyesítsük őket egy sablonos HTML -fájlban úgy, hogy a fájl tartalmát HTML -formátumban, nem pedig karakterláncként adjuk vissza.

Mellékeltem egy olyan dokumentumot, amely a Google App Scripts Documentation -hoz hasonlóan készült, hogy megismerkedjen a forráskód és a funkcionalitás magyarázatával a Google Apps alkalmazásban.

9. lépés: 2. lépés: A háttér-kód 2. része (szerverhívások.gs)

Most be kell írnunk a szerverhívásokat. Ezeket a funkciókat elsősorban a HTML JavaScript -ben használják, ezért elkülönítették azokat a kódtól, amelyet elsősorban a hátsó részen használnak, és amelyek a Server Code.gs fájlban találhatók.

1. kép) Globális változók:

2. kép) Elemek lekérése:

3. kép) fetchItemsQry

4. kép) szűrőelemek

5. kép) fetchFiltersWithQry

6. kép) ColumnID és CacheCalls

Mindegyikről annyi mindenről lehet beszélni. Annak érdekében, hogy lebonthassam a kódot és elmagyarázhassam, mi történik, szükségem volt egy kicsit több gépelési helyre. A csatolt dokumentum a ServerCalls.gs kódbontását tartalmazza

Ez a dokumentum úgy van beállítva, mint a Google App Scripts Documentation, sőt hivatkozásokat is készít hasonló objektumokra.

10. lépés: 3. lépés: a HTML -kód (Application.html)

A HTML -kód nagyon boldogtalan lesz az Instructable párbeszédpaneljében. Ezért kérjük, kövesse a fenti képeket.

1) Az Application.html oldal fejlécében létrehozunk egy címet, és felhívjuk a CSS.html oldal betöltését.

*Mint egy sablonos HTML -oldal, további kódokat adhatunk ehhez a dokumentumhoz anélkül, hogy az aktuális képernyőt megzavarnánk, a korábban említett include (pageName) módszer használatával, amely megtalálható a Server Code.gs fájlban.

A fő fejléc ezen a képen is megtalálható. Itt megváltoztathatja a fejlécet, és beírhatja a "[Neved] ruhásszekrényét" vagy bármi mást, amellyel fel szeretné ismerni ezt az oldalt.

2) A fejléc alatt található a felső navigációs sáv.

Ez a navigációs sáv tartalmazza a Google Táblázatok Cikklapján felsorolt összes típusú cikket.

Egy soron belüli függvényt hívunk meg ezekből az elemekből. Ezután egy ciklus fut, hogy ezeket az opciókat menügombként tartalmazza, és egy műveleti kódot tartalmaz, így amikor a felhasználó rákattint a menügombra, a megfelelő elemek megjelennek a testterületen.

3) A fő test.

Ennek a résznek 4 része van. A szövegkimenet, az oldalsávos szűrő, a fő törzsképek és a JS tartalmazza.

A szövegkimenet lehetővé teszi a felhasználó számára, hogy gyors szöveges nézetet kapjon arról, hogy milyen típusú elemeket néz éppen, ahelyett, hogy a kiválasztott menüopcióra hivatkozna.

Az oldalsávos szűrő tartalmazza a felhasználó által kiválasztott elemtípushoz rendelkezésre álló sok szűrőt. Ezek a szűrők tükrözik az ebben a kategóriában rendelkezésre álló összes lehetőséget, valamint azt, hogy hány elem tartozik az adott kategóriaérték alá. Ez az oldalsáv JavaScript -kóddal van feltöltve (erről a következőkben lesz szó).

A fő törzs jelenleg üres, de a szűrőkhöz hasonlóan ez is tele lesz elemcikkekkel, amelyek részletezik az elem azonosítóját, színét, méretét és helyét, valamint egy képet, amint a felhasználó kiválaszt egy kategóriát, és a JavaScript -kód kitölti ezt a területet.

Végül az tartalmazza (JS), nézzük meg ezt a következő lépésben.

11. lépés: 4. lépés: A JavaScript kód (JS.html)

Ha azt gondolta, hogy a szerverkód nehéz rész, töltse le ezt.

Itt egyesítjük a HTML -t és a SeverCode -ot a felhasználói interakciókkal. A rákattintott elemeket itt kell feldolgozni a megfelelő adatok beszerzése és olvasható formátumban történő visszaadása érdekében. Lássuk tehát első hívásainkat:

A szkript így szól: 3 különböző könyvtárat használok ehhez a projekthez; jquery, bootstrap és egy speciális bootstrap-select kiegészítő. Ezek a könyvtárak lehetővé teszik az objektumok formázását és megkönnyítik a HTML kódon belüli elemek hívását.

A következő fontos JavaScript sorom az alábbiakban található:

$ (dokumentum).keypress (function (event) {if (event.which == '13') {event.preventDefault (); }});

Itt letiltom az Enter billentyűt az űrlapok bármelyikének aktiválásában. Mint ebben az esetben, a Google Web Apps csak egy oldal címét kapja meg. Az Enter megnyomásával adatokat adhat hozzá a HTML -címhez, és megpróbálja átirányítani a felhasználót. Ennek letiltásával engedélyezi, hogy a JavaScript -kód minden munkát elvégezzen.

function removeFilters () {google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters (); }

function updateDBlocation (azonosító, érték) {google.script.run.withSuccessHandler (allGood).withFailureHandler (FailDBUpdate).updateLocation (azonosító, érték); }

Íme két funkció, amelyek hívásokat kezdeményeznek a Server Code.gs fájlba. A vonal:

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure). ServerRemoveFilters ();

sok működő része van, de a csontváz a "google.script.run" -ból származik, amely azt mondja a HTML -oldalnak, hogy a következő funkció a szerveren található.

• Ennek a kódnak az utolsó bitje a futtatandó függvény. Ebben a példában a ServerRemoveFilter ()
• A withSuccessHandler () hozzáadásával a HTML oldal már tudja, mit tegyen a visszaadott adatokkal, és ez a függvény zárójeles futtatása.
• Ugyanez vonatkozik a withFailureHandler ()

Most, hogy lebontottuk a Szerverkód hívást, vessünk egy gyors pillantást arra, hogy mi történik, ha ezek a szerverhívások sikeresek és sikertelenek.

function allGood (e) {console.log ("Siker a szerveren"); } függvény onFailure (hiba) {$ ("#message-box"). html ("

Jelenleg nem lehet ruházati elemeket lekérni. HIBA: " + error.message +"

");} függvény FailDBUpdate (hiba) {$ ("#message-box "). html ("

Nincs hozzáférése a hely módosításához. HIBA: " + error.message +"

"); $ (". location-selects "). prop ('letiltva', 'letiltva');}

Létrehoztam egy nagyon egyszerű konzolnaplót, amely jelzi a sikert a helyfüggvény futtatásakor, amelyet allGood () néven láthat.

A hibák kezelésekor ez a két függvény adja ki a hibaüzenetet, ahol a felhasználó láthatja a jQuery hívás használatával a HTML-objektumhoz, "message-box" azonosítóval.

Most térjünk rá a durva munkára

12. lépés: 5. lépés: A JavaScript kód-kattintási műveletek (JS.html)

A felső menüsorban minden cikketípushoz opciók állnak rendelkezésre. A funkció, amelyet kattintásra futtatnak:

function filterType (cikk, azonosító) {$ ("ul.navbar-nav li.active"). removeClass ("active"); $ ("#currentArticle"). html ("// HTML -KÓD ITT");

updateSideBar = igaz;

google.script.run.withSuccessHandler (updateItems).withFailureHandler (onFailure).fetchItems ("Cikkek", cikk); var newSelect = "#type-"+id; $ (newSelect).addClass ("aktív"); $ ("#myNavbar"). removeClass ("in"); }

Láthatjuk, hogy ebben a kódban van egy google.script.run, amely felhívja a szervert az adatok lekérésére. A hívás sikerfüggvénye az updateItems ().

1. KÉP (ebben a funkcióban a nehéz HTML kóddal nehéz szigorúan másolni a kódot anélkül, hogy rendetlenség jelenne meg ebben a mezőben)

Az updateItems () kódban sok minden történik. Ismét végig kell mennünk a visszaadott objektumon , és minden elemet hozzá kell adnunk a törzsoldalunkhoz.

A HTML -kód tömbként kerül hozzáadásra a kód feldarabolása, valamint az olvasás és az itemData beillesztésének megkönnyítése érdekében.

Az egyes elemek körében eltávolítom azokat a mezőket, amelyeket nem szeretnék látni a leírásban, például az alapértelmezettet, az időbélyeget és a kép URL -jét. Eltávolítom a kép URL -jét a leírásból, mert azt href -ként adják hozzá egy címkéhez. Miután összegyűjtöttük ezeket az információkat, a jQuery.append () függvény segítségével elküldjük a törzsnek.

Miután az összes elemet hozzáadta az oldalhoz, ez az elemlekérdezés ismét elküldésre kerül a szerverkódba, hogy rendezze és visszaküldje a szűrőbeállításokat a 2. képen látható módon.

2. KÉP (az oldalsáv frissítése)

Nagyon hasonlít az updateItems () függvényhez, ismét rendelkezünk HTML kód tömbökkel és hurokkal az összes szűrési lehetőséghez. Az egyetlen észrevehető változás a jQuery.selectpicker ('frissítés'). Ez a funkció az utolsó lépésben szereplő szkriptkönyvtárból származik. Lehetővé teszi a programozó számára, hogy írjon egy egyszerű kiválasztott HTML -t, és hagyja, hogy a könyvtár frissítse a kereshető funkciót, valamint a CSS -kódot.

3. KÉP (szűrés az oldalsávval)

Végül megvan az updateFilter (formData) függvény. Ezt akkor használják, ha az űrlapot az oldalsávból küldik be. Kezdjük a.serializeArray () jQuery függvény használatával, amely beolvassa az esetünkben egy űrlap által definiált elem HTML kódját, és visszaadja a szervernek küldendő karakterlánc értékeit. És újra kezdjük a folyamatot az 1. képen.

13. lépés: A vége… végül

Hát ott van; teljes és alapos magyarázat, amely segít létrehozni saját online szekrényét, vagy kihasználni a Google Scriptjeimben létrehozott funkciókat saját projektjének kiterjesztéséhez.

Utazás volt ezt a projektet kódolni (és dokumentálni ezen az utasításon keresztül), de élveztem a folyamatot, és remélem, hogy élvezni fogja a terméket. Szeretném hallani bárkit, aki kiigazításokat végez, ahogy Michael Jordan azt mondja: "A mennyezet a tető", és egyetértek azzal, hogy ennek az alkalmazásnak nincsenek korlátai.