Ako správne zobraziť ikonu vo widgete dijit/Tree

Pri práci s widgetom dijit/Tree asi každého začne zaujímať, ako odstrániť zobrazovanie ikony typu expando (plus) pre uzly, ktoré nemajú potomkov. Riešení je viacero. Jedným z nich je skryť pôvodné ikony a generovať ich cez metódu getLabelClass(). Tento spôsob ale eliminuje zobrazovať ikony, ktoré by mali byť priradené uzlom na základe ich hodnôt. Stráca sa tak miesto pre používateľom definované ikony.

Ďalším spôsobom je použiť HTML fragment, ktorý bude obsahovať viacero ikon, no toto riešenie sa mi zdá až príliš "násilné". Nakoniec sa mi osvedčil posledný postup, ktorý mi zachováva aj aplikovanie metódy getLabelClass().

Cez metódu getRowClass() detegujem existenciu potomkov a priraďujem riadku triedu. Podľa tejto triedy skrývam ikony typu expando (plus). Toto riešenie je vhodné pre statické stromy, ktoré sa po renderovaní nemenia, napríklad menu / navigácia.

Príklad: Zapis v jazyku CSS.

1
2
3
.no-children .dijitTreeExpando {
    background : none;
}
.no-children .dijitTreeExpando {
    background : none;
}

Príklad: Zápis metódy getRowClass()

1
2
3
4
getRowClass: function(item) {
    var hasChildren = this.model.store.getChildren(item).length > 0;
    return hasChildren ? "expandable" : "no-children";
}
getRowClass: function(item) {
    var hasChildren = this.model.store.getChildren(item).length > 0;
    return hasChildren ? "expandable" : "no-children";
}

Záver

Uviedol som tri spôsoby založené na skrývaní ikony typu expando, ktorých úlohou je správne zobraziť ikonu uzla s potomkami. Ak máte ďalšie šikovné riešenia, vrátane tých, ktoré zahŕňajú aj dynamické zmeny v strome, podeľte sa o ne prostredníctvom komentára.

Ako správne zobraziť ikonu vo widgete dijit/Tree

Záver

Komentáre

Pridať komentár