Web上功能強(qiáng)大的DbGrid表格HTC組件[只需在Table中指定樣式就可以完成多種功能可擴(kuò)展]

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;mIndexiGridRowCount;mIndex++)
{
var vTr=vTable.insertRow(mIndex);
for(nIndex=0;nIndexiGridColCount;nIndex++)
{
vTd=vTr.insertCell(nIndex);
vTd.innerText="行"+mIndex+"列"+nIndex;
}
}
DivID.appendChild(vTable);
}
function chooseColor()
{
var strColor=DlgHelper.ChooseColorDlg();
strColor=strColor.toString(16);
if(strColor.length6)
{
var sTempString="000000".substring(0,6-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('已實(shí)現(xiàn)功能')">Grid參數(shù)區(qū)/button>br>
input type=button value="表格背景" id="defineGridBgColorID">br>
input type=button value="頭行背景" id="defineFirstRowBgColorID">br>
input type=button value="頭列背景" id="defineFirstColBgColorID">br>
input type=button value="當(dāng)前選擇行背景" id="defineCurRowBgColorID">br>
input type=button value="當(dāng)前選擇列背景" id="defineCurColBgColorID">br>
input type=button value="當(dāng)前選擇編輯單元格背景" id="defineCurEditBgColorID">br>
button onclick="window.confirm('未實(shí)現(xiàn)功能')">保留功能區(qū)/button>br>
input type=text value="" id="defineGridRowCount">button onclick="iGridRowCount=defineGridRowCount.value;">行數(shù)/button>br>
input type=text value="" id="defineGridColCount">button onclick="iGridColCount=defineGridColCount.value;">列數(shù)/button>br>
input type=radio>是input type=radio>否啟動行調(diào)整br>
input type=radio>是input type=radio>否啟動列調(diào)整br>
input type=radio>是input type=radio>否啟動單元格編輯br>
button onclick="createGrid()">創(chuàng)建表格/button>br>
/fieldset>

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>
//常量[可以設(shè)置為屬性]
var rgbGridBgColor="#E1E4EC";//表格背景
var rgbFirstRowBgColor="#6699CC";//頭行背景
var rgbFirstColBgColor="#6699CC";//頭列背景
var rgbCurRowBgColor="#BBCCDD";//當(dāng)前選擇行背景
var rgbCurColBgColor="#BBCCDD";//當(dāng)前選擇列背景
var rgbCurEditBgColor="#FFFFFF";//當(dāng)前選擇編輯單元格背景
//表格列數(shù)
var iColCount=0;
//表格行數(shù)
var iRowCount=0;
//當(dāng)前選擇行
var iCurRowIndex=0;
//當(dāng)前選擇列
var iCurColIndex=0;
var bIsDragRow=false;//行是否拖動狀態(tài)
var bIsDragCol=false;//列是否拖動狀態(tài)
var iDragHistoryRowIndex=0;//拖動前原始行位置索引
var iDragCurrentRowIndex=0;//拖動后目的行位置索引
var iDragHistoryColIndex=0;//拖動前原始列位置索引
var iDragCurrentColIndex=0;//拖動后目的列位置索引
function initGrid()
{
//屬性獲取
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";}
//初始化常量
iColCount=element.rows(0).cells.length;
iRowCount=element.rows.length;
//設(shè)置表格樣式
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";
//設(shè)置單元格樣式
for(iRow=0;iRowiRowCount;iRow++)
{
for(iCol=0;iColiColCount;iCol++)
{
element.rows(iRow).cells(iCol).style.borderTop="1px solid #000000";
element.rows(iRow).cells(iCol).style.borderRight="1px solid #000000";
}
}
//設(shè)置頭行樣式
for(iCol=0;iColiColCount;iCol++)
{
element.rows(0).cells(iCol).style.backgroundColor=rgbFirstRowBgColor;
}
//設(shè)置頭列樣式
for(iRow=1;iRowiRowCount;iRow++)
{
element.rows(iRow).cells(0).style.backgroundColor=rgbFirstColBgColor;
}
//設(shè)置編輯單元格
for(mIndex=1;mIndexiRowCount;mIndex++)
{
for(nIndex=1;nIndexiColCount;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);
}
}
//綁定列事件
for(iCol=1;iColiColCount;iCol++)
{
element.rows(0).cells(iCol).attachEvent("onmouseup",onColHeaderMouseDown);
}
//綁定行事件
for(iRow=1;iRowiRowCount;iRow++)
{
element.rows(iRow).attachEvent("onmouseup",onRowHeaderMouseDown);
}
//綁定事件方法
element.attachEvent("onmousedown",onMouseDown);
element.attachEvent("onmousemove",onMouseMove);
element.attachEvent("onmouseup",onMouseUp);
element.attachEvent("onselectstart",onSelectStart);
}
//按下列
function onColHeaderMouseDown()
{
iCurColIndex=window.event.srcElement.cellIndex;
onColHeaderMouseDownColor(iCurColIndex);
}
//按下行
function onRowHeaderMouseDown()
{
iCurRowIndex=window.event.srcElement.parentElement.rowIndex;
onRowHeaderMouseDownColor(iCurRowIndex);
}
//啟動編輯單元格
function onEditTrue()
{
var vEditObject=window.event.srcElement;
vEditObject.contentEditable=true;
vEditObject.runtimeStyle.backgroundColor=rgbCurEditBgColor;
}
//禁止編輯單元格
function onEditFalse()
{
var vEditObject=window.event.srcElement;
vEditObject.contentEditable=false;
vEditObject.runtimeStyle.backgroundColor="transparent";
}
//Grid鼠標(biāo)按下
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;
}
}
}
//Grid鼠標(biāo)移動
function onMouseMove()
{
if(bIsDragRow==true)
{
//拖動行模擬層處理.
}
if(bIsDragCol==true)
{
//拖動列模擬層處理.
}
}
//Grid鼠標(biāo)抬起
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!=0iDragCurrentRowIndex!=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!=0iDragCurrentColIndex!=0)
{
moveCol(iDragHistoryColIndex,iDragCurrentColIndex);
}
}
}
}
bIsDragRow=false;
bIsDragCol=false;
}
//Grid鼠標(biāo)移出
function onMouseOut()
{
if(bIsDragRow==true)
{
bIsDragRow=false;
}
if(bIsDragCol==true)
{
bIsDragCol=false;
}
}
//Grid選擇開始
function onSelectStart()
{
return false;
}
//庫
//移動行
function moveRow(iFromIndex,iToIndex)
{
var strFromArray=new Array(iColCount);
var strToArray=new Array(iColCount);
for(mIndex=0;mIndexiColCount;mIndex++)
{
strFromArray[mIndex]=element.rows(iFromIndex).cells(mIndex).innerHTML;
strToArray[mIndex]=element.rows(iToIndex).cells(mIndex).innerHTML;
}
for(nIndex=0;nIndexiColCount;nIndex++)
{
element.rows(iFromIndex).cells(nIndex).innerHTML=strToArray[nIndex];
element.rows(iToIndex).cells(nIndex).innerHTML=strFromArray[nIndex];
}
onRowHeaderMouseDownColor(iToIndex);
cellAttachEvent();
}
//移動列
function moveCol(iFromIndex,iToIndex)
{
var strFromArray=new Array(iRowCount);
var strToArray=new Array(iRowCount);
for(mIndex=0;mIndexiRowCount;mIndex++)
{
strFromArray[mIndex]=element.rows(mIndex).cells(iFromIndex).innerHTML;
strToArray[mIndex]=element.rows(mIndex).cells(iToIndex).innerHTML;
}
for(nIndex=0;nIndexiRowCount;nIndex++)
{
element.rows(nIndex).cells(iFromIndex).innerHTML=strToArray[nIndex];
element.rows(nIndex).cells(iToIndex).innerHTML=strFromArray[nIndex];
}
onColHeaderMouseDownColor(iToIndex);
cellAttachEvent();
}
//行按下變化
function onRowHeaderMouseDownColor(pCurRowIndex)
{
clearClient();
for(kIndex=1;kIndexiColCount;kIndex++)
{
element.rows(pCurRowIndex).cells(kIndex).bgColor=rgbCurRowBgColor;
}
}
//列按下變化
function onColHeaderMouseDownColor(pCurColIndex)
{
clearClient();
for(kIndex=1;kIndexiRowCount;kIndex++)
{
element.rows(kIndex).cells(pCurColIndex).bgColor=rgbCurColBgColor;
}
}
//清除客戶區(qū)
function clearClient()
{
for(mIndex=1;mIndexiRowCount;mIndex++)
{
for(nIndex=1;nIndexiColCount;nIndex++)
{
element.rows(mIndex).cells(nIndex).bgColor="transparent";
}
}
}
//單元格事件綁定
function cellAttachEvent()
{
for(mIndex=1;mIndexiRowCount;mIndex++)
{
for(nIndex=1;nIndexiColCount;nIndex++)
{
element.rows(mIndex).cells(nIndex).children[0].attachEvent("onclick",onEditTrue);
element.rows(mIndex).cells(nIndex).children[0].attachEvent("onblur",onEditFalse);
}
}
}
/script>