Dynaaminen tyylitys 25.00

Avaa ChatGPT:ssä

WebforJ 25:stä alkaen Table-taulukon yksittäisiä rivejä ja soluja voi tyylitellä mukautetuilla osanimillä. Nimet voidaan määrittää dynaamisesti sovelluksen logiikan perusteella, mikä antaa tarkkaa hallintaa taulukon ulkoasuun.

Rivien tyylittely

setRowPartProvider()-metodilla voidaan määrittää osanimet kokonaisille riveille niiden sisältämän tietokohteen perusteella. Näin voit korostaa kokonaisia rivejä, jotka täyttävät tietyt ehdot – esimerkiksi käyttämällä parillisilla riveillä vuorotellen erilaisia taustavärejä.

Näihin tyylinimiin voidaan kohdistaa CSS:n ::part()-valitsimella.

Varjo-osat

::part()-valitsin on CSS:n erikoisominaisuus, jolla voi tyylitellä komponentin shadow DOM -rakenteen sisällä olevia elementtejä, kunhan nämä elementit tuovat esiin part-attribuutin. Tämä on erityisen hyödyllistä webforJ-komponenttien sisäisten osien, kuten taulukon rivien tai solujen, tyylittelyssä.

Lisätietoja varjo-osien toiminnasta sekä niiden määrittämisestä ja kohdistamisesta on kohdassa Tyylittely.

Solujen tyylittely

setCellPartProvider()-metodilla tyylitellään yksittäisiä soluja sekä tietokohteen että siihen kuuluvan sarakkeen perusteella. Tämä sopii hyvin tiettyjen arvojen korostamiseen, esimerkiksi kynnysarvon ylittävien ikien tai virheellisten tietojen huomioimiseen.

Riviosien tapaan myös soluosat määritetään nimellä, ja niihin kohdistetaan ::part()-valitsimella.

Reagointi tietojen päivityksiin

Jos sovelluksesi muokkaa tietoja ohjelmallisesti, esimerkiksi päivittää käyttäjän iän, taulukko arvioi siihen liittyvät rivi- ja solutyylit automaattisesti uudelleen ja ottaa ne käyttöön, kun päivitetty kohde on vahvistettu tietovarastoon.

Tässä esimerkissä Age-sarakkeen solut tyylitellään kynnysarvon perusteella: yli 30-vuotiaat näkyvät vihreinä ja enintään 30-vuotiaat punaisina. Painikkeen napsauttaminen vaihtaa Alicen iän 28:n ja 31:n välillä, jolloin setCellPartProvider ottaa sopivan tyylin uudelleen käyttöön tietojen vahvistamisen jälkeen.

Raidalliset rivit

Paranna luettavuutta käyttämällä riveillä vuorottelevia taustavärejä:

// Ota käyttöön raidallisten rivien tyylittely
table.setStriped(true);

Reunukset

Määritä, mitkä reunukset näytetään Table-taulukon, sarakkeiden ja rivien ympärillä:

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

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

Alla oleva esimerkki näyttää yksinkertaisen tavan sovittaa Table-taulukon ulkoasu sovelluksen muuhun ilmeeseen setStriped()- ja setBordersVisible()-metodeilla.