Web上功能强大的DbGrid表格HTC组件[只需在Table中指定样式就可以完成多种功能可扩展]
字体：[ ] 类型：转载 时间：
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.} if(defineFirstRowBgColorID.style.color) {vTable.defineFirstRowBgColor=defineFirstRowBgColorID.style.} if(defineFirstColBgColorID.style.color) {vTable.defineFirstColBgColor=defineFirstColBgColorID.style.} if(defineCurRowBgColorID.style.color) {vTable.defineCurRowBgColor=defineCurRowBgColorID.style.} if(defineCurColBgColorID.style.color) {vTable.defineCurColBgColor=defineCurColBgColorID.style.} if(defineCurEditBgColorID.style.color) {vTable.defineCurEditBgColor=defineCurEditBgColorID.style.} for(mIndex=0;mIndex&iGridRowCmIndex++) { var vTr=vTable.insertRow(mIndex); for(nIndex=0;nIndex&iGridColCnIndex++) { vTd=vTr.insertCell(nIndex); vTd.innerText="行"+mIndex+"列"+nI } } 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 strC } &/script& &div id="DivID"&&/div& &object id="DlgHelper" classid="clsid:b5-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."&行数&/button&&br& &input type=text value="" id="defineGridColCount"&&button onclick="iGridColCount=defineGridColCount."&列数&/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=//行是否拖动状态 var bIsDragCol=//列是否拖动状态 var iDragHistoryRowIndex=0;//拖动前原始行位置索引 var iDragCurrentRowIndex=0;//拖动后目的行位置索引 var iDragHistoryColIndex=0;//拖动前原始列位置索引 var iDragCurrentColIndex=0;//拖动后目的列位置索引 function initGrid() { //属性获取 if(defineGridBgColor) {rgbGridBgColor=defineGridBgC}else{rgbGridBgColor="#E1E4EC";} if(defineFirstRowBgColor) {rgbFirstRowBgColor=defineFirstRowBgC}else{rgbFirstRowBgColor="#6699CC";} if(defineFirstColBgColor) {rgbFirstColBgColor=defineFirstColBgC}else{rgbFirstColBgColor="#6699CC";} if(defineCurRowBgColor) {rgbCurRowBgColor=defineCurRowBgC}else{rgbCurRowBgColor="#BBCCDD";} if(defineCurColBgColor) {rgbCurColBgColor=defineCurColBgC}else{rgbCurColBgColor="#BBCCDD";} if(defineCurEditBgColor) {rgbCurEditBgColor=defineCurEditBgC}else{rgbCurEditBgColor="#FFFFFF";} //初始化常量 iColCount=element.rows(0).cells. iRowCount=element.rows. //设置表格样式 element.style.backgroundColor=rgbGridBgC 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&iRowCiRow++) { for(iCol=0;iCol&iColCiCol++) { element.rows(iRow).cells(iCol).style.borderTop="1px solid #000000"; element.rows(iRow).cells(iCol).style.borderRight="1px solid #000000"; } } //设置头行样式 for(iCol=0;iCol&iColCiCol++) { element.rows(0).cells(iCol).style.backgroundColor=rgbFirstRowBgC } //设置头列样式 for(iRow=1;iRow&iRowCiRow++) { element.rows(iRow).cells(0).style.backgroundColor=rgbFirstColBgC } //设置编辑单元格 for(mIndex=1;mIndex&iRowCmIndex++) { for(nIndex=1;nIndex&iColCnIndex++) { 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&iColCiCol++) { element.rows(0).cells(iCol).attachEvent("onmouseup",onColHeaderMouseDown); } //绑定行事件 for(iRow=1;iRow&iRowCiRow++) { 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.cellI onColHeaderMouseDownColor(iCurColIndex); } //按下行 function onRowHeaderMouseDown() { iCurRowIndex=window.event.srcElement.parentElement.rowI onRowHeaderMouseDownColor(iCurRowIndex); } //启动编辑单元格 function onEditTrue() { var vEditObject=window.event.srcE vEditObject.contentEditable= vEditObject.runtimeStyle.backgroundColor=rgbCurEditBgC } //禁止编辑单元格 function onEditFalse() { var vEditObject=window.event.srcE vEditObject.contentEditable= vEditObject.runtimeStyle.backgroundColor="transparent"; } //Grid鼠标按下 function onMouseDown() { if(window.event.srcElement.tagName.toUpperCase()=="TD") { if(window.event.srcElement.cellIndex==0) { bIsDragRow= iDragHistoryRowIndex=window.event.srcElement.parentElement.rowI } if(window.event.srcElement.parentElement.rowIndex==0) { bIsDragCol= iDragHistoryColIndex=window.event.srcElement.cellI } } } //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.rowI 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.cellI if(iDragHistoryColIndex!=0&&iDragCurrentColIndex!=0) { moveCol(iDragHistoryColIndex,iDragCurrentColIndex); } } } } bIsDragRow= bIsDragCol= } //Grid鼠标移出 function onMouseOut() { if(bIsDragRow==true) { bIsDragRow= } if(bIsDragCol==true) { bIsDragCol= } } //Grid选择开始 function onSelectStart() {
} //库 //移动行 function moveRow(iFromIndex,iToIndex) { var strFromArray=new Array(iColCount); var strToArray=new Array(iColCount); for(mIndex=0;mIndex&iColCmIndex++) { strFromArray[mIndex]=element.rows(iFromIndex).cells(mIndex).innerHTML; strToArray[mIndex]=element.rows(iToIndex).cells(mIndex).innerHTML; } for(nIndex=0;nIndex&iColCnIndex++) { 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&iRowCmIndex++) { strFromArray[mIndex]=element.rows(mIndex).cells(iFromIndex).innerHTML; strToArray[mIndex]=element.rows(mIndex).cells(iToIndex).innerHTML; } for(nIndex=0;nIndex&iRowCnIndex++) { 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&iColCkIndex++) { element.rows(pCurRowIndex).cells(kIndex).bgColor=rgbCurRowBgC } } //列按下变化 function onColHeaderMouseDownColor(pCurColIndex) { clearClient(); for(kIndex=1;kIndex&iRowCkIndex++) { element.rows(kIndex).cells(pCurColIndex).bgColor=rgbCurColBgC } } //清除客户区 function clearClient() { for(mIndex=1;mIndex&iRowCmIndex++) { for(nIndex=1;nIndex&iColCnIndex++) { element.rows(mIndex).cells(nIndex).bgColor="transparent"; } } } //单元格事件绑定 function cellAttachEvent() { for(mIndex=1;mIndex&iRowCmIndex++) { for(nIndex=1;nIndex&iColCnIndex++) { element.rows(mIndex).cells(nIndex).children[0].attachEvent("onclick",onEditTrue); element.rows(mIndex).cells(nIndex).children[0].attachEvent("onblur",onEditFalse); } } } &/script&
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具本帖子已过去太久远了，不再提供回复功能。示例源码 ATGrid报表控件/WEB插件 ETCell报表控件/WEB插件 WEB报表控件打印 WinTable报表设计器
在线支持：
示例源码分类
报表显现式样(更多示例下载安装后的帮助文档中存在)
1、在线演示网址一览表
(1)ATGrid报表控件的在线演示示例
(2)ooReport网上直报平台利用ATGrid控件的展现效果演示
2、财务进销存报表实例：ETSet数据集可以自动向下扩展
3、工作流报表，并且带有图片签章功能：
4、分组报表式样，带有小计和总计：
5、交叉报表式样，可以进行多维数据进行交叉显示：
6、ATGrid控件对条形码单元格类型支持展现和打印：
7、ATGrid控件对发票展现的支持和打印,包括套打：
8、ATGrid控件支持RTF单元格类型，一个单元格中可以有多种字体，并且可以带有表格：
ATGrid报表控件支持的RTF富文本类型示例（插件显示）
9、ATGrid报表控件支持的单元格类型
ATGrid报表控件支持的单元格类型（插件显示）
10、ATGrid报表控件支持的层对象示例
ATGrid报表控件支持的层对象（插件显示）
11、图表功能请参看在线演示效果：
ATGrid控件作为ETChart图表控件展示,柱状图、饼图、折线图.....
本例子是实是数据，具有合计和统计功能！ 报表和图表的数据随着时钟变化，时时变化的例子：
新增加多条曲线拟合到一个图表显示的功能请参看下面的电力系统实时监测的演示本帖子已过去太久远了，不再提供回复功能。