A Select and Option használata a Thymeleaf-ben
1. Áttekintés
A Thymeleaf a nagyon népszerű sablonmotor, amely a Spring Boot csomagban van. Számos cikket publikáltunk már róla, és nagyon ajánljuk, hogy nézze át a Baeldung Thymeleaf sorozatát.
Ebben az oktatóanyagban azt fogjuk megvizsgálni, hogyan kell vele dolgozni válassza és választási lehetőség címkék a Thymeleaf-ben.
2. HTML alapok
HTML-ben legördülő listát készíthetünk, több értékkel:
Almás banán narancs körte Minden lista a következőkből áll válassza és beágyazott választási lehetőség címkék. Alapértelmezés szerint a webböngésző listát jelenít meg az első opcióval.
A használatával szabályozhatjuk, hogy melyik érték legyen kiválasztva kiválasztott tulajdonság:
narancsEzenkívül megadhatjuk, hogy egy opció nem választható ki a Tiltva tulajdonság:
Kérlek, válassz...3. Tüvelevél
A Thymleaf-ben használhatjuk th: mező attribútum a nézet és a modell összekapcsolásához:
Bár a fenti példa valójában nem igényli a sablonmotor használatát, a fejlettebb példákban a Thymeleaf erejét láthatjuk.
3.1. választási lehetőség Kiválasztás nélkül
Ha egy olyan forgatókönyvre gondolunk, amelyben több lehetőség közül választhat, akkor mindegyik megjelenítésének tiszta és tiszta módja az th: mindegyik attribútummal együtt th: érték és th: szöveg:
A fenti példában 0 és 100 közötti számsorozatot használunk. Minden számhoz hozzárendeljük az értéket én nak nek választási lehetőség címkék érték attribútumot, és ugyanazt a számot használjuk, mint a megjelenített érték.
A Thymeleaf kód a böngészőben a következőképpen jelenik meg:
0 1 2 ... 100 Gondoljuk át ezt a példát teremt, azaz új formával indulunk, és a a százalékos értéket nem kellett előre kiválasztani.
3.2. Kiválasztott választási lehetőség
Ha most bővíteni akarjuk formánkat egy frissítés funkcionalitás, azaz visszatérünk a korábban létrehozott rekordra, és akkor az űrlapot meg akarjuk tölteni meglévő adatokkal az opciót ki kell választani.
Ezt hozzáadással érhetjük el th: kiválasztva attribútum néhány feltétellel együtt:
A fenti példában a 75 értékét szeretnénk előre kiválasztani, ellenőrizve, hogy én 75-tel egyenlő.
Azonban, ez a kód nem fog működni, és a renderelt HTML a következő lesz:
0 ... 74 75 76 ... 100 A javításhoz el kell távolítanunk th: mező és cserélje le név és id attribútumok:
Végül a következőket kapjuk:
0 ... 74 75 76 ... 100 4. Következtetés
Ebben a rövid cikkben megvizsgáltuk, hogyan kell működni a Thymeleaf legördülő / lista választóival. Van egy közös buktató az előre kiválasztott értékekkel, amelyekre megmutattuk a megoldást.
Mint mindig, a vita során használt kód megtalálható a GitHubon.
