:: Forum >> Version 1 >>

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:whitebackground-color:#FF0000;  }
    .
bggreen  color:whitebackground-color:#00FF00;  }
    .
bgblue   color:whitebackground-color:#0000FF;  }
    .
bgorange color:whitebackground-color:#FFCC00;  }
    .
bgyellow color:whitebackground-color:#F0F020;  }

</
style>

<
script language="jscript">


  function 
reorder(listNameorder) {
    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=1i<nbRowsi++) {
         
// 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(curNodefirstNode);
      }
    }
  }
var 
colupdSW=0;

function 
recol(listNamencoltocol) {

      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=1i<nbRows+1i++) {
         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(curTDNodefstTDNode);
         } else {
              var 
fstTDNode curNode.children(itocol); 
              var 
curTDNode curNode.children(incol);
              
DOMNode_insertAfter(curTDNodefstTDNode);
            }    
         
         for (var 
j=0j<numTDsj++)  {
                
curNode.children(j).colF=;
         } 

      }


      
colupdSW;
    
  }

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 
xyzcolfromcol;
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) {
  
= (window.Event? e.pageX event.clientX;
  
= (window.Event? e.pageY event.clientY;

  if (
lay1.style.display=="")
     { 
lay1.style.top=y+9lay1.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)  {
   
1;
   
fromcol el.colF
   
lay1.innerText el.innerText;
}

function 
MUP(el)  {
   if(
z==1)  
      { 
          
col =el.colF 
          
recol('list1'fromcolcol); 
          
recol('head1'fromcolcol);
      } 
   
=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>
(
1Press sort buttons to reverse sequence of rows in table.<br>
(
2Drag 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