Forums : Xul, Xbl, JS...

salut,

Essaye en ajoutant l'attribut

allowevents="true"

à ta balise <tree/>.

Ca permet de faire 'descendre' l'évènement clic vers les fils du tree. Peut-être que le problème vient de là.

Bon courage.

Ba j'ai essayé mais ca ne marche pas... Snif! Mé merci quand meme et si t'as d'autres idées n'ésites pas mistervince. Autrement je n'arrive pas a compter le nombres de lignes (non déroulées) qu'il y a dans mon tree j'a fait un ptit truc comme ca en JavaScript:

function test(Tree_id){
var nb_lignes=document.getElementById(Tree_id).childNodes.length;
alert (nb_lignes);
}

mais il me renvoi '3' alors que j'en ai bien 25... Ya t-il une methonde pour compter le nombre de lignes de l'arbre?

L'event n'est-il pas onCheckboxStateChange à la place de oncommand ?

Pour le nombre de ligne c'est normal, regarde la section sur les arbres dans le tutorial principal Rapidement :

les balises à l'intérieur des arbres ne sont pas interprétées commes les autres balises XUL => c'est trop long et trop lourd alors que l'arbre se veut etre un composant léger et rapide.

Du coup celles qui sont présente sont parsées pour construire un objet en mémoire. C'est la même chose pour un arbre en RDF. Au final ton arbre dans le DOM ne contient pas les balises TreeCell.

Si tu veux agir sur les lignes et les cellules de ton arbre, regarde du côté des treeview : ce sont les composants qui stockent en mémoire le contenu de l'arbre.

function test(Tree_id) {
    var tree = document.getElementById(Tree_id);

    alert(tree.view.rowCount);
}

Et pour ton problème initial tu peux peut etre utiliser aussi les treeview

function retest(Tree_id) {
    var tree = document.getElementById(Tree_id);

    var col = tree.columns.getColumnAt(0); //pour la première colonne

    var num = tree.view.rowCount;
    for(var i = 0; i < num; i++) {
        if(tree.view.getCellValue(i, col) == true)
            //case cochée
        else
            //case non cochée
    }
}

Un lien utile ;) : http://www.xulplanet.com/references/xpco(..)

Enfin toutes les interfaces des arbres te serviront à ce niveau.

Ouai!! merci papy ca marche à peut pres ton truc, en tout cas pour le nombre de lignes ca marche supers ca c'est cool mais par contre pour mon probleme de savoir si la colone de type checkbox est cochée ou pas la ca marche pas : lorsque je fait une alert de tree.view.getCellValue(i, col)

alert(tree.view.getCellValue(i, col));

JS me renvoi rien du tout je comprends pas il devrai au moin renvoyer False ou '0' mais nan j'ai rien est ce que ca ne viendrait pas de la feuille de style un peut bizar sur la colone de type checkbox don voici le code incorporé à ma page xul :

<html:style>
treechildren::-moz-tree-checkbox
{
  /* css pour les cellules non cochées */
  list-style-image: url("");
}
treechildren::-moz-tree-checkbox(checked)
{
  /* css pour les cellules cochées */
  list-style-image:  url("chrome://global/skin/checkbox/cbox-check.gif");
}
</html:style>

Merci de votre aide

C'est étonnant que ca ne te renvoi rien. De mon côté j'utilise exactement ce code, mais avec des vues d'arbres personnalisés et non des vues d'arbres RDF, ca vient peut être de là mais ca m'étonnerais...

Le problème vient peut être d'une erreur lors de l'exécution de la fonction getCellValue, les paramètres que tu lui passes sont corrects ? (i est bien dans la plage [0,n[ et col est bien de type nsIColumn)

En passant je te conseille d'utiliser dump plutôt qu'alert. Son effet est le même : afficher son paramètre. En revanche il est affiché dans la console, et non dans une popup alert bloquante ce qui change beaucoup de chose ;)

les paramètres que tu lui passes sont corrects ? (i est bien dans la >plage [0,n[ et col est bien de type nsIColumn)

Heu... i est bien dans la plage 0,n ca c'est sur mais pour ce qui est de col comment je sais le type?? voici mon JS complet:

function Verif_Coche(Tree_id) {
var cptcoch=0;
var cptnoncoch=0;
var tree = document.getElementById(Tree_id);
var col = tree.columns.getColumnAt(0); //pour la première colonne
var nb_lign = tree.view.rowCount;
   for(var i = 0; i < nb_lign; i++) {
       if(tree.view.getCellValue(i, col) == true){
           //case cochée
    cptcoch=cptcoch+1;
       }else{
           //case non cochée
    cptnoncoch=cptnoncoch+1;
}
   }
   alert(cptcoch+' : cases cochées');
   alert(cptnoncoch+' : cases non cochées');
}

Merci pour votre aide et votre temps perdu... ;-)

Pour voir le type de ta variable col, essai un dump ou un alert

var col = ...
dump(col);
var nb_lign = ...

ou

var col = ...
alert(col);
var nb_lign = ...

Sinon c'est bien ta première colonne qui contient les cases à cocher ?

Merci pour la réponse rapide

Alors l'alert de col me renvoi : object TreeColumn et oui c'est bien ma premiere colone qui est de type checkbox. Aidez mwa ca m'énerve de bloquer sur un ptit truc comme ca!!! ;-)

Eric:

L'event n'est-il pas onCheckboxStateChange à la place de oncommand ?

Nan j'ai essayé ca à pas l'air de marcher... Mais si t'a une idée n'ésite pas!! Merci

Bon OK maintenant ca marche grace à votre aide, ou tout du moins en partie...

Maintenant j'aimerai bien que lorsque l'utilisateur coche une checkbox devant une ligne 'mère' les lignes 'filles' se déroulent et se coche automatiquement. Le seul probleme est que aucune action du style 'oncommand()' ou autre ne fonctionne sur la colone de type checkbox. J'a cherché un peut partout et je ne vois pas d'ou vien le pb... Aidez mois svp parceque là je nage vraiment!!

Merci d'avance.

PS: Pour ceux que ca peut interesser par la suite voici le code JS tel qu'il est maintenant: (la fonction test à été renomée en Verif_Coche)

//Fonction de vérification des cases cochées//
function Verif_Coche(Tree_id) {
var cptcoch=0;
var cptnoncoch=0;
var tree = document.getElementById(Tree_id);//objet arbre
var col_chk = tree.columns.getColumnAt(0); //pour la première colonne de type checkbox
var nb_lign = tree.view.rowCount;//compte le nombre de lignes visible dans l'arbre
	for(var i = 0; i < nb_lign; i++) {//boucle de 0 à nombre de lignes
		if(tree.view.getCellValue(i, col_chk) == 'true'){//si la valeur de la ligne i de la colone 0 est 'true' (checkbox cochée)
			//case cochée
			cptcoch=cptcoch+1;
		}else{//sinon
			//case non cochée
			cptnoncoch=cptnoncoch+1;
		}
	}
   alert(cptcoch+' : cases cochées');
   alert(cptnoncoch+' : cases non cochées');
}

OK pour le problème, très 'bête' on va dire, une chaine à la place d'un booleen... désolé de t'avoir induit en erreur sur ce coup la.

Pour ta selection automatique des lignes filles, je ne vois pas non plus de solution simple (ca ne veut pas dire qu'il n'y en a pas :P)

Voila en gros comment je ferais si besoin :

ajouter un gestionnaire d'évènement click à l'arbre avec onclick

<tree id="monArbre" ... onclick="gestionCoche(this, event);">
    ...
</tree>

dans ce gestionnaire :

function gestionCoche(tree, event) {
    //creation d'objets pour passage par reference
    var row = new Object();
    var col = new Object();
    var child = new Object();

    //recuperation des infos sur la cellule clickée
    tree.treeBoxObject.getCellAt(event.clientX, event.clientY, row, col, child);

    //recuperation des valeurs passées par reference
    row = row.value;
    col = col.value;
    child = child.value;

    //si la cellule est dans une colonne de type checkbox
    if(col.type == Components.interfaces.nsITreeColumn.TYPE_CHECKBOX) {
        //on recupere l'etat et le niveau d'indentation de la cellule
        var etat = tree.view.getCellValue(row, col);
        var niveau = tree.view.getLevel(row);

        //on cherche toutes les lignes filles pour changer leurs valeurs
        var end = false;
        var i = row + 1;
        var l = tree.view.rowCount;
        while(i < l && !end)
            //si la cellule a un niveau <= a celle clické on a fini de parcourir les lignes filles
            if(tree.view.getLevel(i) <= niveau)
                end = true;

            //sinon on a une ligne fille
            else {
                tree.view.setCellValue(row, col, etat);
            }

            i++;
        }
    }
}

Le petit détail à voir est : est-ce que le gestionnaire est apellé avant ou après que la case ai changée d'état ? En fonction de ca, il faut inverser ou non la valeur que l'on donne aux lignes filles.

Enfin voila, aux corrections pres parce que je n'ai pas tester ce code, ca devrait fonctionner je pense.

Ok ca marche nikel ya juste une ptit modif à faire : dans le while :

  }else{
     tree.view.setCellValue(i, col, etat);
  }

sinon les lignes filles ne sont pas cochées. C'est exactement ce que je commencait à faire mais j'avais pas pensé à faire le gestionnaire d'evenement sur un click sur l'arbre je voyais ca plus sur un click sur les checkbox... Encore merci à tout le monde ca fait plaisir de voir que l'on peut compter sur beaucoup de personnes pour nous aider (nous les débutants!!)