<public:property name="defineGridBgColor">
<public:property name="defineFirstRowBgColor">
<public:property name="defineFirstColBgColor">
<public:property name="defineCurRowBgColor">
<public:property name="defineCurColBgColor">
<public:property name="defineCurEditBgColor">
<public:attach event=oncontentready onevent="initGrid()">
<script>
//Constant [can be set as attribute]
var rgbGridBgColor="#E1E4EC";//Table background
var rgbFirstRowBgColor="#6699CC";//Headline background
var rgbFirstColBgColor="#6699CC";//Head Column Background
var rgbCurRowBgColor="#BBCCDD";//Currently selected row background
var rgbCurColBgColor="#BBCCDD";//Currently selected column background
var rgbCurEditBgColor="#FFFFFF";//Currently selected to edit cell background
//Table column count
var iColCount=0;
//Table row count
var iRowCount=0;
//The current selected row
var iCurRowIndex=0;
//Currently selected column
var iCurColIndex=0;
var bIsDragRow=false;//Is the row dragged state?
var bIsDragCol=false;//Is the column dragged state
var iDragHistoryRowIndex=0;//Index of original row position before dragging
var iDragCurrentRowIndex=0;//Index of the destination row position after dragging
var iDragHistoryColIndex=0;//Drag the original column position index before dragging
var iDragCurrentColIndex=0;//Drag the destination column position index
function initGrid()
{
//Attribute acquisition
if(defineGridBgColor)
{rgbGridBgColor=defineGridBgColor;}else{rgbGridBgColor="#E1E4EC";}
if(defineFirstRowBgColor)
{rgbFirstRowBgColor=defineFirstRowBgColor;}else{rgbFirstRowBgColor="#6699CC";}
if(defineFirstColBgColor)
{rgbFirstColBgColor=defineFirstColBgColor;}else{rgbFirstColBgColor="#6699CC";}
if(defineCurRowBgColor)
{rgbCurRowBgColor=defineCurRowBgColor;}else{rgbCurRowBgColor="#BBCCDD";}
if(defineCurColBgColor)
{rgbCurColBgColor=defineCurColBgColor;}else{rgbCurColBgColor="#BBCCDD";}
if(defineCurEditBgColor)
{rgbCurEditBgColor=defineCurEditBgColor;}else{rgbCurEditBgColor="#FFFFFF";}
//Initialize constant
iColCount=(0).;
iRowCount=;
//Set the table style
=rgbGridBgColor;
="0";
="1";
="0";
="80%";
="1px solid #000000";
="1px solid #000000";
//Set cell style
for(iRow=0;iRow<iRowCount;iRow++)
{
for(iCol=0;iCol<iColCount;iCol++)
{
(iRow).cells(iCol).="1px solid #000000";
(iRow).cells(iCol).="1px solid #000000";
}
}
//Set the header line style
for(iCol=0;iCol<iColCount;iCol++)
{
(0).cells(iCol).=rgbFirstRowBgColor;
}
//Set the header column style
for(iRow=1;iRow<iRowCount;iRow++)
{
(iRow).cells(0).=rgbFirstColBgColor;
}
//Set the edit cell
for(mIndex=1;mIndex<iRowCount;mIndex++)
{
for(nIndex=1;nIndex<iColCount;nIndex++)
{
var vText=(mIndex).cells(nIndex).innerHTML;
(mIndex).cells(nIndex).innerHTML="<div contentEditable=false>"+vText+"</div>";
(mIndex).cells(nIndex).children[0].attachEvent("onclick",onEditTrue);
(mIndex).cells(nIndex).children[0].attachEvent("onblur",onEditFalse);
}
}
//Binding column event
for(iCol=1;iCol<iColCount;iCol++)
{
(0).cells(iCol).attachEvent("onmouseup",onColHeaderMouseDown);
}
//Binding row event
for(iRow=1;iRow<iRowCount;iRow++)
{
(iRow).attachEvent("onmouseup",onRowHeaderMouseDown);
}
//Binding event method
("onmousedown",onMouseDown);
("onmousemove",onMouseMove);
("onmouseup",onMouseUp);
("onselectstart",onSelectStart);
}
//Press the following
function onColHeaderMouseDown()
{
iCurColIndex=;
onColHeaderMouseDownColor(iCurColIndex);
}
//Press the
function onRowHeaderMouseDown()
{
iCurRowIndex=;
onRowHeaderMouseDownColor(iCurRowIndex);
}
//Start edit cell
function onEditTrue()
{
var vEditObject=;
=true;
=rgbCurEditBgColor;
}
//Unable to edit cells
function onEditFalse()
{
var vEditObject=;
=false;
="transparent";
}
//Press the Grid mouse
function onMouseDown()
{
if(()=="TD")
{
if(==0)
{
bIsDragRow=true;
iDragHistoryRowIndex=;
}
if(==0)
{
bIsDragCol=true;
iDragHistoryColIndex=;
}
}
}
//Grid Mouse Move
function onMouseMove()
{
if(bIsDragRow==true)
{
//Drag the line to simulate the layer processing.
}
if(bIsDragCol==true)
{
//Drag the column simulation layer to process.
}
}
//Release the Grid mouse
function onMouseUp()
{
if(bIsDragRow==true)
{
if(()=="TD")
{
if(==0)
{
iDragCurrentRowIndex=;
if(iDragHistoryRowIndex!=0&&iDragCurrentRowIndex!=0)
{
moveRow(iDragHistoryRowIndex,iDragCurrentRowIndex);
}
}
}
}
if(bIsDragCol==true)
{
if(()=="TD")
{
if(==0)
{
iDragCurrentColIndex=;
if(iDragHistoryColIndex!=0&&iDragCurrentColIndex!=0)
{
moveCol(iDragHistoryColIndex,iDragCurrentColIndex);
}
}
}
}
bIsDragRow=false;
bIsDragCol=false;
}
//Grid mouse is removed
function onMouseOut()
{
if(bIsDragRow==true)
{
bIsDragRow=false;
}
if(bIsDragCol==true)
{
bIsDragCol=false;
}
}
//Grid selects start
function onSelectStart()
{
return false;
}
//Library
//Move row
function moveRow(iFromIndex,iToIndex)
{
var strFromArray=new Array(iColCount);
var strToArray=new Array(iColCount);
for(mIndex=0;mIndex<iColCount;mIndex++)
{
strFromArray[mIndex]=(iFromIndex).cells(mIndex).innerHTML;
strToArray[mIndex]=(iToIndex).cells(mIndex).innerHTML;
}
for(nIndex=0;nIndex<iColCount;nIndex++)
{
(iFromIndex).cells(nIndex).innerHTML=strToArray[nIndex];
(iToIndex).cells(nIndex).innerHTML=strFromArray[nIndex];
}
onRowHeaderMouseDownColor(iToIndex);
cellAttachEvent();
}
//Move column
function moveCol(iFromIndex,iToIndex)
{
var strFromArray=new Array(iRowCount);
var strToArray=new Array(iRowCount);
for(mIndex=0;mIndex<iRowCount;mIndex++)
{
strFromArray[mIndex]=(mIndex).cells(iFromIndex).innerHTML;
strToArray[mIndex]=(mIndex).cells(iToIndex).innerHTML;
}
for(nIndex=0;nIndex<iRowCount;nIndex++)
{
(nIndex).cells(iFromIndex).innerHTML=strToArray[nIndex];
(nIndex).cells(iToIndex).innerHTML=strFromArray[nIndex];
}
onColHeaderMouseDownColor(iToIndex);
cellAttachEvent();
}
//Line press change
function onRowHeaderMouseDownColor(pCurRowIndex)
{
clearClient();
for(kIndex=1;kIndex<iColCount;kIndex++)
{
(pCurRowIndex).cells(kIndex).bgColor=rgbCurRowBgColor;
}
}
//Character change
function onColHeaderMouseDownColor(pCurColIndex)
{
clearClient();
for(kIndex=1;kIndex<iRowCount;kIndex++)
{
(kIndex).cells(pCurColIndex).bgColor=rgbCurColBgColor;
}
}
//Clear the customer area
function clearClient()
{
for(mIndex=1;mIndex<iRowCount;mIndex++)
{
for(nIndex=1;nIndex<iColCount;nIndex++)
{
(mIndex).cells(nIndex).bgColor="transparent";
}
}
}
//Cell event binding
function cellAttachEvent()
{
for(mIndex=1;mIndex<iRowCount;mIndex++)
{
for(nIndex=1;nIndex<iColCount;nIndex++)
{
(mIndex).cells(nIndex).children[0].attachEvent("onclick",onEditTrue);
(mIndex).cells(nIndex).children[0].attachEvent("onblur",onEditFalse);
}
}
}
</script>