DHTML AsTree

tree.gifAsTree is een javascript tree zoals in de windows explorer waarmee op een simpele manier veel items in 1 menustructuur gegoten kunnen worden. Geinspireerd op een versie die ik ergens online gezien had maar die bij 2000 items veels te traag werd. Daarom ben ik zelf bezig gegaan om een snellere versie te ontwikkelen, en dit is het resultaat geworden.

Deze tree is momenteel de snelste die er op internet te downloaden is, ik heb er uitgebreid mee getest en nog geen snellere gevonden. Na diverse kleine tweaks heb ik de opbouw van 1000 nodes van 7130ms naar 5210ms naar 4670ms naar 3790ms gekregen. Die kleine tweaks waren onder andere het veranderen van de volgorde in if-statements, het de andere kant op laten lopen van for lussen en het vervangen van innerHTML door createTextNode (DOM).

De tree is helemaal opgebouwd met layers omdat de <table> tag snelheidsproblemen geeft bij veel folders en items, en omdat tables niet bedoeld zijn voor dit soort doeleinden. Ook wordt hij helemaal volgens het DOM opgebouwd waardoor hij officieel in alle browsers zou moeten werken ;). Meer dan 3000 nodes zouden prima moeten kunnen op een PIII 500.

Bij links naar documenten kun je met een variabele aangeven of hij kleine icoontjes moet laten zien achter de link.

Kleine disclaimer: dit heb ik ontwikkeld in 2003, dus er kunnen verouderde zaken in zitten.

Click to activate social bookmarks