Use JavaScript to Create a Scrolling Grid | 2

Use JavaScript to Create a Scrolling Grid

The scroll indicator is displayed using a table with three rows, for above, visible and below. The cell heights are used here to give the impression of a scroll bar. Note that it is not valid to specify a cell height of zero, so instead we use a value of one.

      // add the vertical scroll bar
      if ( i == 0 )
      {

         aStr.push('<td rowspan=' + data.nRow + ' valign=top>');
         aStr.push('<div style="position:relative;height:' +
            nHeight + 'px;width:20px;">');
         // add the scroll indicator
         var nHeight = data.nRow * data.nCellHeight + (data.nRow-1) * 2;
         var nStartHeight = 1;
         var nBarHeight = Math.floor(nHeight * data.nRow / data.rowHeaders.length);
         var nEndHeight = nHeight - nStartHeight - nBarHeight;
         aStr.push('<div style="position:absolute;height=120px;">');
         aStr.push('<table width=20 height=' + nHeight +
            ' border=0 cellpadding=0 cellspacing=0>');
         aStr.push('<tr><td height=1><div></div></td></tr>');
         aStr.push('<tr><td height=' + nBarHeight +
            ' bgcolor="#33cc33" height=20><div></div></td></tr>');
         aStr.push('<tr><td height=' + nEndHeight + '><div></div></td></tr>');
         aStr.push('</table>');
         aStr.push('</div>');

         // add the scroll "buttons"
         aStr.push('<div style="position:absolute;height=' +
            nHeight + 'px;width=20px;">');
         aStr.push('<table width=20 height=' + nHeight +
            ' border=0 cellpadding=0 cellspacing=0>');
         aStr.push('<tr><td width=' + nHeight/2 + ' valign=top align=center>' +
            '<div style="cursor:' + cursor + ';" ' +
            'onclick="window.' + name + '.scroll(0,-1);">^</div></td></tr>');
         aStr.push('<tr><td width=' + nHeight/2 + ' valign=bottom align=center>' +
            '<div style="cursor:' + cursor + ';" ' +
            'onclick="window.' + name + '.scroll(0,1);">v</div></td></tr>');
         aStr.push('</table>');
         aStr.push('</div>');

         aStr.push('</div>');
         aStr.push('</td>');
      }

At the end of each row, we close with a </tr>.

      strHTML.push('</tr>');
   }

The horizontal scrollbar is added in much the same way as the vertical one:

   // add the horizontal scroll bar
   aStr.push('<tr>');
   aStr.push('<td>&nbsp;</td>');
   aStr.push('<td colspan=' + this.data.nCol + '>');
   aStr.push('<div style="position:relative;width=' + nWidth + 'px;height=20px;">');
  

   // the scroll indicator part
   var nWidth = this.data.nCol * this.data.nCellWidth + (this.data.nCol-1) * 2;
   var nStartWidth = 1;
   var nBarWidth = Math.floor(nWidth * this.data.nCol /
      this.data.colHeaders.length);
   var nEndWidth = nWidth - nStartWidth - nBarWidth;
   aStr.push('<div style="position:absolute;width=' +
      nWidth + 'px;left:0px;top:0px">');
   aStr.push('<table width=' + nWidth + ' border=0 cellpadding=0 cellspacing=0>');
   aStr.push('<tr>');
   aStr.push('<td width=1><div></div></td>');
   aStr.push('<td width=' + nBarWidth + ' bgcolor="#33cc33" ' +
      'height=20><div></div></td>');
   aStr.push('<td width=' + nEndWidth + '><div></div></td>');
   aStr.push('</tr>');
   aStr.push('</table>');
   aStr.push('</div>');

   // the scroll buttons
   aStr.push('<div style="position:absolute;width=' + nWidth + 'px;' +
      'left:0px;top:0px">');
   aStr.push('<table width=' + nWidth + ' border=0 cellpadding=0 cellspacing=0>');
   aStr.push('<tr>');
   aStr.push('<td width=' + nWidth/2 + ' align=left><div style="cursor:' + cursor +
      ';width:20px;" onclick="window.' + this.name + '.scroll(-1,0);">' +
      '&lt;</div></td>');
   aStr.push('<td width=' + nWidth/2 + ' align=right><div style="cursor:' + cursor +
      ';width:20px;" onclick="window.' + this.name + '.scroll(1,0);">' +
      '&gt;</div></td>');
   aStr.push('</tr>');
   aStr.push('</table>');
   aStr.push('</div>');

   aStr.push('&nbsp;');

   aStr.push('</div>');
   aStr.push('</td>');
   aStr.push('<td>&nbsp;</td>');
   aStr.push('</tr>');

Finally the grid <table> is closed and the array is written to the document.

   // finally close off the table
   aStr.push('</table>');

   // write HTML to document.
   document.write(aStr.join(''));
}

With the constructor call complete, the Grid should now be drawn on the browser page and look something like Fig 2 shown above. All that is left now is to handle the scroll button clicks.

If you look at how the scroll buttons were defined above, you'll notice that they each contained an onclick handler something like the following:

"window.theGrid.scroll(1,0);"

‘theGrid' is the name of the Grid object passed into the constructor.

This code retrieves the Grid object from the window object and calls a ‘scroll' method passing in a couple of values that specify how much to scroll either horizontally or vertically. After the x and y offsets have been adjusted appropriately, the scroll method calls a ‘fill' method to update the Grid.

Grid.prototype.scroll = function(x,y)
{ 
   this.xOffset += x;
   if ( this.xOffset < 0 )
      this.xOffset = 0;
   if ( this.xOffset > this.data.colHeaders.length - this.data.nCol )
      this.xOffset = this.data.colHeaders.length - this.data.nCol;

 

   this.yOffset += y;
   if ( this.yOffset < 0 )
      this.yOffset = 0;
   if ( this.yOffset > this.data.rowHeaders.length - this.data.nRow )
      this.yOffset = this.data.rowHeaders.length - this.data.nRow;

   this.fill();
}

The fill method loops through the row and column header arrays and the two-dimensional value array, setting the values appropriately. The sizes of the vertical and horizontal scroll indicator sections are calculated and adjusted as well.

Grid.prototype.fill = function()
{
   this.init();

   // row headers
   for ( var i = 0; i < this.data.nRow; i++ )
      this.aRowSpan[i].innerHTML = this.data.rowHeaders[i + this.yOffset];

   // column headers
   for ( var j = 0; j < this.data.nCol; j++ )
      this.aColSpan[j].innerHTML = this.data.colHeaders[j + this.xOffset];

   // values
   for ( i = 0; i < this.data.nRow; i++ )
      for ( j = 0; j < this.data.nCol; j++ )
         this.aCellSpan[i][j].innerHTML =
            this.data.values[i + this.yOffset][j + this.xOffset];

   // vertical scrollbar
   var nHeight = this.data.nRow * this.data.nCellHeight + (this.data.nRow-1) * 2;
   var nStartHeight =
      Math.floor(nHeight * this.yOffset / this.data.rowHeaders.length);
   if ( nStartHeight == 0 ) nStartHeight++;
   var nBarHeight =
      Math.floor(nHeight * this.data.nRow / this.data.rowHeaders.length);
   var nEndHeight = nHeight - nStartHeight - nBarHeight;
   if ( nEndHeight == 0 ) nStartHeight--, nEndHeight++;

   this.aVerticalTD[0].height = nStartHeight;
   this.aVerticalTD[1].height = nBarHeight;
   this.aVerticalTD[2].height = nEndHeight;

   // horizontal scrollbar
   var nWidth = this.data.nCol * this.data.nCellWidth + (this.data.nCol-1) * 2;
   var nStartWidth =
      Math.floor(nWidth * this.xOffset / this.data.colHeaders.length);
   if ( nStartWidth == 0 ) nStartWidth++;
   var nBarWidth =
      Math.floor(nWidth * this.data.nCol / this.data.colHeaders.length);
   var nEndWidth = nWidth - nStartWidth - nBarWidth;
   if ( nEndWidth == 0 ) nEndWidth++, nStartWidth--;

   this.aHorizontalTD[0].width = nStartWidth;
   this.aHorizontalTD[1].width = nBarWidth;
   this.aHorizontalTD[2].width = nEndWidth;
}

Created: March 27, 2003
Revised: March 17, 2004

URL: URL: http://webreference.com/programming/javascript/gr/column4/1