[js] (alweer) tree performance met table

[foske]

Eigenlijk is mijn probleem een beetje een samenstelling van alle dingen die ik tot nu toe gevonden heb over tree's, maar het gene wat ik zoek, heb ik eigenlijk nog niet gevonden.

het probleem:
Ik wil een tree maken op een pagina. Deze moet de structuur van een website aangeven en dan achter iedere categorie of pagina, het aantal bezoekers en pageviews.
ff snel een tabelletje:

pagina	bezoekers	pageviews
NL	345	2340
Home	345	2340
produkten	345	2340
jas	345	2340
EN	544	4346
Home	345	2340
enz.	345	2340

Nu moet deze boom dus uit/in te klappen zijn, want met 300 pagina's is het totaal niet overzichtelijk.

wat heb ik al geprobeerd:
In eerste instantie, ben ik aan de gang gegaan met een soortgelijk script wat op got gebruikt wordt, alleen dat deze manier blijkt niet berekend te zijn voor grote hoeveelheden tr's.

Nu zijn er een heleboel scripts in de markt die goed genoeg werken, alleen die werken allemaal met layers, en volgens mij is zon soort tabel structuur moeilijk (en waarschijnlijk ook lelijk) te behouden als je met layers gaat werken.

Nu leek mij XML -> XSL wel een oplossing, alleen voor zover ik heb kunnen vinden (bijvoorbeeld het ding van 15seconds.com, http://www.15seconds.com/Issue/010921.htm) niet compatible met firefox...


Dus mijn vraag aan jullie, wat voor ideeen blijven er voor mij over

bedankt

[faabman]

Fossie schreef op zaterdag 27 november 2004 @ 15:43:
Nu leek mij XML -> XSL wel een oplossing, alleen voor zover ik heb kunnen vinden (bijvoorbeeld het ding van 15seconds.com, http://www.15seconds.com/Issue/010921.htm) niet compatible met firefox...

Pak het script op 15 seconds als basis en kijk op http://www.mozilla.org/xmlextras/ om het compatible te maken met mozilla-based browsers...

[Verwijderd]

Dit is een lastig probleem. Voor layoutmogelijkheden (het automatisch aanpassen aan cel-breedtes) zul je een tabel moeten gebruiken. De eerste cel van elke rij geef je een padding-left die aangeeft hoe diep genest het element in de boom zit. De moeilijkheid zit 'm in het scriptje dat het in- en uitklappen regelt. Je zou die padding-left kunnen nemen als indicatie.

Java:

function collapseRows(oRow) {
    var oNext = oRow.nextSibling;
    while(oNext && childOf(oNext, oRow)) {
        oNext.style.display = 'none';
        oNext = oNext.nextSibling;
    }
}

function childOf(oChild, oParent) {
    var iChildIndent = parseInt(oChild.style.paddingLeft, 10);
    var iParentIndent = parseInt(oParent.style.paddingLeft, 10);
    return (iChildIndent > iParentIndent);
}

Het kan natuurlijk ook dat je de tree-table client-side genereert vanuit een JavaScript datastructuur. Dan is het natuurlijk het mooiste om de gegenereerde rows direct te koppelen aan het data-object. Het in- en uitklappen kan dan ook vanuit de datastructuur worden geregeld.

[foske]

mmmm ik ga toch nog eens in de XML duiken. Hopelijk dat ik nu iets verder kan komen, en dat ook kan doen voor me wat ik wil

[Clay]

Met die xml tools (xmlDom, xmlHttp) kan je xml data clientside onderwater inladen, en die data vertalen naar de inhoud van je table dmv van het dynamisch aanmaken van rows retehandig.

trouwens, wbt de term "layers"; die bestaat niet meer. De <layer> tag was een verzinsel van Netscape 4, als zijnde de tegenhanger voor de in alle andere browsers gebruikte (en meestal absolute gepositioneerde) div. Het daarbij schrijven van kilo's javascript voor 3 verschillende dom implementaties (document.all, document.layers, document.getElementById) is een vorm van dhtmllen die (hopelijk) uitgestorven is. Daar gebruikten alle script inderdaad alleen de div of layer, en heette het voor het gemak allemaal "layers".
[standaardpolitie]Tegenwoordig hoor je dit semantisch correct en accessible te doen door een mooie scheiding van structuur (html), gedrag (js) en presentatie (css).[/standaardpolitie]