JQuery UI: ordering van kolommen

[Gideonnn]

Op mijn stage heb ik opdracht gekregen om een lijst te maken met de hele hard- en software inventarisatie van dit bedrijf. Nu heb ik een website gemaakt die uit een database alle ingevoerde items weergeeft in een lijst.

Om een indruk te geven:


Deze lijst is opgebouwd per regel, ook is het mogelijk kolommen te hiden en de 'layout' op te slaan in je cookie. Nu wil ik op gebied van customizen nog iets verder gaan en het zo maken dat je de titel naar links en rechts kan slepen en zo de volgorde kan veranderen en eventueel opslaan.

Na wat zoeken kwam ik vrij snel uit op een jQuery library 'jQuery UI', dit is eigelijk perfect, maar er is een probleem. De ingebouwde sort functie werkt geheel automatisch, maar aangezien mijn overview opgebouwd is uit divs die left floaten -oftewel rijen- is het niet mogelijk om het daarmee makkelijk op te lossen. Ik wil namelijk de kolom order veranderen, niet de rijen. Nu ben ik daar al een tijd op aan het zoeken maar kan geen voorbeelden/uitleg vinden.

Eigelijk wil ik dus elke kolom plus elk item in die kolom een id meegeven, en als het waren alles met de id X kunnen verslepen, is dit mogelijk? En zoja, kan iemand me misschien wat pointers geven?

[mindcrash]

Waarom gebruik je voor iets wat eruit ziet als een tabel geen table element? table mag dan weliswaar behoorlijk evil zijn voor layout technische zaken anno 2011, maar iets wat ook daadwerkelijk een tabel is als tabel opmaken is helemaal prima.

Bovendien hoef je vervolgens slechts een klein stukje code te schrijven om te doen wat je graag wil doen, namelijk het verplaatsen van TH x en TD x naar TH x+y en TD x+y of TH x-y en TD x-y

[ Voor 67% gewijzigd door mindcrash op 07-12-2011 10:56 ]

[Verwijderd]

Mag ik vragen waarom je hebt gekozen voor "divs die left floaten" in plaats van het gewoon allemaal in een table te gieten?

[mindcrash]

Verwijderd schreef op woensdag 07 december 2011 @ 11:03:
Mag ik vragen waarom je hebt gekozen voor "divs die left floaten" in plaats van het gewoon allemaal in een table te gieten?

That's what I said?

[Gideonnn]

Kort maar krachtig: Mag niet!
Mijn stagebegeleider wil dat niet, ik mag letterlijk niks met tables maken. Beetje vreemd, i know. Maar wat is het voordeel van een table hier? Ik bedoel als je kan switchen tussen tr's kan dat toch ook met divs?

[MueR]

Ik tik hem even naar Webdesign, Markup & Clientside Scripting.

Het voordeel van een table is dat je een table gebruikt als table. Tabellen zijn al jaren de standaard voor het weergeven van data. Tabellen schalen ook leuk in de breedte, klappen niet halverwege een "row" af naar de volgende regel omdat de ruimte op is en meer.

Je stagebegeleider lijdt aan een erge vorm van diveritis. Hij slaat de plank nogal finaal mis.

[NMe]

Een TR heeft daadwerkelijk een binding tussen de kolommen die hij bevat en tot op zeker hoogte ook tussen kolommen onderling, een stapeltje divs heeft dat niet. Ik kan dan ook niet anders dan zeggen dat je begeleider achterlijk is als hij je niet the best tool for the job laat kiezen, waarschijnlijk omdat hij ergens het gerucht heeft gehoord dat tabellen evil zijn. Tabellen zijn niet evil, ze zijn alleen niet bedoeld om layout in op te maken. Voor tabulaire data zijn ze nog steeds the way to go...

Afgezien van dat: Waar hoort mijn topic?
PRG>>WEB

edit:

* NMe schopt MueR.

[ Voor 3% gewijzigd door NMe op 07-12-2011 11:18 ]

[Bosmonster]

Qiro schreef op woensdag 07 december 2011 @ 11:15:
Kort maar krachtig: Mag niet!
Mijn stagebegeleider wil dat niet, ik mag letterlijk niks met tables maken. Beetje vreemd, i know. Maar wat is het voordeel van een table hier? Ik bedoel als je kan switchen tussen tr's kan dat toch ook met divs?

Semantiek, toegankelijkheid, etc.

Een tabel is een tabel, niet een willekeurige onsamenhangende bak div's.

Je docent is een idioot. Doe gewoon wat je hoort te doen, als je ooit een baan wilt vinden.

[Gideonnn]

Sorry voor de misplaats, zal er meer op letten.
Dus op deze manier is het gewoonweg niet mogelijk? Ik kan hem moeilijk dit topic laten zien.
De sort functie van jquery ui werkt wel gewoon hetzelfde als bij een ul..

[NMe]

Qiro schreef op woensdag 07 december 2011 @ 11:31:
Sorry voor de misplaats, zal er meer op letten.
Dus op deze manier is het gewoonweg niet mogelijk? Ik kan hem moeilijk dit topic laten zien.
De sort functie van jquery ui werkt wel gewoon hetzelfde als bij een ul..

Ook een ul heeft li's die een afhankelijkheid van elkaar hebben en dus gesorteerd kunnen worden.

Op zich kun je waarschijnlijk wel een div om elke row heen zetten en dan de divs binnen die divs sorteren met een scriptje, maar daar heb ik dan weer dit gevoel bij:


Wat betreft het laten zien van dit topic aan je begeleider: eigenlijk zou je dat wel moeten doen want hij is gewoon compleet de weg kwijt...maar als je bang bent dat dit je beoordeling in gevaar brengt dan moet je het niet doen natuurlijk.

[MueR]

Laat hem dan gewoon een van de vele sites zien die uitleggen wanneer je wel tables moet gebruiken, zoals http://www.noupe.com/how-...proper-use-of-tables.html

[Gideonnn]

Ja precies, het gaat me een beetje over de beoordeling, zo streng is het allemaal niet, maar toch. Ook ben ik dalijk een tijd bezig met alles omzetten naar table of lu en dan mag ik het later weer terug zetten en verder googlen hoe ik het voor elkaar krijg met divs..

Interessante link trouwens, zal hem eens doormailen.

Edit: Na een kleine overleg mag ik lu/li tags gaan gebruiken, dus even proberen of het daarmee werkt.

[ Voor 14% gewijzigd door Gideonnn op 07-12-2011 12:38 ]

[MueR]

Overtuig hem gewoon van ons gelijk. Geef aan dat het werken met divs hiervoor, behalve semantisch incorrect, veel meer extra werk oplevert, meer mogelijke browser bugs oplevert en in het geheel gewoon niet praktisch is. Beargumenteer je case goed, wie weet lukt het nog ook. Niet geschoten altijd mis. Mocht het nou niet lukken, helaas, dan maar de stupide oplossing pakken

[ Voor 26% gewijzigd door MueR op 07-12-2011 12:38 ]

[Gideonnn]

Maar is het in een table wel makkelijk te doen dan? kan ik dan gewoon $("#tablheader").sort(); gebruiken om te slepen?

[NMe]

[google=jquery moving table columns], tweede hit, tweede antwoord.

[Gideonnn]

Hmm dacht dat het nauwelijks te vinden was, maar zal wel komen omdat ik heel veel op divs heb gezocht. Denk dat ik het gewoon back-up, dan laat zien en dan pas vertel dat het table's zijn.

Edit: veranderd een beetje in slowchat hier, ik ga eerst het een en ander proberen, bedankt voor de hulp so far.

[ Voor 24% gewijzigd door Gideonnn op 07-12-2011 12:53 ]

[R4gnax]

https://github.com/mleibman/SlickGrid

Ben je gelijk van al het gezeik af.
Sorting, filtering en (virtual) paging. Kan met gemak idiote hoeveelheden data rows verwerken zonder stront-traag te worden. Dat kan handig zijn als je een echt grote set data moet tonen.

[Gideonnn]

R4gnax schreef op woensdag 07 december 2011 @ 13:24:
https://github.com/mleibman/SlickGrid

Ben je gelijk van al het gezeik af.
Sorting, filtering en (virtual) paging. Kan met gemak idiote hoeveelheden data rows verwerken zonder stront-traag te worden. Dat kan handig zijn als je een echt grote set data moet tonen.

Misschien een beetje hoog gegrepen, dit is immers mijn eerste half jaar stage. Heb het nu voor elkaar dat ik gewoon een table kan gebruiken.

[MueR]

[Gideonnn]

Klá! Eindresultaat, in een table:


Klik voor totale pagina.

Heb uiteindelijk dit gebruikt ipv jquery UI, op de pagina is ook te zien hoe de sort/drag er uit ziet.

Bedankt voor de hulp allemaal.


Edit, pics aangepast.

[ Voor 8% gewijzigd door Gideonnn op 08-12-2011 11:07 ]

[Bosmonster]

Als ik je docent was kreeg je nu een dikke voldoende