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

2020-01-31 16:06:26

字體：大中小

供稿：網(wǎng)友

Grid.htm

 
<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="行"+mIndex+"列"+nIndex; 
} 
} 
DivID.appendChild(vTable); 
} 
function chooseColor() 
{ 
var strColor=DlgHelper.ChooseColorDlg(); 
strColor=strColor.toString(16); 
if(strColor.length<6) 
{ 
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>否啟動(dòng)行調(diào)整<br> 
<input type=radio>是<input type=radio>否啟動(dòng)列調(diào)整<br> 
<input type=radio>是<input type=radio>否啟動(dòng)單元格編輯<br> 
<button onclick="createGrid()">創(chuàng)建表格</button><br> 
</fieldset> 

Grid.htc

復(fù)制代碼代碼如下:

 
<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;//行是否拖動(dòng)狀態(tài) 
var bIsDragCol=false;//列是否拖動(dòng)狀態(tài) 
var iDragHistoryRowIndex=0;//拖動(dòng)前原始行位置索引 
var iDragCurrentRowIndex=0;//拖動(dòng)后目的行位置索引 
var iDragHistoryColIndex=0;//拖動(dòng)前原始列位置索引 
var iDragCurrentColIndex=0;//拖動(dòng)后目的列位置索引 
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;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"; 
} 
} 
//設(shè)置頭行樣式 
for(iCol=0;iCol<iColCount;iCol++) 
{ 
element.rows(0).cells(iCol).style.backgroundColor=rgbFirstRowBgColor; 
} 
//設(shè)置頭列樣式 
for(iRow=1;iRow<iRowCount;iRow++) 
{ 
element.rows(iRow).cells(0).style.backgroundColor=rgbFirstColBgColor; 
} 
//設(shè)置編輯單元格 
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); 
} 
} 
//綁定列事件 
for(iCol=1;iCol<iColCount;iCol++) 
{ 
element.rows(0).cells(iCol).attachEvent("onmouseup",onColHeaderMouseDown); 
} 
//綁定行事件 
for(iRow=1;iRow<iRowCount;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); 
} 
//啟動(dòng)編輯單元格 
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)移動(dòng) 
function onMouseMove() 
{ 
if(bIsDragRow==true) 
{ 
//拖動(dòng)行模擬層處理. 
} 
if(bIsDragCol==true) 
{ 
//拖動(dòng)列模擬層處理. 
} 
} 
//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!=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; 
} 
//Grid鼠標(biāo)移出 
function onMouseOut() 
{ 
if(bIsDragRow==true) 
{ 
bIsDragRow=false; 
} 
if(bIsDragCol==true) 
{ 
bIsDragCol=false; 
} 
} 
//Grid選擇開始 
function onSelectStart() 
{ 
return false; 
} 
//庫(kù) 
//移動(dòng)行 
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(); 
} 
//移動(dòng)列 
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(); 
} 
//行按下變化 
function onRowHeaderMouseDownColor(pCurRowIndex) 
{ 
clearClient(); 
for(kIndex=1;kIndex<iColCount;kIndex++) 
{ 
element.rows(pCurRowIndex).cells(kIndex).bgColor=rgbCurRowBgColor; 
} 
} 
//列按下變化 
function onColHeaderMouseDownColor(pCurColIndex) 
{ 
clearClient(); 
for(kIndex=1;kIndex<iRowCount;kIndex++) 
{ 
element.rows(kIndex).cells(pCurColIndex).bgColor=rgbCurColBgColor; 
} 
} 
//清除客戶區(qū) 
function clearClient() 
{ 
for(mIndex=1;mIndex<iRowCount;mIndex++) 
{ 
for(nIndex=1;nIndex<iColCount;nIndex++) 
{ 
element.rows(mIndex).cells(nIndex).bgColor="transparent"; 
} 
} 
} 
//單元格事件綁定 
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> 