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

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>

时间： 2024-09-30 23:27:52

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

功能强大的 C++ redis 客户端库增加至 acl 项目中

虽然 redis 开发库已有不少,但 C/C++ 的客户端库好用的并不多,虽然官方也提供了 C 版的客户端库,但易用性较差,而且不支持连接池功能,相对于 C/C++ 的库,JAVA 版的 jedis 要好用的多,jedis 提供了 redis 库的全命令实现,而 C/C++ 则只提供了协议级实现,使用者需要了解命令发送的格式,而且还得判断分析所接收数据的格式,使用起来非常繁琐,acl 库(跨平台网络通信与服务器框架)的作者在使用 C/C++ 版的 redis 库时也屡受摧残,于是其基于 acl

Photoshop中图层样式的高级混合功能

  图层样式是photoshop中一个非常重要的一个功能,在UI设计中经常会运用到其中的投影,内阴影和描边等功能为图层添加效果,不过很多时候都不会有人留意到图层样式的第一选项.混合选项:默认         注:更多精彩教程请关注三联photoshop教程栏目,三联PS群:339853166欢迎你的加入 分类: PS入门教程

功能强大的CGI语言

  在互连网络高速发展的今天,WEB的后台开发已日益成为开发的焦点:激烈地商业竞争,也促使人们对WEB后台程序有了更高的要求.本文将向您介绍一种新型的CGI程序编写语言PHP3,它简单易学,拥有众多的优秀特性,可让您方便快捷地编写出功能强大,运行速度快,并可同时运行于WINDOWS,UNIX,LINUX平台的WEB后台程序,特别值得一提的是,任何人在遵守GNU条约的情况下,均可免费使用并更改其源码!       现有WEB后台程序,决大多数采用下列几种技术编写:PERL,C通用CGI语言直接编写

.NET开发邮件发送功能的全面教程(含邮件组件源码)

原文 http://www.cnblogs.com/heyuquan/p/net-batch-mail-send-async.html    今天,给大家分享的是如何在.NET平台中开发"邮件发送"功能.在网上搜的到的各种资料一般都介绍的比较简单,那今天我想比较细的整理介绍下: 1)         邮件基础理论知识 2)         邮件发送相关.NET类库 3)         介绍我开发的一个发送邮件的小组件(MailHelper) 4)         MailHelper

link中如何实现双表对查功能，如果使用listbox和combox可以做？

问题描述 link中如何实现双表对查功能,如果使用listbox和combox可以做? link中如何实现双表对查功能,如果使用listbox和combox可以做? 解决方案 listbox.Items.Cast<String()>.Where(x => x == comboBox.SelectedItem.Text);

你会做Web上的用户登录功能吗？

  Web上的用户登录功能应该是最基本的功能了,可是在我看过一些站点的用户登录功能后,我觉得很有必要写一篇文章教大家怎么来做用户登录功能.下面的文章告诉大家这个功能可能并没有你所想像的那么简单,这是一个关系到用户安全的功能,希望大家能从下面的文章中能知道什么样的方法才是一个好的用户登录功能.以下内容,转载时请保持原文一致,并请注明作者和出处 . 用户名和口令 首先,我们先来说说用户名和口令的事.这并不是本站第一次谈论这个事了.如何管理自己的口令让你知道怎么管理自己的口令,破解你的口令让你知道在现

介绍10个功能强大的开源Web流量分析工具

&http://www.aliyun.com/zixun/aggregation/37954.html">nbsp;   最近在伦敦举行的世界旅游博览会上(World Travel Market),旅游行业的专家们齐聚一堂,对网站流量分析(Web analytics)和看似微不足道的网站观察和调整对业务产生的巨大影响进行了讨论. EXpedia商务发展部总监Cameron JonES,强调了网站的快速反应对业务的重要性:"在2006年,人们愿意花4秒钟等待网页打开.现在他

Plupload功能强大的多文件批量上传插件

Plupload 是一个Web浏览器上的界面友好的文件上传模块,可显示上传进度.图像自动缩略和上传分块.可同时上传多个文件,为您的内容管理系统或是类似上传程序提供一个高度可用的上传插件. Plupload功能强大的多文件批量上传插件 Plupload这个JavaScript控件可以让你选择Adobe Flash.Google Gears.HTML5.Microsoft Silverlight.Yahoo BrowserPlus或正常表单Form等多种方法进行文件上传. Plupload还提供其它

功能强大的php文件上传类_php技巧

本文实例为大家分享了php文件上传类,功能很强大,供大家参考,具体内容如下 <?PHP /* *文件上传类 **/ class upfile{ private $file_size;//上传源文件大小 private $file_tem;//上传文件临时储存名 private $file_name;//上传文件名 private $file_type;//上传文件类型 private $file_max_size=2000000;//允许文件上传最大 private $file_folder=&qu