Powerful DbGrid Table HTC component on the Web [you only need to specify a style in the Table to complete a variety of functions to expand]

Grid.htm

Copy codeThe Code is as follows: <style>
INPUT
{
DefineINPUTOnClick: expression (this. onclick = function () {if (this. type = "button") {this. style. color = chooseColor ();}});
}
</Style>
<Script>
Var iGridRowCount = 0;
Var iGridColCount = 0;
Function createGrid ()
{
DivID. innerHTML = "";
If (iGridRowCount = 0) {iGridRowCount = 5 ;}
If (iGridColCount = 0) {iGridColCount = 5 ;}
Var vTable = document. createElement ("table ");
VTable. style. behavior = "url (Grid. htc )";
If (defineGridBgColorID. style. color)
{VTable. defineGridBgColor = defineGridBgColorID. style. color ;}
If (defineFirstRowBgColorID. style. color)
{VTable. defineFirstRowBgColor = defineFirstRowBgColorID. style. color ;}
If (defineFirstColBgColorID. style. color)
{VTable. defineFirstColBgColor = defineFirstColBgColorID. style. color ;}
If (defineCurRowBgColorID. style. color)
{VTable. defineCurRowBgColor = defineCurRowBgColorID. style. color ;}
If (defineCurColBgColorID. style. color)
{VTable. defineCurColBgColor = defineCurColBgColorID. style. color ;}
If (defineCurEditBgColorID. style. color)
{VTable. defineCurEditBgColor = defineCurEditBgColorID. style. color ;}
For (mIndex = 0; mIndex <iGridRowCount; mIndex ++)
{
Var vTr = vTable. insertRow (mIndex );
For (nIndex = 0; nIndex <iGridColCount; nIndex ++)
{
VTd = vTr. insertCell (nIndex );
VTd. innerText = "row" + mIndex + "column" + nIndex;
}
}
DivID. appendChild (vTable );
}
Function chooseColor ()
{
Var strColor = DlgHelper. ChooseColorDlg ();
StrColor = strColor. toString (16 );
If (strColor. length <6)
{
Var sTempString = "000000". substring (-strColor. length );
StrColor = sTempString. concat (strColor );
}
Return strColor;
}
</Script>
<Div id = "DivID"> </div>
<Object id = "DlgHelper" classid = "clsid: 3050f819-98b5-11cf-bb82-00aa00bdce0b" width = "0px" height = "0px"> </object>
<Fieldset>
<Button onclick = "window. confirm ('implemented function')"> Grid Parameter area </button> <br>
<Input type = button value = "Table background" id = "defineGridBgColorID"> <br>
<Input type = button value = "header background" id = "defineFirstRowBgColorID"> <br>
<Input type = button value = "header column background" id = "defineFirstColBgColorID"> <br>
<Input type = button value = "currently selected row background" id = "defineCurRowBgColorID"> <br>
<Input type = button value = "current selected column background" id = "defineCurColBgColorID"> <br>
<Input type = button value = "currently select to edit the cell background" id = "defineCurEditBgColorID"> <br>
<Button onclick = "window. confirm ('unimplemented functions')"> retain the functional area </button> <br>
<Input type = text value = "" id = "defineGridRowCount"> <button onclick = "iGridRowCount = defineGridRowCount. value;"> Number of rows </button> <br>
<Input type = text value = "" id = "defineGridColCount"> <button onclick = "iGridColCount = defineGridColCount. value;"> Number of columns </button> <br>
<Input type = radio> Yes <input type = radio> no startup line adjustment <br>
<Input type = radio> Yes <input type = radio> no start column adjustment <br>
<Input type = radio> Yes <input type = radio> NO. Start Cell editing <br>
<Button onclick = "createGrid ()"> Create a table </button> <br>
</Fieldset>

Grid. htcCopy codeThe Code is as follows: <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"; // the background of the first line
Var rgbFirstColBgColor = "# 6699CC"; // the background of the header Column
Var rgbCurRowBgColor = "# BBCCDD"; // specifies the background of the currently selected row.
Var rgbCurColBgColor = "# BBCCDD"; // the background of the selected column
Var rgbCurEditBgColor = "# FFFFFF"; // the background of the currently selected cell.
// Number of table columns
Var iColCount = 0;
// Number of table rows
Var iRowCount = 0;
// Select the row currently
Var iCurRowIndex = 0;
// The selected column
Var iCurColIndex = 0;
Var bIsDragRow = false; // whether the row is dragged
Var bIsDragCol = false; // whether the column is dragged
Var iDragHistoryRowIndex = 0; // index of the original row before dragging
Var iDragCurrentRowIndex = 0; // index of the target row location after dragging
Var iDragHistoryColIndex = 0; // index of the original column before dragging
Var iDragCurrentColIndex = 0; // index of the destination column after dragging
Function initGrid ()
{
// Obtain attributes
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 a constant
IColCount = element. rows (0). cells. length;
IRowCount = element. rows. length;
// Set the table style
Element. style. backgroundColor = rgbGridBgColor;
Element. border = "0 ";
Element. cellSpacing = "1 ";
Element. cellPadding = "0 ";
Element. width = "80% ";
Element. style. borderLeft = "1px solid #000000 ";
Element. style. borderBottom = "1px solid #000000 ";
// Set the cell style
For (iRow = 0; iRow <iRowCount; iRow ++)
{
For (iCol = 0; iCol <iColCount; iCol ++)
{
Element. rows (iRow). cells (iCol). style. borderTop = "1px solid #000000 ";
Element. rows (iRow). cells (iCol). style. borderRight = "1px solid #000000 ";
}
}
// Set the header line style
For (iCol = 0; iCol <iColCount; iCol ++)
{
Element. rows (0). cells (iCol). style. backgroundColor = rgbFirstRowBgColor;
}
// Set the header Column Style
For (iRow = 1; iRow <iRowCount; iRow ++)
{
Element. rows (iRow). cells (0). style. backgroundColor = rgbFirstColBgColor;
}
// Set the editing Cell
For (mIndex = 1; mIndex <iRowCount; mIndex ++)
{
For (nIndex = 1; nIndex <iColCount; nIndex ++)
{
Var vText = element. rows (mIndex). cells (nIndex). innerHTML;
Element. rows (mIndex). cells (nIndex). innerHTML = "<div contentEditable = false>" + vText + "</div> ";
Element. rows (mIndex). cells (nIndex). children [0]. attachEvent ("onclick", onEditTrue );
Element. rows (mIndex). cells (nIndex). children [0]. attachEvent ("onblur", onEditFalse );
}
}
// Bind a column event
For (iCol = 1; iCol <iColCount; iCol ++)
{
Element. rows (0). cells (iCol). attachEvent ("onmouseup", onColHeaderMouseDown );
}
// Bind a row event
For (iRow = 1; iRow <iRowCount; iRow ++)
{
Element. rows (iRow). attachEvent ("onmouseup", onRowHeaderMouseDown );
}
// Bind event Method
Element. attachEvent ("onmousedown", onMouseDown );
Element. attachEvent ("onmousemove", onMouseMove );
Element. attachEvent ("onmouseup", onMouseUp );
Element. attachEvent ("onselectstart", onSelectStart );
}
// Press the following
Function onColHeaderMouseDown ()
{
ICurColIndex = window. event. srcElement. cellIndex;
OnColHeaderMouseDownColor (iCurColIndex );
}
// Press the line
Function onRowHeaderMouseDown ()
{
ICurRowIndex = window. event. srcElement. parentElement. rowIndex;
OnRowHeaderMouseDownColor (iCurRowIndex );
}
// Start the edit Cell
Function onEditTrue ()
{
Var vEditObject = window. event. srcElement;
VEditObject. contentEditable = true;
VEditObject. runtimeStyle. backgroundColor = rgbCurEditBgColor;
}
// Disable cell editing
Function onEditFalse ()
{
Var vEditObject = window. event. srcElement;
VEditObject. contentEditable = false;
VEditObject. runtimeStyle. backgroundColor = "transparent ";
}
// Press the Grid mouse
Function onMouseDown ()
{
If (window. event. srcElement. tagName. toUpperCase () = "TD ")
{
If (window. event. srcElement. cellIndex = 0)
{
BIsDragRow = true;
IDragHistoryRowIndex = window. event. srcElement. parentElement. rowIndex;
}
If (window. event. srcElement. parentElement. rowIndex = 0)
{
BIsDragCol = true;
IDragHistoryColIndex = window. event. srcElement. cellIndex;
}
}
}
// Move the Grid cursor
Function onMouseMove ()
{
If (bIsDragRow = true)
{
// Drag the row to simulate layer processing.
}
If (bIsDragCol = true)
{
// Drag the column to simulate layer processing.
}
}
// Lift the Grid cursor
Function onMouseUp ()
{
If (bIsDragRow = true)
{
If (window. event. srcElement. tagName. toUpperCase () = "TD ")
{
If (window. event. srcElement. cellIndex = 0)
{
IDragCurrentRowIndex = window. event. srcElement. parentElement. rowIndex;
If (iDragHistoryRowIndex! = 0 & iDragCurrentRowIndex! = 0)
{
MoveRow (iDragHistoryRowIndex, iDragCurrentRowIndex );
}
}
}
}
If (bIsDragCol = true)
{
If (window. event. srcElement. tagName. toUpperCase () = "TD ")
{
If (window. event. srcElement. parentElement. rowIndex = 0)
{
IDragCurrentColIndex = window. event. srcElement. cellIndex;
If (iDragHistoryColIndex! = 0 & iDragCurrentColIndex! = 0)
{
MoveCol (iDragHistoryColIndex, iDragCurrentColIndex );
}
}
}
}
BIsDragRow = false;
BIsDragCol = false;
}
// Move the cursor out of the Grid
Function onMouseOut ()
{
If (bIsDragRow = true)
{
BIsDragRow = false;
}
If (bIsDragCol = true)
{
BIsDragCol = false;
}
}
// Select Start from Grid
Function onSelectStart ()
{
Return false;
}
// Database
// Move the row
Function moveRow (iFromIndex, iToIndex)
{
Var strFromArray = new Array (iColCount );
Var strToArray = new Array (iColCount );
For (mIndex = 0; mIndex <iColCount; mIndex ++)
{
StrFromArray [mIndex] = element. rows (iFromIndex). cells (mIndex). innerHTML;
StrToArray [mIndex] = element. rows (iToIndex). cells (mIndex). innerHTML;
}
For (nIndex = 0; nIndex <iColCount; nIndex ++)
{
Element. rows (iFromIndex). cells (nIndex). innerHTML = strToArray [nIndex];
Element. rows (iToIndex). cells (nIndex). innerHTML = strFromArray [nIndex];
}
OnRowHeaderMouseDownColor (iToIndex );
CellAttachEvent ();
}
// Move the column
Function moveCol (iFromIndex, iToIndex)
{
Var strFromArray = new Array (iRowCount );
Var strToArray = new Array (iRowCount );
For (mIndex = 0; mIndex <iRowCount; mIndex ++)
{
StrFromArray [mIndex] = element. rows (mIndex). cells (iFromIndex). innerHTML;
StrToArray [mIndex] = element. rows (mIndex). cells (iToIndex). innerHTML;
}
For (nIndex = 0; nIndex <iRowCount; nIndex ++)
{
Element. rows (nIndex). cells (iFromIndex). innerHTML = strToArray [nIndex];
Element. rows (nIndex). cells (iToIndex). innerHTML = strFromArray [nIndex];
}
OnColHeaderMouseDownColor (iToIndex );
CellAttachEvent ();
}
// The row is changed as follows:
Function onRowHeaderMouseDownColor (pCurRowIndex)
{
ClearClient ();
For (kIndex = 1; kIndex <iColCount; kIndex ++)
{
Element. rows (pCurRowIndex). cells (kIndex). bgColor = rgbCurRowBgColor;
}
}
// Column press change
Function onColHeaderMouseDownColor (pCurColIndex)
{
ClearClient ();
For (kIndex = 1; kIndex <iRowCount; kIndex ++)
{
Element. rows (kIndex). cells (pCurColIndex). bgColor = rgbCurColBgColor;
}
}
// Clear the customer Zone
Function clearClient ()
{
For (mIndex = 1; mIndex <iRowCount; mIndex ++)
{
For (nIndex = 1; nIndex <iColCount; nIndex ++)
{
Element. rows (mIndex). cells (nIndex). bgColor = "transparent ";
}
}
}
// Bind a cell event
Function cellAttachEvent ()
{
For (mIndex = 1; mIndex <iRowCount; mIndex ++)
{
For (nIndex = 1; nIndex <iColCount; nIndex ++)
{
Element. rows (mIndex). cells (nIndex). children [0]. attachEvent ("onclick", onEditTrue );
Element. rows (mIndex). cells (nIndex). children [0]. attachEvent ("onblur", onEditFalse );
}
}
}
</Script>