Reorder html table dmv JS

Door Rudie dirkx, 15 jaar geleden, 2.588x bekeken

Het voorbeeldje is wel duidelijk denk ik. Je kan een tabel sorteren. Of zoveel als je wilt op dezelfde pagina. Moet je paar dingetjes in de constructor veranderen, zodat html ID's niet hetzelfde zijn.
Het doel van de library is om wet ontzettend weinig requests en ontzettend weinig http verkeer, een lijst te herordenen. Dat werkt. De tabel wordt herordent, maar er wordt pas iets opgeslagen als je op OrderList klikt. Dan wordt een functie uitgevoerd die NIET in de Lib staat. In die functie wordt Ajax gebruikt voor de request. De functie mf_GetOrderList uit deze Lib wordt gebruikt om de volgorde te verkrijgen uit de tabel.

Functies om de tabel te ordenen zitten allemaal in deze Lib. De functie om m op te slaan niet.

In het voorbeeld, wordt een COOKIE gevuld met de volgorde van ID's van de data. De data is een gewone array met als keys, de ID's die opgeslagen zijn in het COOKIE.

Het is getest in IE 6 en FF 2.

Veel plezier ermee, je mag het aanpassen zoveel je wilt, maar update dan plz het versienummer en zet iets in de changelog. Altijd makkelijk.

Edit:
Je kan de functie SelectRow() aan de TR hangen, met this als parameter, maar ook aan een aantal TD's, met this.parentNode als parameter. Als de TR maar het object is dat je meestuurt. Als het bij iemand niet werkt, let me know. dank


Edit:
Nieuwe versie 1.0.2
Zie voorbeeld voor meer functionaliteit. Zie beschrijving (About).
De achtergrondkleuren in het voorbeeld zijn om aan te tonen, dat een achtergrondkleur NIET verloren gaat als een rij ge(de)selecteerd wordt. Ook niet als het via een class gaat (al zit dat niet in het voorbeeld).

Voorbeeld: http://jouwmoeder.nl/projects/reorder_table/

Gesponsorde koppelingen

PHP script bestanden

  1. reorder-html-table-dmv-js

 

Er zijn 13 reacties op 'Reorder html table dmv js'

PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Joost
Joost
15 jaar geleden
 
0 +1 -0 -1
Complimenten een aanvulling voor de lib! Ik wilde ooit al zoiets in elkaar gaan sleutelen maar dan alleen met PHP. Dit vind ik ook een mooie oplossing. Puntje wat betreft usabillity. Naast de geselecteerde rij de mogelijk krijgen om deze omhoog of omlaag te verplaatsen, lijkt mij handiger, maar dat terzijde ;) Nogmaals complimenten!


15 jaar geleden
 
0 +1 -0 -1
Kan aan mij liggen maar het voorbeeld doet echt niks veranderen aan de volgorde.
edit: Hij doet het bij mij nu ook. Het aanklikken van een rij gaat alleen niet altijd goed┬┐?
Dutch Caffeine
Dutch Caffeine
15 jaar geleden
 
0 +1 -0 -1
moet je een tabel selecteren. ;) hij doet het wel
Wessel Johnson
Wessel Johnson
15 jaar geleden
 
0 +1 -0 -1
Er mooi gemaakt, complimenten! (werkt goed in IE7)
Storeman storeman
storeman storeman
15 jaar geleden
 
0 +1 -0 -1
Quote:
Kan aan mij liggen maar het voorbeeld doet echt niks veranderen aan de volgorde.


Ik was er ook mee bezig, opeens klikte ik per ongeluk op de rij, die kon ik toen mooi verplaatsen. Succes!
Jelmer -
Jelmer -
15 jaar geleden
 
0 +1 -0 -1
Misschien is het toch een idee om 'eval' weg te laten. Je kan het net zo gemakkelijk oplossen met een if-else statement. Dat is netter en sneller.

Hij werkt overigens ook prima in Safari 3
Harmen
Harmen
15 jaar geleden
 
0 +1 -0 -1
Heel mooi !!
Kan ik zeker gebruiken!
Jos
Jos
15 jaar geleden
 
0 +1 -0 -1
Ziet er goed uit!

Alleen waarvoor gebruik je eval?
Deze kun je zo opvangen door er haakjes om te zetten:
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
scope['waa' + rde];


Btw, hier nog een voorbeeldje hoe je rows kan verschuiven zonder de rij in kwestie te klonen:

Shift rows

Modus kiezen, en daarna op een rij klikken.
Arjan Schuurman
Arjan Schuurman
15 jaar geleden
 
0 +1 -0 -1
mooi, hier was ik al lang naar opzoek.
Wouter K
Wouter K
15 jaar geleden
 
0 +1 -0 -1
Ohja het nummertje veranderd ook niet automatisch ...
Dus zoals eerder vermeld kan je mss bij de functie orderlist alles een reset geven zodat alles tegoei komt
Jacco Engel
Jacco Engel
15 jaar geleden
 
0 +1 -0 -1
Ik vind wel dat je een grote kans gemist hebt door niet voor drag/drop te gaan in deze.

Ik vind het netjes bgrijp me niet verkeerd maar ik wil toch iedereen die het in een commercieel product wil gebruiken aanraden een te kijken naar :
http://www.phpriot.com/d/articles/client-side/sortable-lists-with-php-and-ajax/index.html

Hier word uitgelegd hoe je een dragdrop sortable kunt maken die ook nogeens direct de veranderingen opslaat in de database
Rudie dirkx
rudie dirkx
15 jaar geleden
 
0 +1 -0 -1
Joost, misschien heb je gelijk. Je bedoelt dat de pijltjes staan, naast de rij die je geselecteerd hebt? Dat kan waarschijnlijk wel, maar is wel iets moeilijker...

Jos & Jelmer, jullie hebben helemaal gelijk. De reden dat ik voor eval() ging, is dat het met [''+] eerst niet werkte (kwam omdat ik verkeerde property naam had :D). Toen ik het met eval probeerde werkte het nog niet, toen heb ik de naam aangepast, maar niet van eval terug naar [''+] gegaan. Ik zal het veranderen.

Wouter, er is een optie voor het hernummeren van de lijst :) Maar die staat niet perse aan, omdat die nummers wel eens het ID van de rij kunnen zijn, en niet het `volgorde-nummer`. De optie bestaat echter (2 of 3 properties van je object aanpassen en hij doet t automatisch).

Jacco, ik ben expres niet voor drag & drop gegaan. Waarom? Omdat ik er absoluut niet van houd. Ik heb al een paar van die drag & drop dingetjes en ik moet het niet. Helemaal zelf maken is me ook teveel werk voor wat het oplevert. Deze manier (voor tabellen vooral) was ik nog nooit tegengekomen en had ik eigenlijk nodig. Het direct opslaan in de database is dus precies iets wat ik NIET wil. Zoals ik al zei: zo min mogelijk requests, met zo min mogelijk data. Dus eerst de volgorde bouwen in HTML en JS en dan pas opslaan naar database. Precies zoals ik wilde :)

Ik ga proberen al het goede commentaar (dat wil zeggen, waar ik het mee eens ben) te implementeren en dan komt hier versie 1.0.2 binnenkort te staan.

Dank iedereen voor commentaar!
PHP hulp
PHP hulp
0 seconden vanaf nu
 

Gesponsorde koppelingen
Jacco Engel
Jacco Engel
15 jaar geleden
 
0 +1 -0 -1
Helder :)

Om te reageren heb je een account nodig en je moet ingelogd zijn.

Inhoudsopgave

  1. reorder-html-table-dmv-js

Labels

  • Geen tags toegevoegd.

Navigatie

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.