Siirry pääsisältöön

Dynaaminen tyylittely 25.00

Avaa ChatGPT:ssä

WebforJ 25:ssä ja sitä uudempissa 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 ulkonäöstä.

Rivin tyylitys​

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

Näitä tyylinimiä voidaan kohdistaa ::part()-valitsimella CSS:ssäsi.

Varjo-osiot

::part()-valitsin on erityinen CSS-ominaisuus, joka mahdollistaa komponentin varjo-DOM:issa 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ämiseen.

Lisätietoja siitä, miten varjo-osat toimivat ja miten niitä määritellään ja kohdistetaan, katso Tyylittely -osio.

Näytä koodi

Solun tyylitys​

setCellPartProvider()-metodi tyylittää yksittäisiä soluja sekä tiedoelementin että siihen liittyvän sarakkeen perusteella. Tämä tekee siitä ihanteellisen tiettyjen arvojen, kuten ikien korostamisen, kun ne ovat ennen kynnystä tai virheellisiä merkintöjä.

Kuten riviosat, soluosat määritellään nimellä ja niitä kohdistetaan ::part()-valitsimella.

Näytä koodi

Reagoiminen tietopäivityksiin​

Jos sovelluksesi muuttaa tietoja ohjelmallisesti, kuten päivittämällä käyttäjän ikää, taulukko arvioi automaattisesti ja soveltaa uudelleen kaikki siihen liittyvät rivin tai solun tyylit, kun päivitettävä kohde on sitoutettu varastoon.

Näytä koodi

Raidalliset rivit​

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

// Käytä raidallista rivityylitystä
table.setStriped(true);

Reunat​

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

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

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

Alla oleva demo esittelee yksinkertaisen tavan sovittaa Table:n visuaalinen ilme sovelluksesi muuhun osaan käyttäen setStriped() ja setBordersVisible().

Näytä koodi

Tietojen hallinta ja kysely

Lisätietoja Repository-mallin käytöstä kokoelmainen hallitsemiseen ja kyselyyn, katso Repository-artikkelit.