最新dhdatagrid原型

最新推荐文章于 2022-04-10 11:08:50 发布

dh20156

最新推荐文章于 2022-04-10 11:08:50 发布

阅读量1.1k

点赞数

分类专栏：技术文档文章标签： class function table null div javascript

本文链接：https://blog.csdn.net/dh20156/article/details/1505036

版权

技术文档专栏收录该内容

57 篇文章 0 订阅

订阅专栏

<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");

//选择行
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>