Java

本类阅读TOP10

·使用MyEclipse开发Struts框架的Hello World!(录像1)
·hibernate配置笔记
·AOP编程入门--Java篇
·linux下Tomcat 5.0.20 与 Apache 2 安装/集成/配置
·在win2003下整合了整合Tomcat5.5+ apache_2.0.53+ mod_jk_2.0.47.dll
·构建Linux下IDE环境--Eclipse篇
·Jsp 连接 mySQL、Oracle 数据库备忘(Windows平台)
·ASP、JSP、PHP 三种技术比较
·Tomcat5.5.9的安装配置
·AWT GUI 设计笔记(二)

分类导航
VC语言Delphi
VB语言ASP
PerlJava
Script数据库
其他语言游戏开发
文件格式网站制作
软件工程.NET开发
Web上功能强大的DbGrid表格HTC组件[只需在Table中指定样式就可以完成多种功能可扩展]

作者:未知 来源:月光软件站 加入时间:2005-2-28 月光软件站

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('已实现功能')">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>

Grid.htc

<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>




相关文章

相关软件