[PHP / JS] Graag jullie mening over uitklappen menu

[Reveller]

In mijn CMS'je (vakantieproject ) heb ik een overzicht van alle pagina's:



Je begrijpt dat als het aantal pagina's toeneemt, dit overzicht als snel onoverzichtelijk ( ) wordt. Vandaar dat ik het wil uitbreiden met de mogelijkheid om het in/uit te klappen:



Helemaal uitgeklapt zou het er dan als volgt uit zien:



Dit kan natuurlijk op 2 manieren:
• server-side (PHP)
• client side (DHTML)

Als ik voor server-side kies, zal ik in de querystring of in een cookie moeten bijhouden welke nodes uit de tree 'opengeklapt' zijn. Vervolgens ga ik met een recursieve functie door de nodes-tabel, aan de hand van deze array. Nadeel: bij elke klik moet ik plm. 25 queries uitvoeren (recursief!); dat kost load - en vooral: tijd.

Bij de tweede mogelijkheid laadt ik de hele boom in een keer en gebruik ik een javascript functie om de boom te tekenen. In een cookie houdt ik bij welke nodes 'opengeklapt' zijn - eigenlijk net als GoT in het hoofdscherm doet. Nadeel: mijn javascriptkennis is zeer beperkt. Ik ben op HotScripts etc. op zoek gegaan naar 'folder tree' etc, maar deze scripts ondersteunen slechts een tree die bestaat uit woorden, niet uit complete html rijen zoals bij mij het geval is (zie screenshots).

Vandaar mijn vragen aan jullie:
• waarom zouden jullie kiezen voor client/serverside?
• weten jullie of het mogelijk is om, net als GoT, html rijen (<tr>,<td><input type="text"></td><td>[img]"arrowUp.gif"></td><td><select><option>[/img]...etc). Is het te doen of kan ik mijn aandacht beter richten op serverside?

[Verwijderd]

is zeker te doen, vrij simpel ook nog zelfs, want volgens mij kan je gewoon hele rijen display: none; geven

[crisp]

waarom zouden jullie kiezen voor client/serverside?

Voor dit soort dingen ga ik altijd voor clientside; je kan het zo maken dat je zonder JS-support op de client nog een werkende interface overhoud, en het is vele malen sneller en minder gecompliceerd dan alles via post-backs te moeten regelen (en dus telkens al je instellingen moeten meesturen/bewaren). Daarbij is het uiteraard ook meer responsief (instant resultaat op een actie).

weten jullie of het mogelijk is om, net als GoT, html rijen... Is het te doen of kan ik mijn aandacht beter richten op serverside?

natuurlijk is het te doen, wij doen het hier op GoT toch ook, en dat is qua basis slechts iets van 10 regels javascript. Je zal nog een oplossing moeten verzinnen voor de verschillende niveaus, maar ook daar is vast wel wat elegants op te verzinnen.

De vraag is echter: kan jij het met je beperkte kennis van javascript ook zelf maken? Ik denk dat het antwoord daar op dit moment wellicht 'nee' op zal zijn, maar waarschijnlijk als je je een paar weekjes verdiept in de materie dat je een heel eind komt

[ Voor 5% gewijzigd door crisp op 10-08-2004 19:06 ]

[Reveller]

Ter illustratie: volgens mij werk ik helemaal niet op meerdere niveau's. Of in ieder geval - dat doe ik natuurlijk wel (met parent-id's), maar in dit overzicht wordt als volgt opgebouwd (HTML van eerste 3 nodes), dus hier is er geen echt verschil tussen nodes van verschillende niveaus:

HTML:

<TR>
  <TD><INPUT value=Home></TD>
  <TD>&nbsp;</TD>
  <TD><SELECT><OPTION value=4>Basic</OPTION></TD>
  <TD><INPUT type=image src="edit.png"></TD>
  <TD colSpan=3>&nbsp;</TD></TR>
<TR>
  <TD>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;<INPUT value=Contact></TD>
  <TD><INPUT type=image src="arrowDown.gif"></TD>
  <TD><SELECT><OPTION value=4>Basic</OPTION></TD>
  <TD><INPUT type=image src="edit.png"></TD>
  <TD><INPUT type=checkbox value=2 name=edit[]></TD>
  <TD><INPUT type=image src="bin.png" value=2 name=del></TD></TR>
<TR>
  <TD>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<INPUT value=Gastenboek></TD>
  <TD>&nbsp;</TD>
  <TD><SELECT><OPTION value=4>Basic</OPTION></TD>
  <TD><INPUT type=checkbox value=10 name=edit[]></TD>
  <TD><INPUT type=image src="bin.png" value=10 name=del></TD></TR>

Met andere woorden - ik indent gewoon met &nbsp: Op deze manier kan ik toch eenzelfde script als GoT implementeren of zie ik het nu verkeerd?

[ Voor 81% gewijzigd door Reveller op 10-08-2004 19:33 ]

[crisp]

Op deze manier kan ik toch eenzelfde script als GoT implementeren of zie ik het nu verkeerd?

indenten met no-breaking-spaces is vies, maar dat terzijde
Nee, je kan niet zomaar het GoT script implementeren (sowieso zit er copyright op, maar dat ook terzijde ) omdat dat script geen nesting aankan (maar dat valt er ook wel eenvoudig in te hacken, maar ook dat terzijde )
Wat ik bedoel is: in je voorbeeld zal het kruisje naast 'Diensten' de gehele tree daaronder moeten inklappen; daartoe moet je weten welke rijen er bij 'Diensten' hoort. Daarnaast moet het kruisje naast 'Slechte Diensten' enkel de rij 'Blaat' inklappen, maar deze rij valt ook al onder 'Diensten' - deze rij moet dus zowel aan 'Diensten' als aan 'Slechte Diensten' gekoppelt worden.
In het huidige GoT script kan een rij maar bij 1 kopje horen, dus is het script erg eenvoudig (als je de cookie-code weglaat); in jouw geval zal het wat meer uitgebreid moeten worden.

[djluc]

Je hoeft niet alle onderliggende items te weten als je bijvoorbeeld geneste divs gebruikt. Dan verberg je gewoon een complete div waarin weer sub-divs zitten.

[Grijze Vos]

djluc schreef op 10 augustus 2004 @ 23:03:
Je hoeft niet alle onderliggende items te weten als je bijvoorbeeld geneste divs gebruikt. Dan verberg je gewoon een complete div waarin weer sub-divs zitten.

TS heeft nu juist niet voor nesting gekozen.

[Reveller]

Status - voorlopig heb ik het maar even server-side opgelost, onder het motto "vies kan ook best lekker zijn" Dan werkt het in ieder geval. Intussen ga ik werken aan een clientside oplossing - ik ga de opmerkingen van Crisp ter harte nemen, en naar het GoT script kijken om ervan te leren. Ik wil (niemand bij) GoT voor de borst stoten

Ik heb trouwens niet voor nesting (lists) gekozen, omdat - zoals je ziet - er een heleboel checkboxes, dropdowns etc. achter elk item komen. Ik krijg dit nooit recht onder elkaar uitgelijnd als ik met ul's en li's in de weer ga, volgens mij - maar correct me if I'm wrong! Normaal gesproken ben ik juist een grote fan van lists; alle navigatie menuutjes etc maak ik hiermee.

[ Voor 25% gewijzigd door Reveller op 11-08-2004 01:36 ]