Tree view simple

Intro

le but : afficher un arbre comme ceci :

 foo
	foo1
		foo4
		foo5
	foo2
		foo6
	foo3

Fichier xul

 <tree flags="dont-build-content" flex="1" id="thetree">
    <treecols>
      <treecol id="nom"  label="nom" primary="true" flex="1" />
      <treecol id="prenom" label="prenom" flex="1"/>
    </treecols>
    <treechildren/>
 </tree>

La structure des données

Pour que cela soit simple au maximum, il faut une structure qui correspondent à ce qu'on veut afficher. On va donc avoir un tableau qui va comporter autant d'objet que de lignes.

  var gDataList = [];

Voici la structure des objets stockés dans gDataList :

 function dataInfo(){
    this.name="";
    this.firstname="";
    this.children=[]; // contient la liste du dataInfo
    this.parent=null; // pointe vers le dataInfo parent
    this.level = 0; // profondeur dans la hierarchie ( = nombre d'ancètre en fait)
    this.index = 0; // index de l'objet dans le tableau gDataList. utile pour getParentIndex
    this.nextSibling; // si le dataInfo est un fils, indique son frère suivant dans la liste des fils du parent
 }

Pour le remplissage du tableau, voir le fichier http://xulfr.org/sources/treeviewsimple/(..)

L'objet d'interface nsITreeView

 var theview =  {
	rowC[[ount:0]], // y mettre le nombre d'element gDataList.length
	[[selection:null]],
	[[treebox:null]],
	[[widget:null]],

	getCellText  : function (  row , col ) {
		if(col.id=='nom')
			return gDataList[row].name;
		else
			return gDataList[row].firstname;
	},
	getCellValue  : function (  row , col )  {return "";},
	getImageSrc  : function (  row , col )  {return "";},
	getLevel  : function (  row )  {
		return gDataList[row].level;
	},

	getParentIndex  : function (  row ){
		if(gDataList[row].parent)
			return gDataList[row].parent.index;
		else
			return -1;
	},

	hasNextSibling  : function (  row , afterIndex ){
		return (gDataList[row].nextSibling != null);
	},
	isContainer  : function (  row )    {
		return (gDataList[row].children.length > 0);
	},
	isContainerEmpty  : function (  row )  {
		return (gDataList[row].children.length == 0);
	},
	isContainerOpen  : function (  row )  { return true; },

	getProgressMode  : function (  row , col )   {},
	getCellProperties  : function (  row , col , properties ) { },
	getColumnProperties  : function ( col , properties ){},
	getRowProperties  : function (  row , properties ){ },
	isEditable  : function (  row , col )  {return false;},
	isSeparator  : function (  row )    {return false;},
	isSorted  : function ( )    {return false;},
	performAction  : function ( action )    {},
	performActionOnCell  : function ( action ,  row , colID )   {},
	performActionOnRow  : function (  action ,  row )   {},
	selectionChanged  : function ( )    {},
	setCellText  : function (  row , col , value )    {},
	setTree  : function ( tree )    { this.treebox = tree;},
	toggleOpenState  : function (  row ) { },
	canDrop : function ( row , orientation ) { return false;},
	drop  : function (  row ,  orientation ) {},
	cycleCell  : function (  row , col ) {},
	cycleHeader  : function ( col ) {}
 }

Ensuite il suffit de l'affecter au tree pour que l'affichage se produise :

 theview.rowCount= gDataList.length;
 document.getElementById("thetree").view = theview;

Demo

• *Depuis Firefox 1.5.0.4, il n'est plus possible d'utiliser un treeview personnalisé dans une appli web (problème de sécurité apparement). L'exemple suivant ne fonctionne donc que dans Firefox 1.5 à 1.5.0.3.**

La demo : http://xulfr.org/sources/treeviewsimple/

Aller plus loin

Voir comment faire un arbre plus évolué (branches que l'on peut plier/deplier) : TreeViewEvolué .