<html><head><meta http-equiv="content-type" content="type=text/html; charset=gb2312"><style type="text/css">/*dhdatagrid 大块样式*/#dhdatagrid {position:relative;width:500px;height:200px;padding:0px;overflow:hidden;border:2px inset;}/*dhdatagrid 表格全局样式*/#dhdatagrid table {table-layout:fixed;margin:0px;}#dhdatagrid table td {height:18px;line-height:18px;cursor:default;font-size:12px;font-family:verdana;overflow:hidden;white-space:nowrap;text-indent:2px;border-right:1px solid buttonface;border-bottom:1px solid buttonface;}#dhdatagrid table .lastdata {border-right:none;}#dhdatagrid table .column {width:100px;cursor:e-resize;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}#dhdatagrid table .firstcolumn {width:30px;text-indent:0px;text-align:center;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}#dhdatagrid table .lastcolumn {background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}/*dhdatagrid 选定行样式*/#dhdatagrid table .selectedrow {background:highlight;color:highlighttext;}/*dhdatagrid 表头样式*/#dhdatagrid #titlecolumn {width:100%;position:absolute;top:0px;left:0px;z-index:3;}/*dhdatagrid 左边栏样式*/#dhdatagrid #slidecolumn {width:30px;position:absolute;top:0px;left:0px;z-index:2;}#dhdatagrid #slidecolumn td {width:30px;text-indent:0px;text-align:center;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}/*dhdatagrid 内容表体样式*/#dhdatagrid #datacolumn {width:100%;position:absolute;top:0px;left:0px;}/*dhdatagrid 原点样式*/#dhdatagrid #zero {width:30px;height:18px;font-size:12px;position:absolute;top:0px;left:0px;z-index:10;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}</style><script language="javascript">//改变列宽初始位置var ml = 0;//改变列宽对象初始宽度var ow = 0;//改变列宽对象var tdobj = null;//当前选定行索引var nowrow = null;//是否更改垂直滚动条位置var changeposv = true;
//鼠标滚轮，列表滚动事件function mwEvent(e){ e=e||window.event; if(e.wheelDelta<=0 || e.detail>0){ //document.getElementById("vbar").doScroll("down"); document.getElementById("vbar").scrollTop += 18; }else { //document.getElementById("vbar").doScroll("up"); document.getElementById("vbar").scrollTop -= 18; }}function ae(){ var obj = document.getElementById("dhdatagrid"); if(document.attachEvent){ obj.attachEvent("onmousewheel",mwEvent); }else{ obj.addEventListener("DOMMouseScroll",mwEvent,false); }}
function scrv(obj){ var leftobj = document.getElementById("slidecolumn"); var dataobj = document.getElementById("datacolumn"); leftobj.style.top = -(obj.scrollTop); dataobj.style.top = -(obj.scrollTop);}function scrh(obj){ var titleobj = document.getElementById("titlecolumn"); var dataobj = document.getElementById("datacolumn"); titleobj.style.left = -(obj.scrollLeft); dataobj.style.left = -(obj.scrollLeft);}
//更改列宽function rsc_d(e,obj){ e=e||window.event; obj=obj||this; ml = e.clientX; ow = obj.offsetWidth; tdobj = obj; if(obj.setCapture){ obj.setCapture(); }else{ e.preventDefault(); }}function rsc_m(e){ if(tdobj!=null){ e=e||window.event; var newwidth = ow-(ml-e.clientX); if(newwidth>5){ tdobj.style.width = newwidth; document.getElementById("datacolumn").rows[0].cells[tdobj.cellIndex].style.width = newwidth; }else{ tdobj.style.width = 5; document.getElementById("datacolumn").rows[0].cells[tdobj.cellIndex].style.width = 5; } setwh(); }}function rsc_u(e){ if(tdobj!=null){ e=e||window.event; var newwidth = ow-(ml-e.clientX); if(newwidth>5){ tdobj.style.width = newwidth; document.getElementById("datacolumn").rows[0].cells[tdobj.cellIndex].style.width = newwidth; }else{ tdobj.style.width = 5; document.getElementById("datacolumn").rows[0].cells[tdobj.cellIndex].style.width = 5; } if(tdobj.releaseCapture){ tdobj.releaseCapture(); } ml = 0; ow = 0; tdobj = null; } setwh();}
//设置块滚动条function setwh(){ var hbarobj = document.getElementById("hbar"); var vbarobj = document.getElementById("vbar"); var bgbarobj = document.getElementById("bgbar");
var dataobj = document.getElementById("datacolumn"); hbarobj.style.display = "block"; vbarobj.style.display = "block"; hbarobj.childNodes[0].style.width = dataobj.offsetWidth; vbarobj.childNodes[0].style.height = dataobj.offsetHeight; if(hbarobj.childNodes[0].offsetWidth<=hbarobj.offsetWidth){ hbarobj.style.display = "none"; }else{ hbarobj.style.display = "block"; } if(vbarobj.childNodes[0].offsetHeight<=vbarobj.offsetHeight){ vbarobj.style.display = "none"; }else{ vbarobj.style.display = "block"; } if(hbarobj.childNodes[0].offsetWidth>hbarobj.offsetWidth && vbarobj.childNodes[0].offsetHeight>vbarobj.offsetHeight && changeposv){ bgbarobj.style.display = "block"; hbarobj.style.width = hbarobj.offsetWidth-17; vbarobj.style.height = vbarobj.offsetHeight-17; vbarobj.childNodes[0].style.height = vbarobj.childNodes[0].offsetHeight+17; changeposv = false; } if(hbarobj.childNodes[0].offsetWidth<=hbarobj.offsetWidth+17 && !changeposv){ bgbarobj.style.display = "none"; hbarobj.childNodes[0].style.width = 0; hbarobj.style.width = hbarobj.offsetWidth+17; vbarobj.style.height = vbarobj.offsetHeight+17; changeposv = true; if(vbarobj.offsetHeight-dataobj.offsetHeight>dataobj.offsetTop && document.all){ var leftobj = document.getElementById("slidecolumn"); leftobj.style.top = leftobj.offsetTop+17; dataobj.style.top = dataobj.offsetTop+17; } }}
//选择行function getrow(e){ e=e||window.event; var esrcobj = e.srcElement?e.srcElement:e.target; if(esrcobj.parentNode.tagName=="TR"){ var epobj = esrcobj.parentNode; var eprowindex = epobj.rowIndex; if(eprowindex!=0){ var dataobj = document.getElementById("datacolumn"); if(nowrow!=null){ dataobj.rows[nowrow].className = ""; } dataobj.rows[eprowindex].className = "selectedrow"; nowrow = eprowindex; } }}</script></head><body οnlοad="setwh();ae();"><div id="dhdatagrid" οnmοusemοve="rsc_m(event);" οnmοuseup="rsc_u(event);" οnclick="getrow(event);"><div id="zero"> </div><table cellpadding="0" cellspacing="0" id="slidecolumn"><tr><td> </td></tr><tr><td>1</td></tr><tr><td>2</td></tr><tr><td>3</td></tr><tr><td>4</td></tr><tr><td>5</td></tr><tr><td>6</td></tr><tr><td>7</td></tr><tr><td>8</td></tr><tr><td>9</td></tr><tr><td>10</td></tr><tr><td>11</td></tr><tr><td>12</td></tr><tr><td>100</td></tr></table><table cellpadding="0" cellspacing="0" id="titlecolumn"><tr> <td class="firstcolumn"> </td> <td class="column" οnmοusedοwn="rsc_d(event,this);">文件名</td> <td class="column" οnmοusedοwn="rsc_d(event,this);">大小</td> <td class="column" οnmοusedοwn="rsc_d(event,this);">类型</td> <td class="column" οnmοusedοwn="rsc_d(event,this);">修改日期</td> <td class="lastcolumn"> </td></tr></table><table cellpadding="0" cellspacing="0" id="datacolumn"><tr> <td class="firstcolumn"> </td> <td class="column">文件名</td> <td class="column">大小</td> <td class="column">类型</td> <td class="column">修改日期</td> <td class="lastcolumn"> </td></tr><tr> <td class="firstcolumn"> </td> <td>StartfirstCol</td> <td>bbsecondCol</td> <td>ccthirdCol</td> <td>ddfourthCol</td> <td class="lastdata"> </td></tr><tr> <td class="firstcolumn"> </td> <td>aafirstCol</td> <td>bbsecondCol</td> <td>ccthirdCol</td> <td>ddfourthCol</td> <td class="lastdata"> </td></tr><tr> <td class="firstcolumn"> </td> <td>aafirstCol</td> <td>bbsecondCol</td> <td>ccthirdCol</td> <td>ddfourthCol</td> <td class="lastdata"> </td></tr><tr> <td class="firstcolumn"> </td> <td>aafirstCol</td> <td>bbsecondCol</td> <td>ccthirdCol</td> <td>ddfourthCol</td> <td class="lastdata"> </td></tr><tr> <td class="firstcolumn"> </td> <td>aafirstCol</td> <td>bbsecondCol</td> <td>ccthirdCol</td> <td>ddfourthCol</td> <td class="lastdata"> </td></tr><tr> <td class="firstcolumn"> </td> <td>aafirstCol</td> <td>bbsecondCol</td> <td>ccthirdCol</td> <td>ddfourthCol</td> <td class="lastdata"> </td></tr><tr> <td class="firstcolumn"> </td> <td>aafirstCol</td> <td>bbsecondCol</td> <td>ccthirdCol</td> <td>ddfourthCol</td> <td class="lastdata"> </td></tr><tr> <td class="firstcolumn"> </td> <td>aafirstCol</td> <td>bbsecondCol</td> <td>ccthirdCol</td> <td>ddfourthCol</td> <td class="lastdata"> </td></tr><tr> <td class="firstcolumn"> </td> <td>aafirstCol</td> <td>bbsecondCol</td> <td>ccthirdCol</td> <td>ddfourthCol</td> <td class="lastdata"> </td></tr><tr> <td class="firstcolumn"> </td> <td>aafirstCol</td> <td>bbsecondCol</td> <td>ccthirdCol</td> <td>ddfourthCol</td> <td class="lastdata"> </td></tr><tr> <td class="firstcolumn"> </td> <td>aafirstCol</td> <td>bbsecondCol</td> <td>ccthirdCol</td> <td>ddfourthCol</td> <td class="lastdata"> </td></tr><tr> <td class="firstcolumn"> </td> <td>aafirstCol</td> <td>bbsecondCol</td> <td>ccthirdCol</td> <td>ddfourthCol</td> <td class="lastdata"> </td></tr><tr> <td class="firstcolumn"> </td> <td>EndfirstCol</td> <td>bbsecondCol</td> <td>ccthirdCol</td> <td>ddfourthCol</td> <td class="lastdata"> </td></tr></table><div id="hbar" style="position:absolute;top:183px!important;top:178px;width:100%;height:17px;overflow-x:auto;z-index:10;" οnscrοll="scrh(this);"><div style="width:100%;"> </div></div><div id="vbar" style="position:absolute;left:483px!important;left:472px;height:100%;width:17px;overflow-y:auto;z-index:10;" οnscrοll="scrv(this);"><div style="height:100%;"> </div></div><div id="bgbar" style="position:absolute;top:183px!important;top:179px;width:100%;height:17px;background:buttonface;overflow:hidden;z-index:9;display:none;"> </div></div></body></html>
