:: Forum >>

Dynamically Re-Order Columns

Here is some code to re-order columns is a regular HTML table.

Anyone want to try and do this for the grid?

I would, but work is keeping me very busy right now.

<html>
<head>

<title>Table Dynamics - ReOrder Rows (Asc OR Desc) and Move Columns About
</title>

<style>
.bgred { color:white; background-color:#FF0000; }
.bggreen { color:white; background-color:#00FF00; }
.bgblue { color:white; background-color:#0000FF; }
.bgorange { color:white; background-color:#FFCC00; }
.bgyellow { color:white; background-color:#F0F020; }

</style>

<script language="jscript">


function reorder(listName, order) {
var oHid_Order = document.getElementById("hid_" + listName + "_order");
if (oHid_Order.value == order) {
// Nothing to do : the order is allready good
return;
} else {
oHid_Order.value = order;
var oTable = document.getElementById(listName);
var nbRows = oTable.children.length;
var firstNode = oTable.children(0); // the first node will be reference.
for (var i=1; i<nbRows; i++) {
// What we are doing : get last row, delete it
// and recreate it before reference node
var curNode = oTable.children(nbRows-1);
curNode.removeNode(true);
oTable.insertBefore(curNode, firstNode);
}
}
}
var colupdSW=0;

function recol(listName, ncol, tocol) {

var itocol = parseInt(tocol) ;
var incol = parseInt(ncol) ;
if (itocol==incol) { return 0;}

LastNewCol = -1; // suppress last column autopopulate feature


var oTable = document.getElementById(listName);
var nbRows = oTable.children.length;
var firstNode = oTable.children(0); // the first node will be reference.
for (var i=1; i<nbRows+1; i++) {
var curNode = oTable.children(i-1);
var numTDs = curNode.children.length;

if ( (itocol>
numTDs-1)||(incol>numTDs-1) ) // optional to handle rows with fewer td-cells
{
var wscount = 0;
while((itocol>numTDs-1)||(incol>numTDs-1)) {

var OnumTDs = numTDs ;
curNode = oTable.children(i-1);
curNode.insertCell(numTDs); // .appendChild(document.createTextNode("Null"));
curNode = oTable.children(i-1);
numTDs = curNode.children.length;

wscount++;
if (wscount>100) // if any row with load short by over 100 bricks - table is deemed messed up
{
alert('Row '+i+': Cells in Column Not Completely Populated - cannot move column \n too bad it\'s screwd up anyway');
bailout(cloudofdirtybytes) ;
}

}

}


var fstTDNode = curNode.children(itocol);
var curTDNode = curNode.children(incol);
if(itocol<incol)
{
curNode.insertBefore(curTDNode, fstTDNode);
} else {
var fstTDNode = curNode.children(itocol);
var curTDNode = curNode.children(incol);
DOMNode_insertAfter(curTDNode, fstTDNode);
}

for (var j=0; j<numTDs; j++) {
curNode.children(j).colF=j ;
}

}


colupdSW= 1 ;

}

function DOMNode_insertAfter(newChild,refChild)
//Post condition: if childNodes[n] is refChild, than childNodes[n+1] is newChild.
{
var parentx=refChild.parentNode;
if(parentx.lastChild==refChild) { return parentx.appendChild(newChild);}
else {return parentx.insertBefore(newChild,refChild.nextSibling);}
}

var x, y, z, col, fromcol;
window.onload = init;
z = 0 ; // 0 = button not pressed down; No Mouse-Moved Layer
col = -9 ; // destination column where MouseUp occurs
fromcol = -9 ; // source column where MouseDown Occurs


function init() {
if (window.Event) {
document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = getXY;
}


function getXY(e) {
x = (window.Event) ? e.pageX : event.clientX;
y = (window.Event) ? e.pageY : event.clientY;

if (lay1.style.display=="")
{ lay1.style.top=y+9; lay1.style.left=x+4;}
}

function BlurHead() {
hid_list1_order.focus();
}

function MOV(el) {
if(z==1){el.style.backgroundColor='#CCDDFF'} ;
}

function MOT(el) {
el.style.backgroundColor='#F0FFFF' ;
}

function MDN(el) {
z = 1;
fromcol = el.colF;
lay1.innerText = el.innerText;
}

function MUP(el) {
if(z==1)
{
col =el.colF ;
recol('list1', fromcol, col);
recol('head1', fromcol, col);
}
z =0;
lay1.style.display ='none'
}

</script>
</head>


<body onmouseup = " z=0; lay1.style.display='none'; setTimeout('BlurHead() ; ',100); "
onmousedown= " if (z==1) { lay1.style.display='' ; lay1.style.left=x; lay1.style.top=y; } "
>


<span style="font-family:Verdana;color:blue;size:10;">
Client-Side Dynamic tables<br>
(1) Press sort buttons to reverse sequence of rows in table.<br>
(2) Drag and drop column headers to move order of columns in table.<br>
<p>
Action will slow down for large tables and slower processors. <br>
</span>


<input id="hid_list1_order" type="text" value="asc" xstyle="width:0;" />
<input type="button" value="sort asc." onclick="reorder('list1', 'asc');" />
<input type="button" value="sort desc." onclick="reorder('list1', 'desc');" />

<table ID=TABL1 border=1 width=70%>
<thead ID="head1" style="background-color:#F0FFFF;">
<th colF=0
onmouseover=" MOV(this) ; " onmouseout =" MOT(this) ; "
onmousedown=" MDN(this) ; " onmouseup =" MUP(this) ; "
>
Rights</th>
<th colF=1
onmouseover=" MOV(this) ; " onmouseout =" MOT(this) ; "
onmousedown=" MDN(this) ; " onmouseup =" MUP(this) ; "
>
Colors</th>
<th colF=2
onmouseover=" MOV(this) ; " onmouseout =" MOT(this) ; "
onmousedown=" MDN(this) ; " onmouseup =" MUP(this) ; "
>
Waters</th>
<th colF=3
onmouseover=" MOV(this) ; " onmouseout =" MOT(this) ; "
onmousedown=" MDN(this) ; " onmouseup =" MUP(this) ; "
>
Names</th>
</thead>

<tbody ID="list1">
<tr>
<td>1 Life</td> <td class="bgred">Red</td> <td>Atlantic</td> <td>Britney</td>
</tr><tr>
<td>2 Liberty</td> <td class="bgorange">Orange</td> <td>Pacific</td> <td>Shania</td>
</tr><tr>
<td>3 Free Press</td> <td class="bgyellow">Yellow</td> <td>Artic</td> <td>Angelina</td>
</tr><tr>
<td>4 Religion</td> <td class="bggreen">Green</td> <td>Indian</td>
</tr><tr>
<td>5 Free Assembly</td> <td class="bgblue">Blue</td> <td>Taho</td> <td>Yolanda</td>
</tr>
</tbody>
</table>


<div ID="lay1"
style="position:absolute; left:0; top:0; display:none; font-weight:bold; text-align:center;
background-color: blue; font-family:Verdana; font-size: 14; size:14; color:white;
height:20; width:90; "

>

ColName
</div>

</body>
</html>
Frank (Canada)
Wednesday, January 26, 2005
I have implemented this:

http://www.poeticdata.com/griddemo
Austin Mayberry
Tuesday, February 22, 2005
Nice !
Tuesday, February 22, 2005
Austin,

That is perfect! I'll dig up some more html table/js code that I have lying around!

Thanks!

Frank (Canada)
Tuesday, February 22, 2005
Frank,
Do you have something that you can move rows up or down, by either dragging them or using an image to fire the javascript event? does not have to be in grid format... BTW the col dragging is great. Thanks...
Hank
Monday, March 7, 2005
Nope, but i don't see how much different it would be from the dragging events of the column headers.

If the rows are stored in a JS array, it shouldn't be too difficult to do a swap row using very similar code.

Sorry I don't have it handy.
Frank (Canada)
Monday, March 7, 2005
Thanks Frank. I found this: http://surfmind.com/lab/table_reorder.cfm
it gives me a great head start...thanks!

Hank
Hank
Monday, March 7, 2005
Frank,
your code for reordering columns in html works fine. Great work yaar.
But it does not work with the Firefox.


Everything other than this issue is perfect.

Kumar S
www.GuyFromChennai.com
Kumar S
Tuesday, April 19, 2005
Doh... I really want to start doing better FireFox JS code but current projects are keeping me busy. Maybe someone else can "standardize" the code.



Frank (Canada)
Tuesday, April 19, 2005
Can the columns be reordered by the mouse using activeWidget?
David D
Saturday, June 25, 2005
it's great! (but, it only works on maximized window?)
gvk63
Tuesday, August 15, 2006

This topic is archived.


Back to support forum

Forum search