</STYLE>
<SCRIPT type="text/javascript">
/*\
|*| Version : 0.92
|*| Author : Chaitanya Yinti
|*| Contact : [email protected]
|*| WebSite : http://dhtmlgrid.sourceforge.net/
|*|
|*| Feel free to use this script under the terms of the GNU General Public
|*| License, as long as you do not remove or alter this notice.
\*/
/*************************************\
| Start of Config Param |
\*************************************/
// Color used for hilighting a selected row
var clrHilight = 'blue';
// Set this to false if you want 'click to select' and
// 'doubleclick to Edit' mode
var blnPointToSelect = true;
// Full path of the blank image used to hide the sort images
var strBlankImage = "blank.gif";
// Full path of the up image used on sort asc
var strUpImage = "up.gif";
// Full path of the up image used on sort des
var strDownImage = "down.gif";
// The width of the images used to indicate the asc/des sort
var intImgWidth = 12;
// The height of the images used to indicate the asc/des sort
var intImgHeight = 13;
/*************************************\
| End of Config Param |
\*************************************/
// Stores the last used object during sort
var objLastClick = -1;
// Stores the text being edited
var txtOld = "";
// Stores the total table width
var intTotalWidth = 0;
// Stores the flag used by capturemouse
var blnMouseOver = false;
// Stores the div being moved
var objDivToMove = null;
// Stores the number of coloumns; initialized in init ()
var intColCount = 0;
// Stores the row element currently selected
var objRowSelected = null;
//THE element which holds the table...
var element = null;
/*************************************\
| Globals end |
\*************************************/
/*********************TODO*****************************\
prototype setCapture/releaseCapture PROPERLY
Get rid of isIE, isNS4 completely ...
Extend keycapture to navigate the table on up/down arrow
Fix escape/unescape on text change
\******************************************************/
/*\
|*| The entry point. This will
|*| Attache all the appropriate functions to the table
|*| Call function to create the IMG elems used during the sorting
|*| call function to init the DIV elems that are used for moving
|*| call function to init the DIV elems used for about box
\*/ function init (tableName)
{
//Handle all javascript errors
window.onerror = handleError;
if ((isNS4) && (!isNS6)) alert ("Currently only supports NN 6 and above");
if (document.getElementById)
element = document.getElementById (tableName); else //TODO: Need to test this piece of code still. Happens only in NN4 so far
eval (element = "document." + tableName);
if (element == null) return alert ("Error: Not able to get table element ");
if (element.tagName != 'TABLE') return alert ("Error: Not able to control element " + element.tagName);
//Need this fix for IE only .. so element.focus is stubbed in NN
element.focus ();
initSortImages ();
initDiv ();
initAbout ();
}
/*\
|*| This function removes the textnodes from the table rows.
|*| This cleanup work is needed to get rid of the EXTRA textnodes that NN gives
\*/
function removeTextNodes (t)
{ for (var i = 0; t.childNodes[i] ; i++)
{ if (!t.childNodes[i].tagName)
{
t.childNodes[i].parentNode.removeChild (t.childNodes[i]);
} else
{ for (var j = 0; t.childNodes[i].childNodes[j] ; j++)
{ if (!t.childNodes[i].childNodes[j].tagName)
t.childNodes[i].childNodes[j].parentNode.removeChild (t.childNodes[i].childNodes[j]);
}
}
}
}
/*\
|*| This function adds the blank images to the head row of the table
\*/ function initSortImages ()
{ if (!element.tHead) return;
removeTextNodes (element.tHead);
var theadrow = element.tHead.childNodes[0]; //Assume just one Head row
if (isIE) theadrow.style.cursor = "hand"; else theadrow.style.cursor = "pointer";
/*\
|*| This will only be called once during initIALIZATION
|*| This will create the DIV elems at the end of each col and
|*| attach all the functions needed to resize the coloumns
\*/ function initDiv ()
{
var objLast = element, objDiv;
removeTextNodes (element.tBodies[0]);
for (var i = 1; i <= intColCount; i++)
{
objDiv = document.createElement ("DIV");
objDiv.setAttribute ('id', "DragMark" + (i - 1));
objDiv.setAttribute ('name', i); //Used to track the TDs that have to be moved
objDiv.style.position = "absolute";
objDiv.style.top = 0;
var objTD = element.tHead.childNodes[0].childNodes[i - 1]; if (!objTD || objTD.tagName != "TD") return;
//To make it more beautiful in IE 6 if (navigator.appVersion.indexOf ("MSIE 6.0") != -1)
objDiv.style.cursor = "col-resize"; else
objDiv.style.cursor = "crosshair";
/*\
|*| This function will be fired onmouseover of the DIVs
|*| Set the flag to true indicating that the mouse is over the DIV
\*/ function flagTrue ()
{
blnMouseOver = true;
}
/*\
|*| This function will be fired onmousedown on the DIVs
|*| Capture all the mosue events if mousedown is fired inside the DIV
\*/ function captureMouse ()
{ if (blnMouseOver)
{
objDivToMove = window.event.srcElement;
objDivToMove.setCapture ();
}
}
/*\
|*| This function will be fired onmousemove of the DIVs
|*| This will be used as a ondrag function... thanks to IE 5
\*/ function resizeColoumn ()
{
//If mouse button is down, objDivToMove will be valid... we can move/resize if (!objDivToMove) return;
var intTDNum = objDivToMove.name - 1;
var thead = element.tHead;
if (!thead) return;
var objTD = thead.childNodes[0].childNodes[intTDNum];
if (!objTD || objTD.tagName != "TD") return;
var intCurWidth = objTD.offsetWidth;
var newX = window.event.clientX;
//var newX = window.event.x;
var intNewWidth = newX - objTD.offsetLeft;
//TODO: who decided that the minimum col widhth is 50px? if (intNewWidth < 50) return;
//Check to see if the table widht is more than the width of the window
//Need that 20px buffer in IE to prevent scroll bars from appearing if (element.document.body.offsetWidth - 20 < element.offsetWidth - intCurWidth + intNewWidth) return;
objTD.style.width = intNewWidth;
var objDiv = objDivToMove;
//Will be ? depending on which side the mouse moved
//will be used to move all the DIVs remaining on the right
var intDivMove = newX - objDiv.offsetLeft;
objDiv.style.left = newX;
//Move all the remaining DIVs on the right for (var i = 1; i < intColCount - intTDNum; i++)
{
objDiv = objDiv.nextSibling;
objDiv.style.left = objDiv.offsetLeft + intDivMove ;
}
}
/*\
|*| This function will be fired onmouseup
|*| Release all the mouse events of the DIV
\*/ function releaseMouse ()
{
objDivToMove.releaseCapture ();
objDivToMove = null;
}
/*\
|*| This function will be fired onmouseout of the DIV
|*| Set the flag indicating that the mouse is NOT over the DIV
\*/ function flagFalse ()
{
blnMouseOver = false;
}
/*\
|*| This function will be called once during initIALIZATION
|*| This will create DIV elm after the table to display the ABOUT informationA
\*/ function initAbout ()
{
objDiv = window.document.createElement ("DIV");
objDiv.id = "About";
objDiv.style.position = "absolute";
objDiv.style.top = 0;
objDiv.style.left = 0 ;
objDiv.align = "center";
//element.document.body.offsetWidth ==> width of the IFRAME in IE
objDiv.style.width = element.document.body.offsetWidth;
objDiv.style.height = element.document.body.offsetHeight;
objDiv.style.backgroundColor = "#0000FF";
objDiv.style.color = "#FFFF00";
objDiv.style.visibility = "hidden";
objDiv.insertAdjacentText ("afterBegin", "DHTML Grid ver 0.92\n\n" + "");
/*\
|*| detach all the events attached to the element and call other cleanup functions
\*/ function cleanup ()
{
element.detachEvent ('onmouseover', selectRow);
element.detachEvent ('onclick', onClickCell);
cleanupDiv ();
cleanupAbout ();
}
/*\
|*| Used by cleanup to clean the DIVs created for moving the Cols
|*| detach all the events and delete the elements here
\*/ function cleanupDiv ()
{
var objDiv; for (var i = 1; i <= intColCount; i++)
{
objDiv = element.document.getElementById ("DragMark" + (i - 1));
objDiv.detachEvent ('onmouseover', flagTrue);
objDiv.detachEvent ('onmousedown', captureMouse);
objDiv.detachEvent ('onmousemove', resizeColoumn);
objDiv.detachEvent ('onmouseup', releaseMouse);
objDiv.detachEvent ('onmouseout', flagFalse);
objDiv.removeNode (true);
}
}
/*\
|*| Detach all the events and Delete the elms related to the about box here
\*/ function cleanupAbout ()
{
element.document.getElementById ("About").removeNode (true);
}
/*\
|*| This is THE function which does all the real sorting of the rows
|*| First get rid of all the text-node elements that NN returns for spaces in the tables
|*| then sort the contents based on which coloumn is clicked
\*/ function insertionSort (t, iRowEnd, fReverse, iColumn)
{
var textRowInsert, textRowCurrent, eRowInsert, eRowWalk;
removeTextNodes (t); for (var iRowInsert = 1 ; iRowInsert <= iRowEnd ; iRowInsert++)
{ if (iColumn)
{ if (typeof (t.childNodes[iRowInsert].childNodes[iColumn]) != "undefined")
textRowInsert = t.childNodes[iRowInsert].childNodes[iColumn].innerText; else
textRowInsert = "";
} else
{
textRowInsert = t.childNodes[iRowInsert].innerText;
}
/*\
|*| This function is called when there is a click event on the top
|*| row
\*/ function sort ()
{
var srcElem = getEventCell (); if (srcElem.tagName != "TD") return;
var thead = element.tHead;
// clear the sort images in the head
var imgcol = thead.getElementsByTagName ("IMG"); for (var x = 0; x < imgcol.length; x++)
{
imgcol[x].setAttribute('src', strBlankImage);
}
/*\
|*| This function is called when focus is lost on the text box
|*| that is used to read user input. Validate the contents of the
|*| input box and write them back to the table cell
\*/ function focusLost ()
{
var objSrcElm = window.event.srcElement;
objSrcElm.parentNode.innerHTML = unescape (objSrcElm.value);
}
/*\
|*| This function is called when user clicks on a cell other than
|*| the top row.
|*| Show the content of the cell in an input box
\*/ function onEdit ()
{
var srcElem = getEventCell ();
if (srcElem.tagName != "TD") return; if (srcElem.firstChild && srcElem.firstChild.tagName == "INPUT") return;
/*\
|*| This function is used to add a row at the end of the tabl
|*| Once the rows are added it calls the function to change the height
|*| of the DIVs that are used for resizing the table.
\*/ function addRow ()
{
var objTR = document.createElement ("TR");
var objTD = document.createElement ("TD");
for (var i = 0; i < addRow.arguments.length; i++)
{
objTD = document.createElement ("TD");
objTD.appendChild (document.createTextNode ((arguments[i]=="")?"null":arguments[i]));
objTR.insertAdjacentElement ("beforeEnd", objTD);
}
/*\
|*| The function deletes the last row by calling the deleteRow function
|*| with the table row count
\*/ function deleteLastRow ()
{
removeTextNodes (element.tBodies[0]); this.deleteRow (element.tBodies[0].childNodes.length - 1);
}
/*\
|*| The function checks if the rownum passed is a valid row
|*| and deletes it
|*| This also calls the resizeDivs function to reduce the height
|*| of the DIVs that are used in resizing the table
\*/ function deleteRow (rowNum)
{
var tbody = element.tBodies [0]; if (!tbody || rowNum < 0) return;
/*\
|*| This will be called on everkeypress event of the input box
|*| This raises the focuslost event if the user hits enter
\*/ function checkForEnter ()
{ if (event.keyCode == 13) focusLost ();
}
/*\
|*| Toggle the About div section
\*/ function about ()
{ if (element.document.getElementById ("About").style.visibility == "hidden")
element.document.getElementById ("About").style.visibility = "visible"; else
element.document.getElementById ("About").style.visibility = "hidden";
}
/*\
|*| Need this as IE 5 doesnt give the offsetLeft property properly
\*/ function getRealPos (elm)
{
intPos = 0;
elm = elm.previousSibling; while ((elm!= null) && (elm.tagName!="BODY"))
{
intPos += elm.width - 0;
elm = elm.previousSibling;
} return intPos;
}
/*\
|*| Return the TR elem on which an event has fireed
\*/ function getEventRow ()
{
var srcElem = window.event.srcElement;
//crawl up to find the row while (srcElem.tagName != "TR" && srcElem.tagName != "TABLE")
{
srcElem = srcElem.parentNode;
} return srcElem;
}
/*\
|*| Return the TD elem on which an event has fireed
\*/ function getEventCell ()
{
var srcElem = window.event.srcElement;
//crawl up the tree to find the table col while (srcElem.tagName != "TD" && srcElem.tagName != "TABLE")
{
srcElem = srcElem.parentNode;
} return srcElem;
<font color="#0
