Web上功能强大的DbGrid表格HTC组件[只需在Table中指定样式就可以完成多种功能可扩展]

<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('已实现功能')">grid参数区</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="当前选择行背景" id="definecurrowbgcolorid"><br>
<input type=button value="当前选择列背景" id="definecurcolbgcolorid"><br>
<input type=button value="当前选择编辑单元格背景" id="definecureditbgcolorid"><br>
<button onclick="window.confirm('未实现功能')">保留功能区</button><br>
<input type=text value="" id="definegridrowcount"><button onclick="igridrowcount=definegridrowcount.value;">行数</button><br>
<input type=text value="" id="definegridcolcount"><button onclick="igridcolcount=definegridcolcount.value;">列数</button><br>
<input type=radio>是<input type=radio>否启动行调整<br>
<input type=radio>是<input type=radio>否启动列调整<br>
<input type=radio>是<input type=radio>否启动单元格编辑<br>
<button onclick="creategrid()">创建表格</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>
//常量[可以设置为属性]
var rgbgridbgcolor="#e1e4ec";//表格背景
var rgbfirstrowbgcolor="#6699cc";//头行背景
var rgbfirstcolbgcolor="#6699cc";//头列背景
var rgbcurrowbgcolor="#bbccdd";//当前选择行背景
var rgbcurcolbgcolor="#bbccdd";//当前选择列背景
var rgbcureditbgcolor="#ffffff";//当前选择编辑单元格背景
//表格列数
var icolcount=0;
//表格行数
var irowcount=0;
//当前选择行
var icurrowindex=0;
//当前选择列
var icurcolindex=0;
var bisdragrow=false;//行是否拖动状态
var bisdragcol=false;//列是否拖动状态
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;
//设置表格样式
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";
//设置单元格样式
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";
}
}
//设置头行样式
for(icol=0;icol<icolcount;icol++)
{
element.rows(0).cells(icol).style.backgroundcolor=rgbfirstrowbgcolor;
}
//设置头列样式
for(irow=1;irow<irowcount;irow++)
{
element.rows(irow).cells(0).style.backgroundcolor=rgbfirstcolbgcolor;
}
//设置编辑单元格
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);
}
//启动编辑单元格
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鼠标按下
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鼠标移动
function onmousemove()
{
if(bisdragrow==true)
{
//拖动行模拟层处理.
}
if(bisdragcol==true)
{
//拖动列模拟层处理.
}
}
//grid鼠标抬起
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鼠标移出
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;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();
}
//移动列
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;
}
}
//清除客户区
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>