Toon posts:

[JS] Tabel Kolommen Sorteren en verplaatsen.

Pagina: 1

Acties:

60 views sinds 30-01-2008
Reageer

dinsdag 9 september 2003 16:23

Acties:

Verwijderd

Topicstarter

Sorteren van kolommen lukt me, maar het verplaatsen niet. Ik kan wel rijen verplaatsen. Ik heb het volgende scriptje om rijen te kunnen verplaatsen. Is het mogelijk om daarmee ook kolommen te verplaatsen. Kan iemand me op weg helpen.

<html>
<head>
<title>test</title>
<style>
.drag{position:relative;cursor:hand}
</style>
<script>

var dragapproved=false;
var z,x,y;
function move()
{
if (event.button==1&&dragapproved)
{
spot.style.pixelTop=event.clientY+5;
return false;
}
}
function drags()
{
if (!document.all) return;
if (event.srcElement.className=="drag")
{
dragapproved=true;
z=event.srcElement;
spot.style.pixelTop=z.style.pixelTop;
spot.style.visibility="visible";
document.onmousemove=move;
}
}
function up()
{
spot.style.visibility="hidden";
nz=event.srcElement;
if (nz.tagName!="TR") return;
nz.parentNode.insertBefore(z,nz);
dragapproved=false;
}
document.onmousedown=drags;
document.onmouseup=up;
</script>

<body bgcolor="whitesmoke">
<div style="height:100;overflow:auto">
<table bgcolor="whitesmoke" border='1' cellpadding='1' cellspacing='1' width="20%">
<tr class="drag"><td>A</td><td>A</td><td>A</td></tr>
<tr class="drag"><td>B</td><td>B</td><td>B</td></tr>
<tr class="drag"><td>C</td><td>C</td><td>C</td></tr>
<tr class="drag"><td>D</td><td>D</td><td>D</td></tr>
<tr class="drag"><td>E</td><td>E</td><td>E</td></tr>
</td></tr>
<table>
<table id="spot" style="position:absolute;visibility:hidden" bgcolor="silver" width="20%"><tr><td></td></tr></table>
</div>
</body>
</html>

Thanks.

dinsdag 9 september 2003 16:59

Acties:

crisp

Devver

Pixelated

kolommen verplaatsen is niet zo eenvoudig als rijen omdat je met meerdere TD's moet gaan werken, en die allemaal moet verplaatsen. Je moet dus een manier vinden om bij een klik in een cel de bijbehorende cellen in dezelfde kolom erbij te zoeken.
Hoe, dat mag je zelf uitvogelen. Mogelijk dat MS er wel mooie methodes voor heeft (aangezien je gezien je voorbeeld toch IE-only ontwikkeld), daarvoor zou je eens op http://msdn.microsoft.com kunnen zoeken.

ps, gebruik voortaan aub [ code(=xxx) ] tags

[ Voor 7% gewijzigd door crisp op 09-09-2003 17:00 ]

Intentionally left blank

Reageer