Siirry pääsisältöön

Dynaaminen tyylitys 25.00

Avaa ChatGPT:ssä

WebforJ 25:ssä ja korkeammissa versioissa on mahdollista muokata yksittäisten rivien ja solujen tyyliä taulukossa mukautettujen osan nimien avulla. Nämä nimet voidaan määrittää dynaamisesti sovelluksesi logiikan mukaan, mikä antaa sinulle hienovaraisen hallinnan taulukon ulkoasusta.

Rivin tyyli​

setRowPartProvider()-metodi määrää osan nimet kokoille riveille niiden sisältämän tietoelementin mukaan. Tämä mahdollistaa kokonaisten rivien korostamisen, jotka täyttävät tietyt ehdot—esimerkiksi vuorottelevat taustavärit parillisille riveille.

Nämä tyyli nimet voidaan kohdistaa ::part()-valitsimella CSS:ssäsi.

Varjo-osat

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

Lisätietoja varjo-osien toiminnasta sekä niiden määrittelystä ja kohdistamisesta löydät Tyylittely osiosta.

Näytä koodi

Solun tyyli​

setCellPartProvider()-metodi muokkaa yksittäisten solujen tyyliä sekä tietoelementin että sen kuuluvan sarakkeen perusteella. Tämä on erityisen sopiva korostamaan tiettyjä arvoja, kuten ikien esiin tuomista, jotka ylittävät tietyn rajan tai virheellisiä merkintöjä.

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

Näytä koodi

Reagointi tietopäivityksiin​

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

Tässä demossa solut Ikä-sarakkeessa on tyylitelty rajan mukaan: yli 30-vuotiaat näyttävät vihreiltä, kun taas 30-vuotiaat ja sitä nuoremmat näyttävät punaisilta. Painiketta napsauttamalla Alice'n ikä vaihtuu 28 ja 31 välillä, mikä aktivoi setCellPartProvider-metodin soveltamaan asianmukaisen tyylin, kun data sitoutuu.

Näytä koodi

Raidalliset rivit​

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

// Ota käyttöön raidallinen rivejä
table.setStriped(true);

Reunat​

Määritä, mitkä reunat näkyvät Taulukon, sarakkeiden ja rivien ympärillä:

// Ota käyttöön kaikki reunat
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 näyttää yksinkertaisen tavan sovittaa Taulukon visuaalinen ulkoasu sovelluksesi muuhun osaan käyttäen setStriped() ja setBordersVisible().

Näytä koodi

Datan hallinta ja kysely

Tietoa siitä, miten käyttää Repository-mallia hallitsemaan ja kysymään kokoelmaa, löydät Repository-artikkeleista.