分享
 
 
 

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

王朝java/jsp·作者佚名  2006-01-09
窄屏简体版  字體: |||超大  

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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有