[Javascript] Dynamisch bewerken van Dtree - Softwareontwikkeling

donderdag 27 augustus 2009 16:22

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Ik ben aan het experimenteren met Dtree

Nu wil ik dynamisch nodes aan de tree toe kunnen voegen. Onderstaande probeer ik uit maar dat werkt niet omdat 'document.getElementById("mytree") null' geeft Speuren hier en op google geeft geen resultaat. Ik zoek daarbij vooral op "dynamisch en Dtree"

Wat ik ook probeer is in plaats van document.write om .....appendchild te gebruiken maar dan blijft mijn scherm helemaal leeg. Waarschijnlijk een beperking van Dtree maar daar is niet veel info meer van te vinden. De "uitvinder" is in ieder geval niet meer actief en een actief forum is er ook niet meer.

Onderstaande code bouwt een mooie tree op. Als ik op de button klik wil ik een node toevoegen. Dat lukt dus niet omdat er null terugkomt.

code:

 <html>
 <head>

<link rel="StyleSheet" href="dtree/dtree.css" type="text/css" />
<script type="text/javascript" src="dtree/vertdtree.js"></script>

<script type="text/javascript">
 
function addElement() {
    
    mytree.add(158, 150, 'test','team_index.asp?groupe_id=154', 'Zend Studio', '', '');
    document.getElementById('myTreeDiv').innerHTML = mytree.toString();
}
 
</script>
</head>

<body>
<div id="myTreeDiv">
 </div>
<h1>Horizontal Tree Example</h1>
<br>
<script language=javascript>
    var mytree = new dTree('mytree');
    
    mytree.add(146, -1, 'Designers', 'team_index.asp?groupe_id=146', 'Designers', '', '');
    mytree.add(145, -1, 'Developers', 'team_index.asp?groupe_id=145', 'Developers', '', '');
    mytree.add(148, 145, 'Desktop Developers', 'team_index.asp?groupe_id=148', 'Desktop Developers', '', '');
    mytree.add(147, 145, 'Web Developers', 'team_index.asp?groupe_id=147', 'Web Developers', '', '');
    mytree.add(149, 147, 'Asp.net Developers', 'team_index.asp?groupe_id=149', 'Asp.net Developers', '', '');
    mytree.add(151, 149, 'Asp.net 1.0', 'team_index.asp?groupe_id=151', 'Asp.net 1.0', '', '');
    mytree.add(152, 149, 'Asp.net 1.1', 'team_index.asp?groupe_id=152', 'Asp.net 1.1', '', '');
    mytree.add(153, 149, 'Asp.net 2.0', 'team_index.asp?groupe_id=153', 'Asp.net 2.0', '', '');
    mytree.add(150, 147, 'PHP Developers', 'team_index.asp?groupe_id=150', 'PHP Developers', '', '');
    mytree.add(154, 150, 'Zend Studio', 'team_index.asp?groupe_id=154', 'Zend Studio', '', '');

   document.getElementById('myTreeDiv').innerHTML = mytree.toString();
</script> 
 
<input type="button" value="Click Here" onClick="addElement();">
 </body>
 </html>

[ Voor 5% gewijzigd door Verwijderd op 29-08-2009 14:42 ]

donderdag 27 augustus 2009 22:30

Acties:

0 Henk 'm!

josjos

Ik heb ook veel gebruik gemaakt van Dtree, handig maar wat jij wil kan misschien wel niet..
Misschien onbruikbare tip maargoed:
Kijk eens hoe Magento het doet, er mooie Tree

vrijdag 28 augustus 2009 08:36

Acties:

0 Henk 'm!

Rekcor

JavaScript:

1	var mytree = document.getElementById("mytree");

Hiermee probeer je een HTML element met id="mytree" te pakken te krijgen, ik neem aan dat dat niet de bedoeling is. Verander regel 24 eens in

JavaScript:

1	var mytree = new dTree('mytree');

Daarmee maak je de variabele 'mytree' globaal, d.w.z. hij heeft overal in Javascript een waarde. Regel 11 kun je vervolgens verwijderen (want mytree bestaat al binnen die functie, omdat hij globaal is).

vrijdag 28 augustus 2009 09:56

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Rekcor schreef op vrijdag 28 augustus 2009 @ 08:36:
JavaScript:
1
var mytree = document.getElementById("mytree");
Hiermee probeer je een HTML element met id="mytree" te pakken te krijgen, ik neem aan dat dat niet de bedoeling is. Verander regel 24 eens in
JavaScript:
1
var mytree = new dTree('mytree');
Daarmee maak je de variabele 'mytree' globaal, d.w.z. hij heeft overal in Javascript een waarde. Regel 11 kun je vervolgens verwijderen (want mytree bestaat al binnen die functie, omdat hij globaal is).

Dan krijg ik een 'dtree' is undefined terug Tikfout gemaakt. Als ik bovenstaande probeer wordt de node niet toegevoegd en werkt het hide/unhide van de nodes niet meer

[ Voor 9% gewijzigd door Verwijderd op 28-08-2009 10:26 ]

vrijdag 28 augustus 2009 10:56

Acties:

0 Henk 'm!

Rekcor

Werk je in Firefox met de Foutconsole en/of Firebug? Ik ben benieuwd naar de foutmeldingen.

Overigens, ik ken Dtree niet en kan dus niet teveel specifieke vragen beantwoorden. Dat is volgens mij ook niet echt gebruikelijk op dit forum. Het kan zijn dat Dtree gewoon brak is, en hetgeen jij wil niet kan.

vrijdag 28 augustus 2009 11:05

Acties:

0 Henk 'm!

Rekcor

Trouwens, ik ben niet kapot van de constructie

JavaScript:

1	document.write(mytree);

Beter is om een divje aan te maken, bijv. met id 'myTreeDiv' en vervolgens de tree erin te zetten m.b.v.

JavaScript:

1	document.getElementById('myTreeDiv').innerHTML = mytree;

Ook in je functie addElement moet je dit dan doen.

[ Voor 9% gewijzigd door Rekcor op 28-08-2009 11:20 . Reden: typo ]

vrijdag 28 augustus 2009 14:16

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Rekcor schreef op vrijdag 28 augustus 2009 @ 10:56:
Werk je in Firefox met de Foutconsole en/of Firebug? Ik ben benieuwd naar de foutmeldingen.

Overigens, ik ken Dtree niet en kan dus niet teveel specifieke vragen beantwoorden. Dat is volgens mij ook niet echt gebruikelijk op dit forum. Het kan zijn dat Dtree gewoon brak is, en hetgeen jij wil niet kan.

Net firefox geinstalleerd met Firebug. Ik ken het nog niet heel erg goed dus nog even aan het puzzelen waar ik welke informatie vind

[ Voor 12% gewijzigd door Verwijderd op 28-08-2009 14:33 ]

vrijdag 28 augustus 2009 14:55

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Rekcor schreef op vrijdag 28 augustus 2009 @ 11:05:
Trouwens, ik ben niet kapot van de constructie
JavaScript:
1
document.write(mytree);
Beter is om een divje aan te maken, bijv. met id 'myTreeDiv' en vervolgens de tree erin te zetten m.b.v.
JavaScript:
1
document.getElementById('myTreeDiv').innerHTML = mytree;
Ook in je functie addElement moet je dit dan doen.

Aangepast. Is inderdaad netter maar resultaat blijft dat de het element bij de klik op de button niet toegevoegd wordt.

vrijdag 28 augustus 2009 16:02

Acties:

0 Henk 'm!

Rekcor

Verwijderd schreef op vrijdag 28 augustus 2009 @ 14:16:
[...]

Net firefox geinstalleerd met Firebug. Ik ken het nog niet heel erg goed dus nog even aan het puzzelen waar ik welke informatie vind

Ctrl+Shift+J is foutconsole
Firebug zit rechtsonderaan (ziet eruit als een torretje)

vrijdag 28 augustus 2009 16:15

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Rekcor schreef op vrijdag 28 augustus 2009 @ 16:02:
[...]

Ctrl+Shift+J is foutconsole
Firebug zit rechtsonderaan (ziet eruit als een torretje)

Mee aan het experimenteren. Krijg geen foutmeldingen. Kan ik ergens zien hoe een object opgebouwd is?

zaterdag 29 augustus 2009 09:16

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

schopje

Niemand een suggestie hoe ik bovenstaande werkend kan krijgen? Ik kan eventueel de code van de dtree.js file ook posten als dat helpt. Ik vraag niet om het helemaal uit te werken voor me maar een duw in de goede richting zou geweldig zijn.

zaterdag 29 augustus 2009 11:16

Acties:

0 Henk 'm!

Krooswijk.com

De code is inderdaad wel even handig. Heeft het MyTree object geen functie die zijn gegenereerde HTML output. B.v. iets van toString ofzo. Dan is het een kwestie van:

code:

1	document.getElementById('myTreeDiv').innerHTML = mytree.toString();

Verder heb je in Firebug een tabje JS waar je je DOM kan inspecteren. Daarin zie je of je node onder je tree wordt gehangen. Foutmeldingen komen in je console tabje te staan.

zaterdag 29 augustus 2009 12:17

Acties:

0 Henk 'm!

Rekcor

Post ook gelijk je html (als je toch bezig bent

)

zaterdag 29 augustus 2009 13:15

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Rekcor schreef op zaterdag 29 augustus 2009 @ 12:17:
Post ook gelijk je html (als je toch bezig bent )

Html staat in de ts

code:

1	document.getElementById('myTreeDiv').innerHTML = mytree.toString();

Ben ik al mee bezig geweest maar lukte nog niet. Ik ga het nog eens proberen.

Dit is de code van de dtree js file

knip, alleen relevante code

[ Voor 98% gewijzigd door André op 31-08-2009 12:12 ]

zaterdag 29 augustus 2009 14:44

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Krooswijk.com schreef op zaterdag 29 augustus 2009 @ 11:16:
De code is inderdaad wel even handig. Heeft het MyTree object geen functie die zijn gegenereerde HTML output. B.v. iets van toString ofzo. Dan is het een kwestie van:
code:
1
document.getElementById('myTreeDiv').innerHTML = mytree.toString();
Verder heb je in Firebug een tabje JS waar je je DOM kan inspecteren. Daarin zie je of je node onder je tree wordt gehangen. Foutmeldingen komen in je console tabje te staan.

Inderdaad heeft mytree een toString() functie. Ik heb nu mijn html hiermee aangepast (zie TS). Initieel werkt dat goed maar met mijn addelement functie werkt het niet.

In firebug geen foutmeldingen maar mijn node komt niet onder de tree te hangen. (refresht firebug eigenlijk zelf op het moment dat ik mijn button klik?)

Het tree object ziet er (deels) zo uit:

code:

<table border=0 bordercolor=blue cellpadding="0" cellspacing="0" ><tr><td valign=top align=center><img id="imytree9" src="img/page.gif" alt="" /></td></tr><tr><td valign=top align=center style='white-space:nowrap'><a id="smytree9" class="node" href="team_index.asp?groupe_id=154" title="Zend Studio" onclick="javascript: mytree.s(9);">Zend Studio</a></div></td></tr></table></td></tr></table> </td> </tr></table></td></tr></table></div> </td> </tr></table></td></tr></table></div> </td> </tr></table></td></tr></table></div> </td> </tr></table></div> config=Object icon=Object obj=mytree aNodes=[11]

[ Voor 36% gewijzigd door Verwijderd op 29-08-2009 14:55 ]

zaterdag 29 augustus 2009 16:05

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

Oplossing?

Het toevoegen van een node aan een bestaand object krijg ik niet aan de praat. Als ik echter het bestaande object op 'null' zet en deze vervolgens weer helemaal opnieuw opbouw werkt het wel.

Volgens mij moet dat kunnen zo of zitten er nadelen aan deze oplossing?

Niet kicken binnen 24 uur

[ Voor 7% gewijzigd door André op 31-08-2009 12:13 ]

zaterdag 29 augustus 2009 20:49

Acties:

0 Henk 'm!

ieperlingetje

heb je al eens geprobeerd je dtree ipv met getallen te vullen, via een variabele ? bijv. i
dan krijg je dit:

mytree.add(i, -1, 'Designers', 'team_index.asp?groupe_id=146', 'Designers', '', '');
i++;

natuurlijk moet je dan ook nog parent toevoegen, maar dat lijkt me dan niet meer zo moeilijk.

Edit: misschien heb je hier iets aan: http://blog.csdn.net/j2ee...e/2008/03/28/2224346.aspx

[ Voor 14% gewijzigd door ieperlingetje op 29-08-2009 20:56 ]

Tijdmachine | Nieuws trends

zondag 30 augustus 2009 11:00

Acties:

0 Henk 'm!

Verwijderd

Topicstarter

ieperlingetje schreef op zaterdag 29 augustus 2009 @ 20:49:
heb je al eens geprobeerd je dtree ipv met getallen te vullen, via een variabele ? bijv. i
dan krijg je dit:

mytree.add(i, -1, 'Designers', 'team_index.asp?groupe_id=146', 'Designers', '', '');
i++;

natuurlijk moet je dan ook nog parent toevoegen, maar dat lijkt me dan niet meer zo moeilijk.

Edit: misschien heb je hier iets aan: http://blog.csdn.net/j2ee...e/2008/03/28/2224346.aspx

Ah, mijn chinees is niet zo goed maar bedankt voor deze link (had ik nog niet gevonden)!!
Je variabele suggestie ga ik ook uitproberen.

Helaas werkt allemaal niet. Via de chinese site kwam ik er wel achter dat het toevoeg van een node aan de tree alleen maar kan voordat deze gebouwd is. Het lijkt er dus op dat de originele .add functie veranderd moet worden. Nu nog uitzoeken hoe dat moet....

[ Voor 16% gewijzigd door Verwijderd op 30-08-2009 19:09 ]

Pagina: 1

Reageer