Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How to let your users move entire columns in a table around?

Tables ehancement

How to let your users move entire columns in a table around?

by  friendlyposter  Posted    (Edited  )
GRATEFUL ACKNOWLEDGEMENT: This FAQ is an enhancement that builds on the code & techniques in original Dynamic Reorder Rows faq216-2692 (by Targol). The function DOMNode_insertAfter was written by Doeke Zanstra and is used with permission. See: http://www.xs4all.nl/~zanstra/logs/jsLog.htm#insertAfter

How to let your users move entire columns in a table around?

Let's say you're working with ASP or JSP and that you displayed the return values of a "SELECT ... ORDER BY..." query into a TABLE. Let's say again that your query brings back too many columns to be seen on one screen. Here is a sample code that [color blue]permits your clients to drag and drop & alter the order of the columns in a table[/color] without any call to server (no traffic on network, only client script). May be this'll help some...

Code: 
<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>


Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top