DTREE con checkbox

[damar3]

Salve a tutti, ho un menu ad albero costriuito con dtree al quale ho aggiunto un chechbox che consente la selezione.

Ho fatto una cosa di questo tipo:

d = new dTree('d');
d.add(1,-1,'Menu');          
d.add(2,1, 'TESTA<input name="id[]" type="checkbox" value="2" />');
d.add(4,2, 'Inserimento<input name="id[]" type="checkbox" value="4" />');
d.add(5,2, 'Ricerca<input name="id[]" type="checkbox" value="5" />');
d.add(6,4, 'Inserisci 1<input name="id[]" type="checkbox" value="6" />');
d.add(7,4, 'Inserisci 2<input name="id[]" type="checkbox" value="7" />');
d.add(8,4, 'Inserisci 3<input name="id[]" type="checkbox" value="8" />');
d.add(9,4, 'Inserisci 4<input name="id[]" type="checkbox" value="9" />');
d.add(10,5, 'Ricerca 1<input name="id[]" type="checkbox" value="10" />');
d.add(11,5, 'Ricerca 2<input name="id[]" type="checkbox" value="11" />');
document.write(d);

Invio i parametri tramite form, li recupero con php e la cosa va bene senza problemi.

A questo punto mi piacerebbe aggiungere la possibilità che una volta selezionato un nodo se questo ha figli anche gli stessi lo fossero (stessa cosa per la deselezione). Qualcuno ha idea di quale sia la strada migliore da percorrere per realizzare questa cosa?

Un grazie anticipato a tutti.

[artorius]

mmm, dovrei sapere com'è l'HTML risultante nell'albero per darti una risposta

[damar3]

Se vado con il tasto destro in una pagina con dtree vedo questo tipo di righe:

d.add(6,4, 'Inserisci 1<input name="id[]" type="checkbox" value="6" />');

Visivamente vedo Inserisci e un checkbox di fianco, la differenza con quello standard ( http://destroydrop.com/javascripts/tree/example/ ) è solo che io metto questo chechbox di fianco...

Avevo pensato di mettere una funzione javascript al click che selezionava i figli (o deselezionava) ma avendo l'array (id[]) e non valori distinti (che poi andrei in difficoltà per recuperarli con il php) non riesco a gestire la cosa.
Spero di essere stato chiaro.

[artorius]

Se usi una libreria Javascript con funzioni DOM è molto più semplice, ma possiamo fare senza.

allora, ti serve il primo numero che viene messo come parametro dell'add() (6 in quello citato).

Crea una funzione di questo tipo:

function setValueInputForChildren(elem, checked)
{
   if(elem.type && elem.type.toUpperCase() == 'CHECKBOX')
   {
       elem.checked = checked;
   }
   if(elem.childNodes)
   {
      var children = elem.childNodes;
      for(i = 0; i < children.length; i++)
      {
          setValueInputForChildren(children[i], checked);
      }
   }
}

function checkUnchekAll(input, index)
{
   var check = input.checked;
   var clip = document.getElementById('da'+index);
   if(clip.getElementsByTagName){
      var elems = clip.getElementsByTagName('input');
      foreach(i in elems)
      {
         i.checked = check;
      }
   }
   else
   {
      setValueInputForChildren(clip, check);
   }
} 

Dopo di che inserisci questa funzione come onclick del checkbox con i paramentri checkUnchekAll(this, n) dove n è il numero che hai inserito con add()
(ad esempio
d.add(2,1, 'TESTA<input name="id[]" onclick="checkUnchekAll(this, 2)" type="checkbox" value="2" />'); )

Dovrebbe andare

[damar3]

Non ho ben capito questo passaggio:

var clip = document.getElementById('da'+index);

cosa sono gli elementi da1,da2,da3... clip è null
questo punto penso sia la chiave di volta del problema.

[artorius]

se ti scarichi firefox con firebugs, puoi analizzare l'HTML risultate da operazioni Javascript (cosa che non puoi fare con il vedi codice), in quel modo ti rendiconto che per ogni elemento che aggiungi con add() vengono creati: un elemento container con id ="da" + numero passato in add, e un elemento UL con id = "ad" o "al", ora non mi ricordo, + il numero passato in add.

Quello che fa la funzione è cercare tutti i checkbox in "da" + num e se il checkbox padre è checkkato, li checkka tutti altrimenti li uncheckka tutti

[damar3]

Ho visto e in effetti ci sono tanti elementi di questo tipo:

<div id="dd0" class="clip" style="display: block;">

Ad ogni modo non riesco a far funzionare sta cosa. Passo nei ciclo il numero di figli dell'elemento ma non li seleziono. Se invece seleziono un figlio non accade nulla.


P.S.
Ovviamente ho messo dd e non da

[damar3]

Senza avere l'array sono riuscito a realizzarlo in questo modo:

function SelezTT(el)
{
	var elIsChecked = el.checked;
	var i = 0;
	var modulo = document.getElementsByName(el.id);
	for (i=0; i<modulo.length; i++)
    {
        if(modulo[i].type == "checkbox" && modulo[i].name == el.id)
        {   
            modulo[i].checked = elIsChecked;
            SelezTT(modulo[i]);
        }
    }
}

function ifchecked(el1){

		var modulo = document.getElementsByName(el1.name);
		var isChecked = false;
		
		for (i=0; i<modulo.length; i++){
			if(modulo[i].checked){
				isChecked = true;
				break;
				}
			}
	    
		if(isChecked){
				checkPid = document.getElementById(el1.name);	
					checkPid.checked = true;
					ifchecked(checkPid);
			}
		
		if(!isChecked){
				checkPid = document.getElementById(el1.name);	
					checkPid.checked = false;
					ifchecked(checkPid);
					
			}
	}

ma a questo punto avrei la difficoltà di recuperare i valori con php... quindi sono punto e a capo. La strada con l'array penso sia l'unica da seguire.

[damar3]

Così seleziono i nipoti...

function checkUnchekAll(input, index)
{
   var check = input.checked;
   alert(index);
   var clip = document.getElementById('dd'+index);
    if(clip.getElementsByTagName){
    var elems = clip.getElementsByTagName('input');
    for(i in elems)
       {
	     //alert(elems[i].value);
          elems[i].checked = check;
       }
    }
    else
    {
    alert('sono else');
    setValueInputForChildren(clip, check);
    }
}

Inoltre non vado mai nell'else... sempre +

[artorius]

quell'else l'ho fatto solo perché ci sono versioni geriatriche di IE che non implementano le funzioni per l'interrogazione del DOM in maniera corretta. E' giusto che non entri mai nell'else con la maggior parte dei Browser.