Archief - JS: Treeview + checkboxe

Zo, even mijn probleem uitleggen (opgelet: niemand moet even code posten met: dit is het, gewoon wat richtlijnen zodat ik zelf het kan ontwikkelen)

Ik heb op dit moment een treeview aan de linkerkant (opgebouwd uit UL en LI). Deze bevat op dit moment een 3-tal niveaus qua diepte. Elk item bevat op zich 3 elementen:
- Een image (+ teken) waarmee je het volgende niveau openklapt
- een checkbox om je keuze aan te geven
- de tekst (duh)

Op dit moment gebeurt het volgende: Ik heb rechts ervan een listbox die ik met javascript opvul afhankelijk van de gekozen opties links. Dus wanneer je niveau 2 aanvinkt, dan worden alle items onder dat niveau overgenomen, vink je op niveau 2 een ander item aan, dan worden de items daaronder bijgevoegd in de listbox rechts enz.

De klant vindt dat leuk en vlot en zo, maar wilt het dus anders (ook een dikke duh). Hij wilt nl dat rechts de onderverdeling als het ware ook terugkomt. En dat je rechts met een X icoon ook een item eruit kunt gooien. (omdat je soms links het overzicht niet meer vindt in alle niveaus en items.)

Dus wat moet er nu komen:
- kies je links een bepaald niveau, dan komt rechts alle kinderen op het diepste niveau te staan, met daarboven de bovenliggende niveaus
- Vink je 1 kind af, dan moet de parent ook automatisch afgevinkt, je hebt immers niet meer alle elementen.
- Verwijder je rechts, dan moet links het vinkje ook af (das nog makkelijk) en moeten eventueel bovenliggende parents rechts weer verdwijnen wanneer er geen items meer in dat niveau zitten.

Het betreft een treeview van regio's als volgt onderverdeeld:
Vink ik Limburg aan bvb, dan moet rechts komen
Limburg nu afvinken maakt rechts ook volledig leeg. Voeg ik de andere Vlaamse provincies toe, dan moet plots ook Vlaanderen aangevinkt staan links.


Wat is de beste werkwijze? Voor de huidige pagina loop ik gewoon door de kinderen en indien 'checked' zet ik die gewoon allemaal links zonder meer. Nu komt er echter bij dat ik naar beneden en boven zou moeten loopen. Maar ik wil het ook vlot houden en ben op zoek naar de beste en snelste werkwijze hiervoor. (Aanvinken van Europa volledig bvb is een hel, want dat gaat ALLES aanvinken)

Dus: ideetjes, iemand?

Is nu de uitleg te lang of snapt niemand het

Je hebt een recursief algoritme nodig (dus een functie die zichzelf aanroept). Hieronder wat pseudocode.

function gebruiker_vinkt(item)
if(actie_is_aanvinken)
voegtoe_in_lijst(item)
else //actie is uitvinken
verwijder_uit_lijst(item)

// recursief verwijderen totdat er een parent is die niet leeg is
function verwijder_uit_lijst(item)
remove(item);
if(#items_in_parent(item)==0)
verwijder_uit_lijst(parent(item));

// recursieve toevoeging van items beginnende vanaf item
function voegtoe_in_lijst(item,parent)
add(item,parent);
for(child_items in item)
voegtoe_in_lijst(child,item);

En dan zou je eigenlijk na de aanroep gewoon de rechterkant telkens opnieuw opbouwen? Allee, da lijkt mij het nuttigst?

Kun je inschatten of dat veel processing vergt van de gebruiker zijn pc, het gaat hier nl toch over een regiolijst met (tel zelf maar) honderden regio's, zoniet duizend. Ik ben geneigd om het topniveau (europa, azie, amerika,...) niet aanvinkbaar te maken, want dat lijkt mij niet haalbaar binnen een redelijke processing time?

En belangrijkste vraag: hoe doe je de check of je bij de text/checkbox zit, de structuur is nl

En nu loop ik eigenlijk door de hele DOM binnen een bepaalde div, en dan met een if test kijk ik of het een LI is of niet

Nee, je verwijdert en voegt alleen toe wat er verwijderd en toegevoegd moet worden in de DOM (dit is het meest efficiënte). Nu verwijderen, je zal op een bepaald punt die hele lijst eens moeten opstellen in de DOM, maar eenmaal je ze hebt hoef je de juiste elementen alleen maar op style.display = 'none'; in te stellen om ze te 'verwijderen'.

Wat je dus nog moet doen, en dit heb ik niet uitgelegd, maar impliceerde de pseudocode hierboven wel, is een parent-child structuur aan je DOM vastknopen. Dit doe je best bij het opstellen van de volledige lijst voor je begint. Je gaat dan bijvoorbeeld een extra property maken aan elk DOM element in je structuur: item.childprovinces en ook een item.parentprovince. De eerste is een array met andere items (de eerste-niveau children onder dat item) en het tweede is een referentie naar dat item zijn parent. Op die manier kan je altijd een niveau naar boven springen en een niveau naar onder gegeven een item. Dit concept heet een doubly-linked list.

Vinkt een gebruiker nu een bepaalde provincie uit, zal de functie verwijder_uit_lijst(item) hetvolgende doen (ongeveer):
1. Zijn eigen item.style.display op 'none' instellen.
2. Voor ieder kind verwijder_uit_lijst(item.childprovincies) uitvoeren (die op zijn beurt voor zijn children uitgevoerd zal worden).
3. Zien of zijn item.parentprovincie nog childprovinces bevat die aangevinkt zijn.
4. Indien niet, wordt verwijder_uit_lijst(item.parentprovincie) aangeroepen, die dus de parent zal verwijderen (en mogelijk de parents daarboven aangezien de functie zichzelf telkens opnieuw zal aanroepen).

Toevoegen gebeurt analoog. Hopelijk heb ik het wat duidelijker uitgelegd nu, succes ermee.

Heel fel merci

Dan ga ik dat zo ne keer allemaal proberen zie

Merci!!