Premetto che è la prima volta che uso così approfonditamente javascript.
Quello che devo fare è: creare un albero gerarchico espandibile/collassabile con un click (le classiche immagini + e -), dove ogni voce è in realtà un checkbox che, se abilitato, mostra un div contenente a sua volta altri checkbox.
Fino qui sarei anche riuscito ad implementarlo. Il problema sta proprio nella presenza dei checkbox nei div; questi vengono automaticamente deselezionati quando viene eseguita un'azione sulla struttura ad albero.
Ovviamente lo stesso problema si pone anche questi ultimi, ma sono riuscito a risolverlo.
Mi spiego meglio. Ipotizziamo che:
+ indichi l'immagine da premere per espandere il menu
- per collassarlo
# indichi un checkbox selezionato
@ un checkbox non selezionato
Ogni elemento della struttura ad albero è un list-item ed è shiftato di qualche px in base al livello di profondità nell'albero. Ovviamente ho memorizzate tutte le gerarchie e gli stati in un array bidimensionale.
Dato questo albero (dove per esempio seleziono SON2)
- ROOT @
+ SON1 @
+ SON2 #
ho il seguente div associato (dove per esempio seleziono il primo):
# CHECKBOX1-di-SON2
@ CHECKBOX2-di-SON2
OPZIONE 1
Realizzare la comparsa/scomparsa dei div con getElementbyId è semplice ma non mi permette di aggiornare gli stati salvati nell'array e quindi di cambiare le immagini (ed i link corrispondenti) degli elementi della lista dopo un evento. A meno che... esiste un modo per modificare il contenuto con getElementById come si fa per lo stile? (Anche se penso di sì, si potrebbe adattare a questo caso?)
OPZIONE 2
usare innerHTML ed inserire inline lo stile (display: none o display: block) per visualizzare o meno l'elemento (a seconda del suo stato) dell'albero o il div ad esso associato. Il problema di questa tecnica è che ad ogni azione sull'albero, viene reinvocata la funzione che mostra il contenuto della pagina. Questa funzione visualizza le strutture (lista e div) in base agli stati di ogni nodo modificati presenti nell'array, quindi perde ogni possibilità di mantenere selezionati i checkbox già scelti dall'utente. In pratica l'utente dovrebbe prima scegliersi tutti gli elementi della lista che gli servono e poi selezionare quelli dei corrispondenti div, poiché se ritornasse a modificare l'albero, perderebbe tutto.
Personalmente ho provato a creare un ulteriore array per i checkbox dei div per salvarne lo stato e quindi preselezionarlo se già scelto dall'utente. Vista la complessità della pagina mi sono però un po' perso.
Nonostante la seconda opzione sia già implementata, preferirei usare la 1 per la maggior semplicità del codice e perché non si porrebbe il problema iniziale.
Non so se sono riuscito a spiegarmi bene, vista la complessità della cosa. Come si potrebbe fare?
Grazie
Rispondi quotando