Vue arborescente Ouvrir sa division respective dans le côté droit

Question

J'ai téléchargé un code Tree View et cela fonctionne très bien. Le code est ainsi:

d = new dTree('d'); 

     d.add(0,-1,'StratApps'); 
     d.add(1,0,'First Folder','example.html'); 

     d.add(2,1,'Packages','example1.html'); 
     d.add(3,2,'Pkg_Load_Dim','example2.html'); 
     d.add(4,2,'Pkg_Write_to_File','#'); 

     d.add(5,1,'Interfaces','#'); 
     d.add(6,5,'Int_Load_Order_Dim','#'); 
     d.add(7,5,'Int_Load_Channel_Dim','#'); 

     d.add(8,1,'Procedures','#'); 
     d.add(9,8,'Proc_Update_Order','#'); 
     d.add(10,8,'Proc_Process_Errors','#'); 

     document.write(d); 

Maintenant, je veux donner les liens pour ouvrir Divs respectifs dans le côté droit. Quelqu'un peut-il me aider à cet égard ...

Answer 1

Vous pouvez essayer quelque chose le long de ces lignes:

$('.dtree a.node').prop('onclick', '').click(function(e) { 
    var href = $(this).prop('href'); 
    $('#divOnRightSide').load(href); 
    e.preventDefault(); 
}); 

Fondamentalement, ce que vous dites est: pour chaque nœud (ie lien) il y a dans tous les dTree sur la page, supprimez l'événement onClick directement à partir du HTML et ajoutez un gestionnaire d'événements click. Dans ce gestionnaire, récupérez le href-attr et chargez le contenu de ce lien dans la div avec id = "divOnRightSide". Ensuite, donc aucune navigation de page n'est déclenchée, utilisez e.preventDefault().

Espérons que cela aide.

EDIT:

Voici un jsFiddle pour démontrer le but: jsFiddle.