[php] Extreem grote tree bouwen.

[Verwijderd]

Hallo,

Ik ben van plan om een extreem groot tree menu te gaan bouwen. Ik kan dit natuurlijk lekker simpel helemaal serverside doen, maar dan ben ik mijn performance kwijt. Wat ik dus wil is alleen datgene wat men nodig heeft te laden.

Een goed voorbeeld hiervan is het treen menu van MSDN.

Nu wil ik dit alleen in Mysql en php bouwen.
Ik heb hem nu zover dat ik de hele tree opbouw met javascript en php. Wanneer ik nu teveel records in de dbs heb, dan krijg ik de melding van IE da het script te lang is en of ik door wil gaan.

Dit komt doordaat ik alle javascript dynamisch opbouw en dit dus een enorme file wordt. Hoe kan ik dit nu op een mooie manier oplossen? Ik wil echt het load-on-demand principe gebruiken.

Ik zat te denken aan een iframe en dan telkens stukje inladen. Wie heeft al eens eerder met dit bijltje gehakt? Alle tips en suggesties zijn welkom. Misschien zijn er wel hele mooie oplossingen voor. MSDN heeft het in ieder geval wel netjes opgelost. Helaas is dit ASP

[ Voor 17% gewijzigd door Verwijderd op 19-06-2003 16:54 ]

[Verwijderd]

Mag ik je uit ervaring 1 tipje geven? Ga voor een treeview altijd voor XML -> XSL transformaties. Dat bespaart je heel vaak je browser opnieuw opstarten.

Wat linkjes met waar ik op doel. Alle treeviews in dhtml hebben er last van, zelfs de .Net Treeview.

http://support.microsoft....spx?scid=kb;EN-US;q269802
http://support.microsoft....aspx?scid=kb;en-us;183110
http://support.microsoft....aspx?scid=kb;en-us;319546

http://groups.yahoo.com/group/wdf-dom/message/3539
http://www.softcomplex.com/forum/viewthread.php?tid=258
http://www.treeview.net/treemenu/faq.asp

[Verwijderd]

Laad voor elk submenu een pagina in een verborgen iframe die met behulp van javascript je hoofdnavigatie aanpast.

[Tranq]

Misschien is dit wat voor je?

xloadtree

[Verwijderd]

je moet een mysql tabel maken met de volgende gegevens
-id > unieke id
-sub > zo ja, van welk id?
-name > display naam
-url > naam welke locatie

dan in je php
select where id = uitklapid
en dan de sub daarvan uithalen, die gegevens ophalen, is dit een sub? dan haal de root daarvan op, totdat je bij uiteindelijke root bent.

(denk ik best wel onduidelijk, maar in deze richting)

[Verwijderd]

Fragmentation: Zo heb ik het precies gedaan, werkt perfect.
Gordijnstok: Daar was ik al bang voor. Ik kom het ook overal tegen.
Tranq: Ik was die ook al tegengekomen. Zag er in eerste instantie goed uit. Ook weer XML he? Ben er nog niet zo'n held in om eerlijk te zijn.

Cheatah: Daar ga ik eens over nadenken. In een iframe kun je mooi serverside pagina's laden op het moment dat je ze nodig hebt. En je hoeft in principe maar 1 submenu tegelijk open te hebben. Wel moet het menu in principe oneindig diep zijn, dus dat wordt nog wel lastig.

[beetle71]

JavaScript:

<script language="javascript">
function laadscript(){ 
x=document.createElement('script'); 
x.src='de url van je script';   
x.type='text/javascript'; 
document.body.appendChild(x); 
}
</script>

Hiermee kun je extra javascript laden zonder dat je dat eerst in een iframe oid moet laden.

[Verwijderd]

Ik kan iedereen aanbevelen om niet de xloadtree of xtree van webfx te gebruiken. Op het eerste gezicht ziet die er mooi uit, maar er zitten.

1: ontieglijk veel bugs in, en erg flexibel is die niet
- geen reload method op de root node wegens bugs
- geen enkel type node, waardoor je xloadtree methods niet kunt uitvoeren omdat het een xtree node betreft
- ze gebruiken .focus en .blur wat resulteerd in meerdere focussed items, nog een bug
- de treeview freezed, hangt, en maakt je leven zuur.
- geen mogelijkheid om drag & drop te gebruiken, of om nodes te swappen, of om nodes te updaten, wegens technische obstakels
- geen mogelijkheid om meerdere rootnodes te declareren
- geen mogelijkheid om rootnode via xml te declareren (lekker generiek)

2: dit is dus een typisch geval van een treeview die freezed

[ Voor 57% gewijzigd door Verwijderd op 20-06-2003 08:57 ]

[SchizoDuckie]

beetle71 schreef op 19 June 2003 @ 20:48:

JavaScript:

<script language="javascript">
function laadscript(){ 
x=document.createElement('script'); 
x.src='de url van je script';   
x.type='text/javascript'; 
document.body.appendChild(x); 
}
</script>

Hiermee kun je extra javascript laden zonder dat je dat eerst in een iframe oid moet laden.

hmm die kon ik nog niet

[Verwijderd]

Papa Eend schreef op 20 June 2003 @ 10:10:
[...]


hmm die kon ik nog niet

Dat is nog niet eens het leuke, het leuke is pas, om zonder refresh van je browser acties uit te voeren. Ik gebruik het zelf ook, en het scheelt echt enorm in de bandbreedte met een zware visuele gui.

<script type="text/javascript" id="actions" src="init.cfm"></script>
document.getElementById('actions').src = 'api.cfm'

[Verwijderd]

Dat is interessant. Gordijnstok, wat zijn jouw ervaringen? Heb je zelf oplossingen die beter zijn dan Xtree?

[Verwijderd]

De tree van 15seconds die xml -> xslt doet, is velen malen beter. Hij is dan niet crossbrowser, maar dat meot wel te doen zijn.

[André]

En deze dan.

Die heb ik getest met ongeveer 10k items, en hij bestaat compleet uit layers. Ik heb met deze tree ook nog nooit het probleem gehad dat hij de melding gaf dat de pagina traag is.

Alleen je laad wel in 1 keer de hele tree in.

[ Voor 10% gewijzigd door André op 20-06-2003 16:42 ]

[Bluestorm]

Maar hoe groot wordt die tree.js dan wel niet? met 10k items?
Ik heb meerdere trees geschreven ondertussen... snelste was tot nu toe eentje die de treestructuur uit een xmlbestand las... maar dat bestand werd bij 10k items wel in de buurt van de 1MB... en dat is niet handig voor webgebruik.

Wat die tree van msdn doet is toch het beste voor grote trees denk ik. Je kunt dat zelfde principe ook best omschrijven zodat het in mozilla werkt. Je maakt php scriptje die verschillende xml files genereert voor bepaalde stukken van je tree. En op het moment dat je ze nodig hebt haal je dat op en voeg je wat extra layers toe in je DHTML boompje.

[Soultaker]

Verwijderd schreef op 20 June 2003 @ 08:52:
Ik kan iedereen aanbevelen om niet de xloadtree of xtree van webfx te gebruiken. Op het eerste gezicht ziet die er mooi uit, maar er zitten.
1: ontieglijk veel bugs in, en erg flexibel is die niet
2: dit is dus een typisch geval van een treeview die freezed

Dat zijn dus eigenlijk 3 puntjes . Maar ik zie alleen maar punten van kritiek op de implementatie; het principe zelf leek me best solide (aangenomen dat er een XML-parser bij ECMAScript hoort?). Klopt het dat de methode en sich wel (goed) bruikbaar zou zijn als 'ie fatsoenlijk geïmplementeerd zou worden? Het ging hier immers om de techniek, niet om bestaande code.

[Soultaker]

André schreef op 20 juni 2003 @ 16:41:
En deze dan.

Hij doet helemaal niets in Mozilla 1.4?

Alleen je laad wel in 1 keer de hele tree in.

Dat is dus per definitie niet geschikt voor 'extreem grote' bomen (zie topic title).

[Verwijderd]

Soultaker schreef op 20 June 2003 @ 17:13:
[...]

Dat zijn dus eigenlijk 3 puntjes . Maar ik zie alleen maar punten van kritiek op de implementatie; het principe zelf leek me best solide (aangenomen dat er een XML-parser bij ECMAScript hoort?). Klopt het dat de methode en sich wel (goed) bruikbaar zou zijn als 'ie fatsoenlijk geïmplementeerd zou worden? Het ging hier immers om de techniek, niet om bestaande code.

Je leest mijn punten niet. De tree werkt gewoon even heel lomp gezegd "totaal niet!". Ik had deze tree dus uitgeprobeerd, en kon telkens mijn browser afsluiten via de taskmanager. Ik moest voor zowat elke method een workaround schrijven, en voor complexe applicaties als een CMS was dit gewoon nodig. In productie kan ik me dat niet veroorloven in een CMS waar complete computer nonos mee bezig zijn. Heel hard, maar zo is het nou eenmaal.

De implementatie echter is gewoon goed. Punt is alleen dat hij zo is opgezet dat het een makkelijk slachtoffer is voor Msie bugs. Bugs waar je niet omheen kan, zelfs niet met een workaround.

Omdat ik on demand XML nodig had, of eigenlijk wilde weges het gemak vielen een hoop treeviews al af. Er is niet al teveel aanbod van treeviews die veel methods beschikbaar hebben. Het zelf schrijven van een goede treeview is niet zo moeilijk, maar kost wel heel veel tijd.

Wat MDSN doet is niet bruikbaar. MSDN gebruikt namelijk geen images.

Ik ben dus uiteindelijk uitgekomen om de treeview van 15seconds. Een echt oudje, maar werkt beter dan menigeen treeview beschikbaar. Door het gebruik van XML hoef ik bij aanpassingen in functionaliteit alleen Javascript te schrijven, en voor transformatie XSLT. Een prima scheiding van lagen mijnziens.

Met kleine aanpassingen kan ik drag & drop doen, complete nodes omgooien, kortom de flexibiliteit is een dikke 100%.

[Verwijderd]

Hmm, die van 15seconds ziet er interessant uit. Daar ga ik me eerst maar eens in verdiepen. Die astree ziet er ook solide uit, maar zoiets heb ik nu ook en ik ben bang op den duur toch tegen hetzelfde probleem aan te lopen.
Ik hou jullie op de hoogte van ontwikkelingen.

[rig0r]

Die van 15seconds is idd interessant, had em nog niet eerder gezien. Wat me wel opvalt is dat ie wat trager is vergeleken met andere trees. Het lijkt alsof ie bij elke klik opnieuw de data gaat ophalen, ik zie iig een hoop netwerk activiteit als ik een folder openklik. Het komt ook een beetje 'sluggish' over.

Is daar nog wat aan te doen Gordijnstok ?

[Verwijderd]

Nog een vraagje. Ik hoor iedereen erover om XML te gebruiken. Maar waarom?? Hoe moet ik dit dan voor me zien?

1. Ik lees met een query de hele database uit en maak hier brokken XML files van.
2. Stuur de XML file met de rootmenu structuur naar de client.
3. Wanneer ik dan in de client een beetje in het menu klik, dan haal ik telkens het benodigde XMLbrok op en plak dit ertussen.

Moet ik het zo ongeveer zien? Of stuur ik die XML brokken allemaal in een keer naar de client? Of moet ik het helemaal niet in brokken opdelen?

Vragen genoeg dus en ik hoop dat iemand me een beetje duidelijkheid kan verschaffen.

Ik heb dat ding van 15seconds bekeken en dat ziet er erg slick uit. Alleen werkt deze in alle voorbeelden met een statische XML file, dus kan ik niet echt zien hoe het nu met een mega XML file werkt. Of gaat dit hetzelfde?

Bedankt voor elke uitleg.

[Mithrandir]

Verwijderd schreef op 23 juni 2003 @ 11:18:
Nog een vraagje. Ik hoor iedereen erover om XML te gebruiken. Maar waarom?? Hoe moet ik dit dan voor me zien?

1. Ik lees met een query de hele database uit en maak hier brokken XML files van.
2. Stuur de XML file met de rootmenu structuur naar de client.
3. Wanneer ik dan in de client een beetje in het menu klik, dan haal ik telkens het benodigde XMLbrok op en plak dit ertussen.

Moet ik het zo ongeveer zien? Of stuur ik die XML brokken allemaal in een keer naar de client? Of moet ik het helemaal niet in brokken opdelen?

Vragen genoeg dus en ik hoop dat iemand me een beetje duidelijkheid kan verschaffen.

Ik heb dat ding van 15seconds bekeken en dat ziet er erg slick uit. Alleen werkt deze in alle voorbeelden met een statische XML file, dus kan ik niet echt zien hoe het nu met een mega XML file werkt. Of gaat dit hetzelfde?

Bedankt voor elke uitleg.

Het zou moeten werken met brokken

Eerst haalt hij alleen het 'root' brok op. Als je dan op node 1 klikt, haalt hij de benodigde informatie van node 1 op. Als je op node 1.1 klikt, haalt hij de informatie op uit node 1.1, etc.


Op deze manier heb je het minste dataverkeer, maar het kan op het moment dat je op een node klikt wat meer tijd kosten.

[Kaastosti]

Ik heb iets dergelijks gebouwd met PHP, MySQL en SMARTY. Wat ik doe ik gebruik maken van sets. Een set bevat een aantal items en een 'moeder'-item. Ik kan met functies van ieder item de moeder, de broertjes en de kinderen ophalen.

Deze zet ik in een array met de 'titel' van het item, het niveau waarop het zit, en of het zichtbaar is of niet (onzichtbaar is een uitklapmenu). Daarna loop ik er met SMARTY (template engine... smarty.php.net) doorheen met een aantal vergelijkingen. Die bouwt dan uiteindelijk het menu met html en javascript op.

Werkt wel ok en redelijk snel, alhoewel het natuurlijk nog niet perfect is. Op hotscripts.com zijn goede voorbeelden te vinden van 100% javascript gestuurde menu's, alleen zit je daar wel vast een een standaard breedte- en hoogte van items.

In mijn geval moest het helemaal dynamisch zijn, dus voornamelijk html met alleen javascript voor de uitklapmenu's

[Verwijderd]

Ok, dat van die brokken is duidelijk, maar hoe kan ik zonder te refreshen of het iframe opnieuw te laden oid een ander brok ophalen van de server?

[Verwijderd]

rig0r schreef op 22 June 2003 @ 15:06:
Die van 15seconds is idd interessant, had em nog niet eerder gezien. Wat me wel opvalt is dat ie wat trager is vergeleken met andere trees. Het lijkt alsof ie bij elke klik opnieuw de data gaat ophalen, ik zie iig een hoop netwerk activiteit als ik een folder openklik. Het komt ook een beetje 'sluggish' over.

Is daar nog wat aan te doen Gordijnstok ?

Netwerk activiteit kan wel kloppen. Er is in Msie een bug die inhoudt, dat images, toegekend via XSLT of InnerHTML niet uit je cache worden gehaald. Daar kun je momenteel nog helemaal niets aan doen. Ik heb het opgelost door pas na het zetten van de XSLT en innerHTML de images toe te kennen

De tree van 15 seconds kan volgens mij nog niet xml on demand out of the box, en het reloaden van een node zat er ook nog niet niet. Die heb ik er dus zelf bijgemaakt.

Voordeel van de tree van 15seconds is onderandere de opbouw. Doordat het zo basic mogelijk is gehouden worden zaken als swapNode methods, etc. veel makkelijk om aan te roepen, zonder eerst een hele recursieve search te doen.

[Verwijderd]

Ik post wel even een werkend voorbeeld: moet helaas over meerdere posts, anders krijg ik foutmelding van dit forum omdat de stringlengte te lang is:

[Verwijderd]

Laat ik eens aardig zijn Hier mijn huidige XSLT, Javascript en Tree Api. Er staat wat
ColdFusion code tussen, dat moet je zelf even filteren, het is niet belangrijk voor de werking:)


tree.xsl.cfm

PHP:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl" language="JavaScript">
<cfoutput>
<xsl:template match="tree">
  <xsl:apply-templates select="entity"/>
</xsl:template>

<xsl:template match="entity">
  <div 
    treeItem="true"
    onclick="window.event.cancelBubble = true;clickOnEntity(this);return false;" 
    ondblclick="window.event.cancelBubble = true;dblClickOnEntity(this);return false;" 
    onselectstart="return false" 
    ondragstart="return false">
  <xsl:attribute name="image"><xsl:value-of select="image"/></xsl:attribute>
  <xsl:attribute name="imageOpen"><xsl:value-of select="imageOpen"/></xsl:attribute>
  <xsl:attribute name="open">false</xsl:attribute>
  <xsl:attribute name="id">f<xsl:value-of select="@id"/></xsl:attribute>
  <xsl:attribute name="oncontextmenu">clickOnEntity(this,false,true);onNodeContextEvent(this);return false;</xsl:attribute>
  <xsl:attribute name="xmlSrc"><xsl:value-of select="@xmlSrc"/></xsl:attribute>
  <xsl:if test="instanceId">
    <xsl:attribute name="instanceId"><xsl:value-of select="instanceId"/></xsl:attribute>
  </xsl:if>
  <xsl:if test="parentId">
      <xsl:attribute name="parentId"><xsl:value-of select="parentId"/></xsl:attribute>
  </xsl:if>
  <xsl:if test="objectType">
      <xsl:attribute name="objectType"><xsl:value-of select="objectType"/></xsl:attribute>
  </xsl:if>
  <xsl:if test="positionNumber">
      <xsl:attribute name="positionNumber"><xsl:value-of select="positionNumber"/></xsl:attribute>
  </xsl:if>  
  <xsl:if test="objectName">
      <xsl:attribute name="objectName"><xsl:value-of select="objectName"/></xsl:attribute>
  </xsl:if>
  <xsl:if test="instanceStatus">
      <xsl:attribute name="instanceStatus"><xsl:value-of select="instanceStatus"/></xsl:attribute>
  </xsl:if>
  <xsl:if test="startDateTime">
      <xsl:attribute name="startDateTime"><xsl:value-of select="startDateTime"/></xsl:attribute>
  </xsl:if>
  <xsl:if test="endDateTime">
      <xsl:attribute name="endDateTime"><xsl:value-of select="endDateTime"/></xsl:attribute>
  </xsl:if>
  <xsl:if test="description">
      <xsl:attribute name="description"><xsl:value-of select="description"/></xsl:attribute>
  </xsl:if>
  <xsl:if test="isLastVersionPublished">
      <xsl:attribute name="isLastVersionPublished"><xsl:value-of select="isLastVersionPublished"/></xsl:attribute>
  </xsl:if>
  <xsl:if test="lastVersion">
      <xsl:attribute name="lastVersion"><xsl:value-of select="lastVersion"/></xsl:attribute>
  </xsl:if>
  <xsl:if test="currentVersion">
      <xsl:attribute name="currentVersion"><xsl:value-of select="currentVersion"/></xsl:attribute>
  </xsl:if>
  <xsl:if test="lastVersionId">
      <xsl:attribute name="lastVersionId"><xsl:value-of select="lastVersionId"/></xsl:attribute>
  </xsl:if>
  <xsl:if test="usesVersioning">
      <xsl:attribute name="usesVersioning"><xsl:value-of select="usesVersioning"/></xsl:attribute>
  </xsl:if>
  <xsl:if test="isPageObject">
      <xsl:attribute name="isPageObject"><xsl:value-of select="isPageObject"/></xsl:attribute>
  </xsl:if>  
  <!--- file attributes --->
  <xsl:if test="dName">
      <xsl:attribute name="dName"><xsl:value-of select="dName"/></xsl:attribute>
  </xsl:if> 
  <xsl:if test="dPath">
      <xsl:attribute name="dPath"><xsl:value-of select="dPath"/></xsl:attribute>
  </xsl:if> 
  <xsl:if test="dType">
      <xsl:attribute name="dType"><xsl:value-of select="dType"/></xsl:attribute>
  </xsl:if>
  <xsl:attribute name="style">
    background-repeat: repeat-y;
  <xsl:if expr="depth(this) > 2">
    display: none;
    <xsl:choose>
      <xsl:when expr="this.parentNode.parentNode.parentNode.parentNode.nextSibling != null">
        background-image: url(../../visuals/I.gif);
      </xsl:when>
      <xsl:otherwise>
        <xsl:if expr="this.parentNode.parentNode.nextSibling != null">
          background-image: url(../../visuals/I.gif);
        </xsl:if>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:if>
   <xsl:choose>
        <!--- root directory has no padding-left --->
        <xsl:when match=".[dType = 'root']">
            cursor: hand;
        </xsl:when>
        <!--- all other nodes have padding-left --->
        <xsl:otherwise>
            padding-left: 20px;
            cursor: hand;
        </xsl:otherwise>
    </xsl:choose>
  </xsl:attribute>
    <table border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td valign="middle" nowrap="nowrap"><img border="0" id="plusImage" align="absMiddle" hspace="0" vspace="0">
          <xsl:choose>
              <xsl:when test="@xmlSrc">
                <xsl:choose>
                    <xsl:when expr="this.nextSibling != null">
                        <xsl:attribute name="src">../../visuals/TPlus.gif</xsl:attribute>
                    </xsl:when>
                    <xsl:otherwise>
                        <xsl:attribute name="src">../../visuals/LPlus.gif</xsl:attribute>
                    </xsl:otherwise>
                </xsl:choose>
              </xsl:when>
              <xsl:otherwise>
                <xsl:choose>
                    <xsl:when expr="this.nextSibling != null">
                        <xsl:attribute name="src">../../visuals/T.gif</xsl:attribute>
                    </xsl:when>
                    <xsl:otherwise>
                        <xsl:attribute name="src">../../visuals/L.gif</xsl:attribute>
                    </xsl:otherwise>
                </xsl:choose>
              </xsl:otherwise>
          </xsl:choose>
          </img><img border="0" id="image" vspace="0" hspace="0" align="absMiddle">
            <xsl:attribute name="SRC">
              <xsl:value-of select="image"/>
            </xsl:attribute>
          </img>
        </td>
        <td valign="middle" nowrap="nowrap">
        <a class="treeitem" id="anchor">
        <xsl:attribute name="href">
            <xsl:choose>
                <xsl:when test="href">
                    <xsl:value-of select="href" />
                </xsl:when>
                <xsl:otherwise>
                    javascript:void(0)
                </xsl:otherwise>
            </xsl:choose>
        </xsl:attribute>
        <xsl:if test="isLocked">
        <xsl:choose>
            <xsl:when match=".[isLocked=1]">
                <xsl:attribute name="STYLE">
                color: gray;
                </xsl:attribute>            
            </xsl:when>
            <xsl:otherwise>
                <xsl:attribute name="STYLE">
                </xsl:attribute>
            </xsl:otherwise>
        </xsl:choose>
         </xsl:if>
        <xsl:value-of select="description"/></a>
        </td>
      </tr>
    </table>
    <xsl:if test="@xmlSrc">
        <div style="display: none;padding-left: 20px;cursor:hand;">Items worden ingeladen...</div> 
    </xsl:if>
  </div>
</xsl:template>

</xsl:stylesheet>
</cfoutput>
<cfsetting showdebugoutput="No">

[Verwijderd]

tree.js.cfm

PHP:

<cfsetting showdebugoutput="No">
<cfoutput>
var selectedItem;
    window.onload = function() {
        loadItems(folderTree.getAttribute("xmlSrc"), folderTreeItems);
            
        selectedItem = folderTree.childNodes[0];
        selNode = folderTree.childNodes[0];
        expand(folderTree.childNodes[0]);
        
        if(window.node_onclick){
            node_onclick();
        }
    }   
window.onunload = function() {window.status='';}

function loadItems(xmlSrc, container) {
  var xmlDoc
  var xslDoc

  xmlDoc = new ActiveXObject('Microsoft.XMLDOM')
  xmlDoc.async = false;
  xmlDoc.validateOnParse = false;

  xslDoc = new ActiveXObject('Microsoft.XMLDOM')
  xslDoc.async = false;
  xmlDoc.validateOnParse = false;
    
  xmlDoc.load(xmlSrc)
  xslDoc.load("../../js/tree.xsl.cfm")

  if (xmlDoc.documentElement)
      container.outerHTML = xmlDoc.documentElement.transformNode(xslDoc)
  else
    container.outerHTML = "";
  var myErr = xmlDoc.parseError;
  if (myErr.errorCode != 0) {
     alert("Error occured: " + myErr.reason);
  }
  xmlDoc = null;
  xslDoc = null;
}

function clickOnEntity(entity, alwaysExpand, neverExpand) {
  if(event){    
      var eSrc = event.srcElement;
  }else{
      var eSrc = entity;
  } 
  
   if (!neverExpand){
    if (alwaysExpand || !eSrc || eSrc.id != "anchor" || (eSrc && eSrc.id == "anchor" && entity.children && entity.children.length <= 1)) {
     if(entity.open == "false") {
       expand(entity, true)
     }
     else {
       collapse(entity)
     }
    }
  }

  if (selectedItem != null) {
    selectedItem.childNodes(0).all["anchor"].className="treeItem";
  }
  selectedItem = entity;
  selectedItem.childNodes(0).all["anchor"].className="selectedTreeItem";
 
  // bij homepage selectie kreeg ik undefined terug omdat de table werd geselecteerd ipv de div
  // net zo lang loopen totdat de div wordt verkregen
  while(selectedItem.tagName != "DIV"){
    selectedItem = selectedItem.parentNode;
  }
 
  if (window.node_onclick)
    
    window.node_onclick();
    if(event){
        window.event.cancelBubble = true
    }
    return false;
}

function dblClickOnEntity(entity) {
    clickOnEntity(entity, true);
}

function expand(entity) {
  var oImage, oPImage

  if (entity && entity.imageOpen) {
      oImage = entity.childNodes(0).all["image"]
      oImage.src = entity.imageOpen
  }

  for(i=0; i < entity.childNodes.length; i++) {
    if(entity.childNodes(i).tagName == "DIV") {
        entity.childNodes(i).style.display = "block"
    if (entity.nextSibling && entity.childNodes(i).style.backgroundImage.indexOf("../../visuals/tree/I.gif") == -1)
        entity.childNodes(i).style.backgroundImage = "url(../../visuals/tree/I.gif)";
    }
  }
  
  if (!entity.childrenLoaded) {
    if (entity.getAttribute("xmlSrc")) {
        entity.lastChild.style.display="block";
        loadItems(entity.getAttribute("xmlSrc"), entity.lastChild);
    }
    entity.childrenLoaded = true;
    return expand(entity);
  }
  entity.open = "true"
  setImages(entity);
}

function collapse(entity) {
  var oImage, oPImage
  var i

  if (entity.imageOpen) {
      oImage = entity.childNodes(0).all["image"]
      oImage.src = entity.image
  }

  for(i=0; i < entity.childNodes.length; i++) {
      if(entity.childNodes(i).tagName == "DIV") {
        if(entity.id != "folderTree") entity.childNodes(i).style.display = "none"
        collapse(entity.childNodes(i))
      }
    }
  entity.open = "false"
  setImages(entity);
}

function setImages(entity)
{
  if (entity.childNodes && entity.childNodes(0) && entity.childNodes(0).all) {
      var oPImage = entity.childNodes(0).all["plusImage"];
      var type = "Plus";
      if (entity.open != "false")
        type = "Minus";
      if (entity.children && entity.children.length > 1){
        if (entity.nextSibling)
            oPImage.src = "../../visuals/T" + type + ".gif";
        else {
            //if(entity.parentNode.id == 'folderTree'){alert('root')};
            oPImage.src = "../../visuals/L" + type + ".gif";
        }
      } else {
        if (entity.nextSibling){
            if (oPImage.src.indexOf("../../visuals/T.gif") == -1)
                oPImage.src = "../../visuals/T.gif";
        }else {
            if (oPImage.src.indexOf("../../visuals/L.gif") == -1)
                oPImage.src = "../../visuals/L.gif";
        }
      }
  }
}

function expandAll(entity) {
  var oImage
  var i

  expand(entity, false)

  for(i=0; i < entity.childNodes.length; i++) {
    if(entity.childNodes(i).tagName == "DIV") {
      expandAll(entity.childNodes(i))
    }
  }
}

function getSelectedNode() {
    return selectedItem;
}

function refreshTree(fromNode, updateParent) {
    //wasn't going to well.... set to true always temporarely
    //updateParent = true;
    
    if (selectedItem)
        selectedItem.childNodes(0).all["anchor"].className="treeItem";
    selectedItem = null;
    if (!fromNode || !fromNode.parentNode || fromNode.parentNode.id == "folderTree"){
        var wasOpen = (fromNode.open == "true");
        folderTree.innerHTML='<DIV id="folderTreeItems" STYLE="padding-top: 8px;">Loading...</DIV>';
        loadItems(folderTree.getAttribute("xmlSrc"), folderTree.childNodes[0]);
        if (wasOpen)
            expand(folderTree.childNodes[0]);
        clickOnEntity(folderTree.childNodes[0],false,true);
        return true;
    }else {
        var par;
        if (updateParent)
            par = fromNode.parentNode;
        else
            par = fromNode;
        par.childrenLoaded = false;
        while (par.childNodes.length>2) {
            par.childNodes[2].removeNode(true);
        }
        if (par.childNodes.length <= 1)
        {
            par.insertAdjacentHTML("beforeEnd",'<DIV id="folderTreeItems" STYLE="padding-top: 8px;visibility: hidden;">Loading</DIV>');
            setImages(par);
        }
        if (par.open == "true"){
            par.open = "false";
            expand(par);
        }   
        clickOnEntity(par,false,true);  
    }   
}

function moveNodeUp(entity) {
    entity.swapNode(entity.previousSibling);
    setImages(entity);
    setImages(entity.nextSibling);
}

function moveNodeDown(entity) {
    entity.swapNode(entity.nextSibling);
    setImages(entity);
    setImages(entity.previousSibling);
}
</cfoutput>

[Verwijderd]

treelib.js.cfm

PHP:

<cfoutput>
cuttingObject = null;

function node_onclick() {
    selNode = getSelectedNode();
    setData();
}

function node_update(refreshParent){
    refreshTree(selNode, refreshParent);
}

function node_delete(){
    if(selNode == cuttingObject){
        cuttingObject = null;   
    }
    
    if(selNode.previousSibling){
        setNode = selNode.previousSibling;
    }else{
        setNode = null;
    }
    
    selNode.removeNode(true);

    if(setNode != null){
        clickOnEntity(setNode,false,true);
    }
}

function node_cut(){
    cuttingObject = selNode;
}

function node_paste(){
    if (selNode.childrenLoaded){
        refreshTree(selNode, false);
    }
    cuttingObject.removeNode(true);
    cuttingObject = null;
    clickOnEntity(selNode,false,true);
}

function node_expand(){
    expand(selNode);
}

function node_movedown() {
    moveNodeDown(selNode);
    allowDetailChange = false;
    setData();
    allowDetailChange = true;
}
function node_moveup() {
    moveNodeUp(selNode);
    allowDetailChange = false;
    setData();
    allowDetailChange = true;
}

function node_select(oNode){
    
}

function node_delete_byindex(index){
    selNode.childNodes[index].removeNode(true);
    clickOnEntity(selNode,false,true);
}

function node_select_byindex(index,doExpand){
    selNode = getSelectedNode();
    clickOnEntity(selNode.childNodes[index],false,true);
            
    if(doExpand){
        if(selNode.open != true){
            expand(selNode);
        }
    }
}

function node_update_byindex(index){
    refreshTree(selNode.childNodes[index], true);
}

function node_cut_byindex(index){
    cuttingObject = selNode.childNodes[index];
}
</cfoutput>

Opbouw van de pagina is bijvoorbeeld zo:

PHP:

<html>
<head>
<cfoutput>
<LINK REL="stylesheet" type="text/css" href="../../styles/tree.css"/>
<script type="text/javascript" src="../../js/tree.js.cfm"></script>
<script type="text/javascript" src="../../js/treelib.js.cfm"></script>
<script language="Javascript">
    
    function setData(){
        
        // xml node attributen ophalen en in parent frame vasthouden
        persistanceTier.saved_instancelabel = selNode.description;
        persistanceTier.saved_instanceid = selNode.instanceId;
        persistanceTier.saved_parentid = selNode.parentId;
        persistanceTier.saved_instanceclass = selNode.objectType;

        // move node up mogelijk
        if (selNode.nextSibling && selNode.nextSibling.isPageObject == selNode.isPageObject){
            nextNode = selNode.nextSibling.instanceId;
        }else{
            nextNode = null;
        }
        
        // move node down mogelijk
        if (selNode.previousSibling && selNode.previousSibling.isPageObject == selNode.isPageObject){
            prevNode = selNode.previousSibling.instanceId;
        }else{
            prevNode = null;
        }
        
    }
    function setMenuOptions(){
        //
    }
    
    function onNodeContextEvent(oNode){
        //
    }
    
    persistanceTier = parent;   
</script>
</head>
<body>
<div id="folderTree" xmlSrc="treenodes.cfm?instanceid=#url.instanceid#" style="width:expression(document.body.clientWidth);height:expression(document.body.clientHeight);overflow:auto;padding:5px;" ondragstart="return false"><div id="folderTreeItems">Een moment aub ...</div></div>
</body>
</html>
</cfoutput>

[Verwijderd]

Bedankt, ik ga er eens even rustig naar kijken.

Gordijnstok, zou je er nog wat info bij kunnen geven? Erg veel verder dan Een moment aub ... kom ik niet. Heb ik treenodes.cfm ook nodig?

Dit is toch dat ding van 15seconds? Hoe heb je het dan opgelost met die brokken XML? Ik zie wel een grote XSL file, maar hoe bouw je die precies op aan de hand van de database?

[ Voor 164% gewijzigd door Verwijderd op 23-06-2003 14:29 ]

[Verwijderd]

Verwijderd schreef op 23 June 2003 @ 13:54:
Bedankt, ik ga er eens even rustig naar kijken.

Gordijnstok, zou je er nog wat info bij kunnen geven? Erg veel verder dan Een moment aub ... kom ik niet. Heb ik treenodes.cfm ook nodig?

Dit is toch dat ding van 15seconds? Hoe heb je het dan opgelost met die brokken XML? Ik zie wel een grote XSL file, maar hoe bouw je die precies op aan de hand van de database?

Mail me even dan kan ik je erbij helpen...

Treenodes.cfm is in dit geval het XML data bestand, en de XSL hoeft niet eens gegenereerd te worden. Die wordt gebruikt om de XML te transformeren.

[ Voor 13% gewijzigd door Verwijderd op 25-06-2003 14:40 ]

[HansMij]

Ik denk dat als je menu zo groot is dat IE moeilijk doet over de grootte, dat je eens moet nadenken of je menu-structuur wel klopt. Misschien kun je het wel verdelen over een stuk of 6 hoofditems de je serverside laadt, en wat je dan nog laadt gewoon met JavaScript regelt.

[drm]

Mail me even dan kan ik je erbij helpen...

't Zou wel leuk zijn als d'r hier nog wat terugkomt van evt. mailconversatie. Da's leuk voor 't nageslacht

[mr.inno]

ik wil ook ff mijn steentje bijdragen hier omdat ik met zelfde probleem zit. / zat

dit is wat info over mijn "temp" db

Artist's : 200
Album's : 453
Tracks on cd's : 5439
Tracks not on a cd : 3
Total tracks : 5442

als je darana kijkt dan word dat heel veel data

1ste oplossing die ik gebauwt heb.
alles in 1 bestand. javscript tree menu. met visable en notvisable.
werkte prachtig met 30 artieste ierder 3 cd's en 10 songs per cd.
maar na grote vorderde werd de file toch al snel mbtje of 2.. te sloom dus.

2de oplossing.
werkt ook niet : maar frames en java script en laad. de shit er in.. zorg dat je ergens dus een file aanroept en die file staat java script en zorgd voor dat main tree word aangevuld.
ziet er leuk uit op eerste gezigd. maar is elke keer veel load. want je moet veel het zelfde laden. heel omslachtig.

nu ben ik dus weer maar es begonne. / wil gaan beginne.. aan neiuwe tree. met veel data

dingen die jullie tegen komen en waarje vooral mee zit.
1 snel heid. en load.
2 je moet de eerste pagina. zo klijn mogelijk houden.
3 files die je inlaad ook niet groot maken. (want het is elke keer dll)

msdn heeft dit heel snel en simple opgelost.
allen is dat niet echt mogelijk met javascript en dtml vrees ik.

nadeel aam xml is. dat het je files stog onnodig groter maakt.


maar het zal uiteindelijk wel de engie oplossing zijn.

maak bestand laad via javascript xml binne ondemand en voeg dat toe aan div tag tree menu. en gebruik vooral gene plaatjes. of zorg dat ie ze mar 1 keer hoeft te laden.

[mr.inno]

mischein beter als xml. is java script functie nodtatie..

voorbeeld :

main page heeft fucntie die allses scrijft en laad.
hij laad file in.
in file stata volgende
<script language=javascript>
add(artist,cd,song);
add(artist,cd,song);
add(artist,cd,song);
add(artist,cd,song);
enx
</scritp>
zo hou je dnek ik de load ne klijnst. en gaat het het snelst werken..
enige nadeel je moet wel een goede java script functie bouwen.

[mr.inno]

mijn oplossing net ff gemaakt.


index.html

code:

<html>
    <head>
        <style>
            div { display: none; margin-left: 23px; margin-top: 2px;}
    
            img { border: 0px; }
            a,td,body,tr,code            { font-family: Verdana; color: black; font-size: 8 pt; text-decoration: none; background: #FFFFF }
            a:link { font-family: Verdana; color: #000000; font-size: 8 pt; text-decoration: none }
            a:hover { font-family: Verdana; color: #000099; font-size: 8 pt; text-decoration: none }
            select,input,textarea {  font-family: Tahoma; font-size: 8 pt; color: black; background-color: white }

        </style>
    </head>
    <script language="javascript">
    function showBranch(Ldiv){
        var objBranch = document.getElementById(Ldiv).style;
        if(objBranch.display=="block")
            objBranch.display="none"; 
        else
            objBranch.display="block";
            if(document.all){ 
                //thisbrowser="ie" 
                menushowlayer = document.all[Ldiv];
            } else if(document.getElementById){ 
                //thisbrowser="NN6"; 
                menushowlayer = document.getElementById(Ldiv); 
            }
            if(menushowlayer.innerHTML == 'Loading . . .'){
                laadscript("load.php?grab="+Ldiv);
            }
        }
    
    function content(Ldiv, Idiv){ 
        if(document.all){ 
            //thisbrowser="ie" 
            menushowlayer = document.all[Ldiv];
            menushowlayer.innerHTML = Idiv; 
        } else if(document.getElementById){ 
            //thisbrowser="NN6"; 
            menushowlayer = document.getElementById(Ldiv); 
            menushowlayer.innerHTML = Idiv; 
            
        } 
    } 
    
    function laadscript(lpage){ 
        x=document.createElement('script'); 
        x.src= lpage;   
        x.type='text/javascript'; 
        document.body.appendChild(x); 
    }
    
    function addlayer(Ldiv, Ndiv, Tdiv){ 
        if(document.all){ 
            //thisbrowser="ie" 
            menushowlayer = document.all[Ldiv];
            menushowlayer.innerHTML =menushowlayer.innerHTML+"<div style=\"display: block;\"><a href=\"javascript:showBranch('"+Ndiv+"');\">"+Tdiv+"</a></div><div id=\""+Ndiv+"\">Loading . . .</div>"; 
        } else if(document.getElementById){ 
            //thisbrowser="NN6"; 
            menushowlayer = document.getElementById(Ldiv); 
            menushowlayer.innerHTML =menushowlayer.innerHTML+"<div style=\"display: block;\"><a href=\"javascript:showBranch('"+Ndiv+"');\">"+Tdiv+"</a></div><div id=\""+Ndiv+"\">Loading . . .</div>"; 
            
        } 
    } 

    </script>
    <body nowrap>
        <div style="display: block;">
        <a href="javascript:showBranch('root');">Root</a>
        </div>
        <div  id="root">
        </div>
        <script language="javascript">
        content('root', 'Loading . . .');
        
        </script>
    </body>
</html>

load.php

PHP:

<?php
$grab = $_GET['grab'];
$Type = substr($grab, 0, 1);
$Id = substr($grab, 1);
    echo "content('$grab', '');\n";
if($grab == "root"){
    echo "addlayer('root', 'A1', 'Doe');\n";
    echo "addlayer('root', 'A2', 'Moe');\n";
    echo "addlayer('root', 'A4', 'Woe');";
} else if($Type == "A"){
    echo "addlayer('$grab', 'C".$Id."1', 'Alain');\n";
    echo "addlayer('$grab', 'C".$Id."12', 'Boris');\n";
    echo "addlayer('$grab', 'C".$Id."14', 'Joris');";
} else if($Type == "C"){
    $te = "";
    for($i=0; $i<300; $i++){
    $te .= "<a href=\"lol pagina meot r ook ff in.html\">me is een dolle gozer en dat weet iedereen toch. :D $grab</a><BR>";
        echo "content('$grab', '<div style=\"display: block;\">".$te."<div>');\n";
    }
    
}

?>

load.php is een demo geval.. deze content is allen maar op te showe normaal haal je het gewoon uit een db.

het werkt snelzat. die 300 regels. op diepste levenl zijn er in een sec of 3 wat heel erg snel is

nown bug's
als je klikt en er komt loading te staan en je klikt op ander ding zo dat er twee keer loading komt te staan (als het waren) dan laad ie de eerste niet verder.

moet escape nog teste dus weet niet of ie tege ' en " kan.. maar dat ligt aan de inhoud van je load.php en niet aan de functies van index.html.

[mr.inno]

oke na wat testen.. gewoon alle " en ' escpae dus \" en \' van maken en dan werkt het..
alsje 200 sub <div 's > er in gooid. addlayer() dan doet ie er toch wel ff over. maar het is de snelste manier. omdat ie de minde data moet inladen.. bij klijnere inhoud .. zo als 15 links naar titles. dan kun je gewoon door kliken progie laad ze direct .. binnen 0.5 sec.