Tree

Avaa ChatGPT:ssä

Varjo dwc-tree 25.01

Java API

Tree komponentti järjestää tietoa solmujen hierarkiana. Jokaisella solmulla on ainutlaatuinen avain ja merkintä. Solmut yhdistyvät mu形成vanvan vanhempi-lapsisuhteita. Voit laajentaa tai supistaa solmuja näyttääkseen tai piilottaakseen niiden lapsia. Ikonit selventävät, minkä tyyppisestä solmusta on kyse ja onko se valittu. Valinta tukee yhden tai useamman solmun valitsemista samanaikaisesti.

Node model and tree structure

The role of TreeNode

Jokainen tietopala puussa on kääritty TreeNode-objektiin. Tämä objekti pitää sisällään avaimen, tekstimerkin ja linkit sen vanhempiin ja lapsisolmuihin. Juurisolmu on erityinen: se esiintyy jokaisessa puussa, mutta ei ole näkyvissä. Se toimii kaikkien ylimmän tason solmujen säiliönä, mikä tekee puurakenteen hallinnasta helpompaa sisäisesti.

Koska solmut pitävät viittauksia vanhempiinsa ja lapsiinsa, puun läpikäyminen on suoraviivaista. Riippumatta siitä, haluatko siirtää ylös, alas tai löytää tietyn solmun sen avaimen perusteella, yhteydet ovat aina käytettävissä.

Node creation and management

Solmut luodaan yksinkertaisilla tehdasmenetelmillä, joko antamalla avain ja teksti tai vain teksti (joka toimii myös avaimena). Tämä takaa, että jokainen solmu on voimassa ja yksilöitävissä.

Solmujen lisääminen puuhun tapahtuu kutsumalla add() tai insert() vanhempi-solmulle. Nämä menetelmät hoitavat vanhempi viittauksen määrittämisen ja ilmoittavat puulle käyttöliittymän päivittämisestä.

Esimerkki:

TreeNode parent = Tree.node("Vanhempi");
TreeNode child = Tree.node("Lapsi");
parent.add(child);
tree.add(parent);

Single Parent Only

Yrittäessäsi määrittää samaa solmua useammalle vanhemmalle, heittää poikkeuksen. Tämä suojatoimi varmistaa, että puu säilyttää oikean hierarkian estämällä solmuja saamasta useampaa vanhempaa, mikä rikkoisi rakenteen eheyttä ja aiheuttaisi odottamatonta käyttäytymistä.

Näytä koodi

Java

Modifying nodes

Voit päivittää solmun merkinnän kutsumalla setText(String text). Tämä menetelmä muuttaa puussa näkyvän solmun tekstin.

Poistaaksesi tietyn lapsisolmun, käytä remove(TreeNode child). Tämä irrottaa lapsen sen vanhemmasta ja poistaa sen puurakenteesta. Se myös tyhjentää vanhempi viittauksen.

Jos haluat tyhjentää kaikki lapset solmusta, kutsu removeAll(). Tämä poistaa jokaisen lapsisolmun, tyhjentää niiden vanhempi viittaukset ja tyhjentää lapsiluettelon.

Jokainen solmu tukee ylimääräisten tietojen tallentamista palvelinpuolella käyttäen setUserData(Object key, Object data). Tämä antaa sinun liittää mielivaltaista metadataa tai viittauksia solmuun ilman, että tämä data paljastuu asiakkaalle tai käyttöliittymälle.

Using the Demo to Edit Node Text

Demoissa voit kaksinkertaisesti napsauttaa solmua avataksesi tekstieditorin sille. Syötä uusi teksti ja tallenna se päivittääksesi solmun merkintää puussa.

Näytä koodi

Java

CSS

Icons

Ikonit tarjoavat visuaalisia vihjeitä siitä, mitä solmut edustavat ja niiden tila. Ne parantavat luettavuutta erottamalla solmutyypit ja valintatilat yhdellä silmäyksellä. Tree komponentti tukee oletusikonien asettamista globaalisti, mukauttamista solmukohtaisesti ja ikonien näkyvyyden vaihtamista.

Global icons

Puu antaa sinun asettaa oletusikonit suljetuille ryhmille, avatuile ryhmille, lehtisolmuille ja valituille lehtisolmuille.

Esimerkki:

tree.setCollapsedIcon(TablerIcon.create("folder"));
tree.setExpandedIcon(TablerIcon.create("folder-opened"));
tree.setLeafIcon(TablerIcon.create("file"));
tree.setLeafSelectedIcon(TablerIcon.create("file-checked"));

Icon Sources

Ikoni voi olla mikä tahansa voimassa oleva webforJ ikoni määrittely tai resurssitiedosto, joka on ladattu webforJ tuettujen resurssiprotokollien kautta.

Per-node icons

Voit ohittaa globaalit oletukset määrittämällä ikoneja yksittäisille solmuille. Tämä on hyödyllistä, kun tietyt solmut edustavat erilaisia konsepteja, kuten "projekti" kansioita tai erikoistiedostoja.

Esimerkki:

node.setIcon(TablerIcon.create("project"));
node.setSelectedIcon(TablerIcon.create("project-selected"));

Icon visibility

Joskus saatat haluta piilottaa ikoneita ryhmiltä tai lehdiltä vähentääksesi kaaosta. Komponentti antaa sinun vaihtaa näkyvyyttä globaalisti näille kategorioille, mikä antaa sinun yksinkertaistaa puun ulkoasua ilman, että rakenne kärsii.

Esimerkki:

tree.setGroupIconsVisible(false);
tree.setLeafIconsVisible(false);

Näytä koodi

Java

Node expansion and collapse

Solmut voidaan laajentaa tai supistaa hallitsemaan, mitkä osat puustaa ovat näkyviä. Tämä mahdollistaa keskittymisen olennaisiin osiin ja tukee skenaarioita, kuten laiskakulutusta tai dynaamisia tietojen päivityksiä.

Expand and collapse operations

Puu tukee yksittäisten solmujen laajentamista ja supistamista joko niiden avaimen tai suoran viittauksen avulla. Voit myös laajentaa tai supistaa kaikkia lapsia solmusta kerralla.

Nämä toiminnot antavat sinulle mahdollisuuden hallita, kuinka paljon puusta on näkyvissä ja tukevat laiskalatausta tai keskittymistä kiinnostaviin alueisiin.

Esimerkki:

tree.expand(node);
tree.collapse(key);

// supista alapuuleet
tree.expandFrom(node);
tree.collapseFrom(node);

Collapsing root

Juurisolmu kiinnittää puun mutta pysyy piilossa. Juuren supistaminen piilottaisi normaalisti kaiken, jolloin puu näyttäisi tyhjältä. Välttääksesi tätä, juuren supistaminen supistaa oikeastaan kaikkia sen lapsia mutta pitää juuren laajennettuna sisäisesti, varmistaen että puu näyttää silti sisältönsä oikein.

Lazy loading nodes

Puu tukee solmujen lasten laiskakulutusta reagoimalla laajentumistapahtumiin. Kun käyttäjä laajentaa solmun, sovelluksesi voi ladata tai luoda sen lapsia dynaamisesti. Tämä parantaa suorituskykyä lataamalla vain näkyviä puun osia tarpeen mukaan.

Käytä onExpand tapahtumaa havaitaksesi, kun solmu on laajennettu. Käsittelijän sisällä, tarkista onko solmun lapset paikkamerkkejä (esimerkiksi pyörivä latauskierros tai tyhjät solmut) ja korvata ne todellisilla tiedoilla, kun ne on ladattu.

Näytä koodi

Java

Selection

Valinta hallitsee, mitkä solmut käyttäjä valitsee. Tree komponentti tukee joustavia tiloja ja API:ita solmujen valintaan, poistamiseen ja kysymiseen.

Selection modes

Voit valita, salliiko puu valita vain yhden solmun kerrallaan vai useita solmuja samanaikaisesti. Siirtyminen useasta valinnasta yksittäiseen valintaan poistaa automaattisesti valinnasta kaikki paitsi ensimmäisen valitun solmun.

Esimerkki:

tree.setSelectionMode(Tree.SelectionMode.SINGLE);

Multi-selection interaction

Kun puu on asetettu usean valinnan tilaan, käyttäjät voivat valita useamman kuin yhden solmun kerrallaan. Tämä toimii laitteesta riippuen:

• Työpöytä (hiiri ja näppäimistö): Käyttäjät pitävät Ctrl-näppäintä (tai Cmd-näppäintä macOS:llä) ja napsauttavat solmuja lisätäkseen tai poistaakseen ne nykyisestä valinnasta. Tämä mahdollistaa useiden erillisten solmujen valitsemisen ilman muiden poistamista.
• Mobiili ja kosketuslaitteet: Koska modifikaatiota ei ole saatavilla, käyttäjät napsauttavat solmuja valitakseen tai poistaakseen ne valinnasta. Jokainen napsautus vaihtaa kyseisen solmun valintatilaa, mikä mahdollistaa helpon monivalinnan yksinkertaisilla napsautuksilla.

Selecting and deselecting

Solmut voidaan valita tai poistaa viittauksen, avaimen, yksilöllisesti tai erissä. Voit myös valita tai poistaa jokaisen lapsen solmusta yhdellä kutsulla.

Esimerkki:

// valitse solmu viittauksen tai avaimen perusteella
tree.select(node);
tree.selectKey(key);

// poista valinta solmusta viittauksen tai avaimen perusteella
tree.deselect(node);
tree.deselectAll();

// solmujen lasten valinta tai poistaminen
tree.selectChildren(parentNode);
tree.deselectChildren(parentNode);

Selection state retrieval

Voit saada nykyisen valinnan hyödyntämällä alla näkyvää koodia:

// saa valitun solmun viittauksen
TreeNode selected = tree.getSelected();
List<TreeNode> selectedItems = tree.getSelectedItems();

// saa valitun solmun avaimen
Object selectedKey = tree.getSelectedKey();
List<Object> selectedKeys = tree.getSelectedKeys();

Näytä koodi

Java

Styling

Loading...