JavaScript  »  Articoli  »  JQuery 

Treeview

Questo secondo plugin è concettualmente simile al precedente. Permette infatti di costruire un albero espandibile e dinamico a partire da un frammento HTML (nello specifico una serie di elementi ul annidati). L'effetto finale è davvero gradevole e permette di realizzare interfacce molto usabili.

Il frammento HTML di base deve avere una struttura simile a questa:

<ul id="treeview"> 
  <li><span>Primo elemento</span></li>        
  <li><span>Secondo elemento</span></a>
    <ul>
      <li><span>Primo sotto-elemento</span></li>
      <li><span>Secondo sotto-elemento</span></a></li>
      <li><span>Terzo sotto-elemento</span></li>
    </ul>
  </li>        
  <li><span>Terzo elemento</span></li>
  <li><span>Quarto elemento</span>
    <ul>
      <li><span>Primo sotto-elemento</span></li>
      <li><span>Secondo sotto-elemento</span></a></li>
      <li><span>Terzo sotto-elemento</span></li>
    </ul>
  </li>
</ul>

È un elenco di liste (ul) annidate tra di loro partendo da una lista root (ul con id="treeview"). Come per il precedente plugin, per trasformare le liste in un albero dinamico occorre invocare un particolare metodo dopo che il DOM sia stato correttamente caricato dal browser. Facciamo quindi affidamento al metodo ready esposto da Jquery:

$(document).ready(function(){
  $("#treeview").treeview();
});

Il plugin permette anche di associare a ciascun item delle liste un'icona che rappresenta il suo stato di item o di container di altri item secondo una convenzione simile al file system dei sistemi operativi (folder e file). Basterà associare alla lista root la classe filetree e a ciascun span contenuto dentro i li la classe folder o file in base al suo comportamento. Ecco un esempio del plugin in azione.

Oltre a queste impostazioni basilari, il plugin presenta ulteriori estensioni che permettono di migliorare nelle funzionalità il nostro albero. Queste estensioni possono essere attivate passando al metodo treeview un oggetto JSON contente particolari configurazioni.

Una delle configurazioni che ritengo più interessanti è unique che permette di avere un solo nodo espanso dallo stesso padre.

// rendiamo l'apertura di un nodo vincolata alla chiusura degli altri
$("#treeview").treeview( {unique: true} );  

La seconda configurazione possibile che segnalo riguarda l'evento toggle che scatta ogni volta che un ul viene aperto o chiuso:

$("#treeview").treeview( {toggle: function() {
    alert("Hai modificato la struttura dell'albero");  //impostiamo una funzione di callback all'evento toggle
}});

La funzionalità più interessante riguarda la possibilità di persistere lo stato del tree (quali nodi sono espansi e quali no) tramite l'utilizzo di cookie o tramite l'oggetto location. Realizzare questa persistenza è banale:

// utilizzo l'oggetto location per la persistenza
$("#treeview").treeview( {persist: "location"} );
//utilizzo un cookie per la persistenza
$("#treeview").treeview( {persist: "cookie"} );

Come per il precedente, rimando per ulteriori informazioni alla documentazione ufficiale: http://docs.jquery.com/Plugins/Treeview/treeview

Altri articoli

Altre guide

Altre newsletter