[DOM] inserer une LI

Version imprimable

2 pièce(s) jointe(s)

Bonjour,

Je tente d'ajouter une <LI>, mais son positionnement s'effectue au niveau supérieur:

code Html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<ul id="dhtmlgoodies_tree2" class="dhtmlgoodies_tree">
<li id="node0" noDrag="true" noSiblings="true" noDelete="true" noRename="true"><a href="toto">Root node</a>		 
<ul>
    <li id="node1"><a href="#">Europe</a>
       <ul>
           <li id="node2" noDelete="true"><a href="#">Norway</a>
              <ul>
	     <li id="node3" noRename="true"><a href="#">Stavanger</a></li>
	     <li id="node6"><a href="#">Bergen</a></li>			 	     <li id="node7"><a href="#">Oslo</a></li>
	 </ul>
	</li>
	<li id="node8"><a href="#">United Kingdom</a>
....

.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
createItem : function(obj1,obj2)
		{
		var message = 'Ajouter un noeud sous :' + obj2.innerHTML + '\nidNode :' + obj2.parentNode.id +  '\nobj1 : ' + obj1.innerHTML;
		alert(message);
		 JSTreeObj = this;
                               var parentRef = obj2.parentNode;
                               var folderImg = document.createElement('IMG');
                               folderImg.src = this.imageFolder + this.sheetImage;
                               //Création du nouveau Noeud
                               var Nodenew = document.createElement('LI');
 
                               var newLink = document.createElement('a');
                                       newLink.setAttribute('href','removeChild.html');
                                               var linkText=document.createTextNode('TEST AJOUT');
                                               newLink.appendChild(linkText);
 
 
                               Nodenew.appendChild(folderImg);
                               Nodenew.appendChild(newLink);
                               parentRef.insertBefore(Nodenew);
         }

Le nouveau LI se positionne au niveau du <UL> auquel il appartient, j'ai joint les images pour mieux expliquer.

La source de cet exellent script :
http://www.dhtmlgoodies.com/

13/11/2009, 09h55
E.Bzz
Bonjour,

Citation:

Envoyé par totoche

Le nouveau LI se positionne au niveau du <UL> auquel il appartient

si je lis le début du code, c'est ce qui apparait
Code:

1 2 3 4 5 var message = 'Ajouter un noeud sous :' + obj2.innerHTML + '\nidNode :' + obj2.parentNode.id + '\nobj1 : ' + obj1.innerHTML; alert(message); JSTreeObj = this; var parentRef = obj2.parentNode;
* ici tu proposes d'ajouter "sous obj2"
* ici tu définis le parent de l'objet créé comme étant le parent de obj2 => les 2 objets ayant le même parent, ils sont au même niveau, logique.
Pour créer le nouvel objet sous obj2, il faudrait

Code:

var parentRef = obj2;

A+

Ce que je cherche à faire c'est d'inserer le noeud entre par exemple
Stavanger et Bergen,

Ex :
Code:

1 2 3 <li id="node3" noRename="true"><a href="#">Stavanger</a></li> <li id="nodeXX"><a href="#">TEST AJOUT</a></li> <li id="node6"><a href="#">Bergen</a></li>

13/11/2009, 10h12
E.Bzz

J'ai bien compris ...
Mais tout dépend des objets que tu passes en paramètre à ta fonction.
Et comme on ne voit pas ces paramètres je t'explique juste le principe et ce que je constate dans ton code.
... et au passage que ta trace n'est pas correcte puisqu'elle n'affiche pas la bonne info : relis ;)

A+
13/11/2009, 10h22
totoche

1 pièce(s) jointe(s)
Je pense que mon probleme viens du fait que je n'arrive pas a récupérer la balise <ul>, afin de faire le appendChild dessus, car en ajoutant:
Code:

1 2 3 4 5 var ul = document.createElement('UL'); ul.style.display='block'; parentRef.appendChild(ul); ul.appendChild(Nodenew);
le positionnement est presque bon, il y a juste un petit décalage cf image
13/11/2009, 11h14
totoche

Citation:

Envoyé par E.Bzz

J'ai bien compris ...
Mais tout dépend des objets que tu passes en paramètre à ta fonction.
Et comme on ne voit pas ces paramètres je t'explique juste le principe et ce que je constate dans ton code.

la fonction :

Code:

createItem : function(obj1,obj2)

obj2 est le noeud cliqué ex :<li id="node3" noRename="true"><a href="#">Stavanger</a></li>
13/11/2009, 11h24
E.Bzz
Si c'est le noeud cliqué, on en revient là

Citation:

Envoyé par E.Bzz

Pour créer le nouvel objet sous obj2, il faudrait

Code:

var parentRef = obj2;

Par contre, je vois 2 cas à gérer :
- ul existe déjà sous obj2 : il suffit d'y ajouter le nouveau <li>
- ul n'existe pas encore sous obj2 : il faut créer <ul> avant d'y ajouter le nouveau <li>
A+

Je suis un :boulet:,
voila la situation initiale
Code:

1 2 3 4 5 6 7 8 <li id="node2"><a href="#">Norway</a> <ul> <li id="node3"><a href="#">Stavanger</a></li> <li id="node6"><a href="#">Bergen</a></li> <li id="node7"><a href="#">Oslo</a></li> </ul> </li>
après avoir cliqué sur Stavanger j'aimerai avoir :
Code:

1 2 3 4 5 6 7 8 9 <li id="node2"><a href="#">Norway</a> <ul> <li id="node3"><a href="#">Stavanger</a></li> <li id="nodeX"><a href="#">Test</a></li> <li id="node6"><a href="#">Bergen</a></li> <li id="node7"><a href="#">Oslo</a></li> </ul> </li>
avec var parentRef = obj2; Test s'affiche entre Stavanger et Bergen mais sous Norway, le <li> ne se crée pas dans le <ul>

13/11/2009, 11h51
E.Bzz

Alors (dans ce cas au moins), il vaudrait mieux utiliser insertBefore() en prenant comme référence obj2.nextSibling()

... et encore, si il existe. Parce que sinon il faut revenir à appendChild() avec obj2.parentNode en référence :aie:

A+

ça marche tjs pas :calim2:
Je ne comprends pas j'ai utilisé la même démarche que pour le drag n' drop qui lui fonction.
en drag n' drop et dans createItem les nextSib.innerHTML sont identiques

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
createItem : function(obj1,obj2)		
		{
JSTreeObj = this;
 
var nextSib = obj2.parentNode.nextSibling;
 
var folderImg = document.createElement('IMG');
 
folderImg.src = this.imageFolder + this.sheetImage;
var Nodenew = document.createElement('LI');
var newLink = document.createElement('a');
newLink.setAttribute('href','test.html');
var linkText=document.createTextNode('Test');
newLink.appendChild(linkText);
Nodenew.appendChild(folderImg);
Nodenew.appendChild(newLink);
 
//Insertion du noeud dans l'arbre			
nextSib.parentNode.insertBefore(newLink,nextSib);

le nouveau noeud ne mets pas dans le entre Stavanger et Oslo j'ai quelque chose comme ça

Code:

1
2
3
4
5
6
7
8
9
 
<li id="node2" noDelete="true"><a href="#">Norway</a>
<li id="xxx"><a href='test.html'>Test</li>
<ul>
<li id="node3" noRename="true"><a href="#">Stavanger</a></li>
<li id="node6"><a href="#">Bergen</a></li>
<li id="node7"><a href="#">Oslo</a></li>
</ul>
</li>

13/11/2009, 15h12
E.Bzz

Code:

obj2.parentNode.insertBefore(Nodenew,nextSib);

non ? :?

A+
13/11/2009, 15h15
E.Bzz

Citation:

Envoyé par totoche

la fonction :

Code:

createItem : function(obj1,obj2)

obj2 est le noeud cliqué ex :<li id="node3" noRename="true"><a href="#">Stavanger</a></li>

Quel est exactement le noeud qui déclenche le createItem ?
Le <li> ou le <A> ?
Parce que si c'est le <A>, on se plante déjà d'un niveau (parentNode.parentNode) ...

A+

1 pièce(s) jointe(s)

c'est le <LI>

je te joins les sources
j'ai juste modifié
----------------------------------------------
var sheetImage;
this.sheetImage = 'dhtmlgoodies_sheet.gif';
-----------------------------------------------

if(this.renameAllowed)menuModel.addItem(2,'Rename','','',false,'JSTreeObj.renameItem');
//--> TOTOCHE 11/2009 : Ajout fonctionnalité Create
menuModel.addItem(5,'Create','','',false,'JSTreeObj.createItem');
------------------------------------------------------------------
Dans init.tree pour le dernier niveau mettre une feuille plutôt qu'1 dossier
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ... var folderImg = document.createElement('IMG'); if(!noDrag)folderImg.onmousedown = JSTreeObj.initDrag; folderImg.onmousemove = JSTreeObj.moveDragableNodes; var subItems2 = menuItems[no].getElementsByTagName('LI'); if(subItems2.length > 0) { //--> TOTOCHE //if(menuItems[no].className){ //folderImg.src = this.imageFolder + menuItems[no].className; //}else{ folderImg.src = this.imageFolder + this.folderImage; }else{ folderImg.src = this.imageFolder + this.sheetImage; } menuItems[no].insertBefore(folderImg,aTag); ...
---------------------------------------------------------------
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 createItem : function(obj1,obj2) { JSTreeObj = this; var nextSib = obj2.parentNode.nextSibling; var folderImg = document.createElement('IMG'); folderImg.src = this.imageFolder + this.sheetImage; var Nodenew = document.createElement('LI'); var newLink = document.createElement('a'); newLink.setAttribute('href','removeChild.html'); var linkText=document.createTextNode('Test'); newLink.appendChild(linkText); Nodenew.appendChild(folderImg); Nodenew.appendChild(newLink); nextSib.parentNode.insertBefore(Nodenew,nextSib); } ,
Merci de ton aide

13/11/2009, 15h43
E.Bzz

Désolé, je vais pas avoir le temps de mettre ça en place pour tester.
Par contre, tu as essayé, ça :

Citation:

Envoyé par E.Bzz

Code:

obj2.parentNode.insertBefore(Nodenew,nextSib);

non ? :?

Ça donne quoi ?

A+

rien ne s'affiche...

Code:

1
2
3
4
 
var nextSib = obj2.parentNode.nextSibling;
...
obj2.parentNode.insertBefore(Nodenew,nextSib);

15/11/2009, 00h08
totoche

Merci E.Bzz
Une image cachée... contenue dans le grand-père était la source de mon erreur
tout fonctionne impec
Merci encore pour ton aide
:ccool: