Siirry pääsisältöön

Dynaaminen tyylitys 25.00

Avaa ChatGPT:ssä

WebforJ 25:ssä ja korkeammissa versioissa on mahdollista tyylittää yksittäisiä rivejä ja soluja taulukossa käyttäen mukautettuja osanimiä. Nämä nimet voidaan määrittää dynaamisesti sovelluksesi logiikan perusteella, mikä antaa sinulle tarkkaa hallintaa taulukon ulkoasusta.

Rivien tyylitys​

setRowPartProvider()-metodi määrittää osanimiä koko riveille niiden sisältämän tietoelementin perusteella. Tämä mahdollistaa täydellisten rivien korostamisen, jotka täyttävät tietyt ehdot—esimerkiksi vuorotellen taustavärejä parillisille riveille.

Näitä tyylinimiä voidaan kohdistaa CSS:ssä ::part()-valitsimen avulla.

Varjopartit

::part()-valitsin on erityinen CSS-ominaisuus, joka mahdollistaa komponentin varjo DOM:in sisällä olevien elementtien tyylittämisen—niin kauan kuin nämä elementit altistavat part-attribuutin. Tämä on erityisen hyödyllistä webforJ-komponenttien sisäisten osien, kuten rivien tai solujen tyylittämisessä.

Lisätietoja varjoparttien toiminnasta ja niiden määrittämisestä ja kohdistamisesta löydät Tyylitys osiosta.

Näytä Koodi

Solujen tyylitys​

setCellPartProvider()-metodi tyylittää yksittäisiä soluja sekä tietoelementin että niihin kuuluvan sarakkeen perusteella. Tämä tekee siitä ihanteellisen tiettyjen arvojen, kuten kynnyksen alittavien ikien tai virheellisten tietojen korostamiseen.

Kuten riviosat, solupositiot määritellään nimellä ja kohdistetaan ::part()-valitsimen avulla.

Näytä Koodi

Reagointi datapäivityksiin​

Jos sovelluksesi muuttaa tietoja ohjelmallisesti, kuten päivittämällä käyttäjän ikää, taulukko arvioi automaattisesti uudelleen ja soveltaa mitään siihen liittyviä rivin tai solun tyylejä heti, kun päivitetty elementti on tallennettu varastoon.

Näytä Koodi

Raidalliset rivit​

Ota käyttöön vuorotellen taustavärit riveille parantaaksesi luettavuutta:

// Ota käyttöön raidalliset rivistyylit
table.setStriped(true);

Rajat​

Määritä, mitkä rajat näytetään Table:n, sarakkeiden ja rivien ympärillä:

// Ota käyttöön kaikki rajat
table.setBordersVisible(EnumSet.of(Table.Border.AROUND, Table.Border.COLUMNS, Table.Border.ROWS));

// Poista kaikki rajat
table.setBordersVisible(EnumSet.noneOf(Table.Border.class));

Alla oleva esimerkki esittelee yksinkertaisen tavan sovittaa Table:n visuaalinen ulkoasu sovelluksesi muuhun visuaaliseen ilmeeseen käyttäen setStriped() ja setBordersVisible().

Näytä Koodi