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)

January 26,

I have implemented this:

http://www.poeticdata.com/griddemo

Austin Mayberry

February 22,

Nice !

February 22,

Austin,

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

Thanks!

Frank (Canada)

February 22,

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

March 7,

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)

March 7,

Thanks Frank. I found this: http://surfmind.com/lab/table_reorder.cfm
it gives me a great head start...thanks!

Hank

Hank

March 7,

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

April 19,

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)

April 19,

Can the columns be reordered by the mouse using activeWidget?

David D

June 25,

it's great! (but, it only works on maximized window?)

gvk63

August 15,

This topic is archived.

Dynamically Re-Order Columns

See also:

Search

New Data Grid

Version 2