dhDataGrid Ver2.0.0发布

针对dhDataGrid的前一版本Ver1.0.0而做的更新！

1、标题栏、左边边栏固定方式更新，取消expression方式；

2、排序方式更新，同时支持数字、字符、日期、数字字符混合、中文汉字的排序；

3、支持换肤，您可以自己定制该控件样式；

4、预留[双击]、[右键]功能；

5、支持IE、FF；

DEMO（演示）：http://www.jxxg.com/dh20156/dhdatagrid/

CSS：

/*dhdatagrid 大块样式*/
#dhdatagrid {position:relative;width:500px;height:200px;background:white;margin:0px;padding:0px;overflow:hidden;border:1px inset;-moz-user-select:none;}
/*dhdatagrid 表格全局样式*/
#dhdatagrid table {table-layout:fixed;margin:0px;}
#dhdatagrid table td {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 td .arrow {font-size:8px;color:#808080;}
#dhdatagrid table .lastdata {border-right:none;}
#dhdatagrid table .column {width:120px;cursor:default;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
#dhdatagrid table .over {width:120px;cursor:default;background:buttonface;border-top:1px solid #fff;border-right:1px solid #404040;border-bottom:1px solid #404040;border-left:1px solid #fff;}
#dhdatagrid table .sortdown {width:120px;cursor:default;background:buttonface;border-right:1px solid #ffffff;border-bottom:1px solid #ffffff;border-left:1px solid #404040;border-top:1px solid #404040;position:relative;left:1px;}
#dhdatagrid table .dataover {background:#FAFAFA;}
#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:white;}
/*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;margin:0px;padding:0px;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;text-align:center;font-size:10px;color:#A19F92;}

JS：

function dhdatagrid(){
 //author:dh20156;
 this.callname = "dhdg";
 this.width = 500;
 this.height = 200;
 this.rid = "dhdatagrid";
 this.columns = [];
 this.data = [];
 this.dblclick_fun = function(){}
 this.contextmenu_fun = function(){}
 this.parentNode = document.body;

 var dh = this;
 var framediv = null;
 var zerobj = null;
 var leftobj = null;
 var titleobj = null;
 var dataobj = null;
 var hbar = null;
 var vbar = null;
 var bgbar = null;

 //改变列宽初始位置
 var ml = 0;
 //改变列宽对象初始宽度
 var ow = 0;
 //改变列宽对象
 var tdobj = null;
 //当前选定行索引
 var nowrow = null;
 //是否更改垂直滚动条位置
 var changeposv = true;
 
 this.init = function(){
  //init the data 初始数据
  var dgc = "";
  if(this.columns.length>0){
   dgc = "<tr><td class=/"firstcolumn/">&nbsp;</td>";
   for(var cc=0;cc<this.columns.length;cc++){
    dgc += "<td class=/"column/" οnmοuseοver=/""+this.callname+".over(this);/" οnmοuseοut=/""+this.callname+".out(this);/" οnmοusemοve=/""+this.callname+".cc(event,this);/" οnmοusedοwn=/""+this.callname+".rsc_d(event,this);/" οnmοuseup=/""+this.callname+".mouseup(this);/">"+this.columns[cc]+"<span class=/"arrow/"></span></td>";
   }
   dgc += "<td class=/"lastcolumn/">&nbsp;</td></tr>";
  }

  var dgs = "";
  var dgd = "";
  if(this.data.length>0){
   //第一列
   dgs = "<tr><td>&nbsp;</td></tr>";
   for(var r=0;r<this.data.length;r++){
    dgs += "<tr><td>"+(r+1)+"</td></tr>";
    dgd += "<tr οnmοuseοver=/""+this.callname+".dataover(this);/" οnmοuseοut=/""+this.callname+".dataout(this);/"><td class=/"firstcolumn/">&nbsp;</td>";
    for(var c=0;c<this.data[r].length;c++){
     dgd += "<td οndblclick=/""+this.callname+".dblclick_fun(this);/" οncοntextmenu=/""+this.callname+".contextmenu_fun(this);/">"+this.data[r][c]+"</td>";
    }
    dgd += "<td class=/"lastdata/">&nbsp;</td></tr>";
   }
   if(dgc==""){
    dgc = "<tr><td class=/"firstcolumn/">&nbsp;</td>";
    for(var dc=0;dc<this.data[0].length;dc++){
     dgc += "<td class=/"column/" οnmοuseοver=/""+this.callname+".over(this);/" οnmοuseοut=/""+this.callname+".out(this);/" οnmοusemοve=/""+this.callname+".cc(event,this);/" οnmοusedοwn=/""+this.callname+".rsc_d(event,this);/" οnmοuseup=/""+this.callname+".mouseup(this);/">Expr"+(dc+1)+"<span class=/"arrow/"></span></td>";
    }
    dgc += "<td class=/"lastcolumn/">&nbsp;</td></tr>";
   }
  }

  //dhdatagrid frame 框架
  var dgframe = document.createElement("DIV");
  dgframe.id = this.rid;
  dgframe.onmousedown = function(e){e=e||window.event;getrow(e);}
  dgframe.onmousemove = function(e){e=e||window.event;rsc_m(e);}
  if(document.attachEvent){
   document.attachEvent("onmouseup",rsc_u);
  }else{
   document.addEventListener("mouseup",rsc_u,false);
  }
  dgframe.oncontextmenu = function(){return false}
  dgframe.onselectstart = function(){return false}
  ae(dgframe);

  //dhdatagrid zero point 零点
  var dgzero = "<div id=/"zero/"></div>"

  //dhdatagrid slidecolumn 第一列
  var dgslide = "<table cellpadding=/"0/" cellspacing=/"0/" id=/"slidecolumn/">"+dgs+"</table>";

  //dhdatagrid column 标题栏
  var dgcolumn = "<table cellpadding=/"0/" cellspacing=/"0/" id=/"titlecolumn/">"+dgc+"</table>";

  //dhdatagrid data 数据
  var dgdata = "<table cellpadding=/"0/" cellspacing=/"0/" id=/"datacolumn/">"+dgc+dgd+"</table>";

  //dhdatagrid hbar 水平滚动条
  var dghbar = document.createElement("DIV");
  dghbar.id = "hbar";
  dghbar.style.position = "absolute";
  dghbar.style.width = "100%";
  dghbar.style.height = "17px";
  dghbar.style.top = this.height-17;
  dghbar.style.overflowX = "auto";
  dghbar.style.zIndex = "10";
  dghbar.onscroll = function(){scrh();}
  dghbar.innerHTML = "<div style=/"width:100%;height:1px;overflow-y:hidden;/">&nbsp;</div>";

  //dhdatagrid vbar 垂直滚动条
  var dgvbar = document.createElement("DIV");
  dgvbar.id = "vbar";
  dgvbar.style.position = "absolute";
  dgvbar.style.width = "17px";
  dgvbar.style.height = "100%";
  dgvbar.style.left = this.width-17;
  dgvbar.style.overflowY = "auto";
  dgvbar.style.zIndex = "10";
  dgvbar.onscroll = function(){scrv();}
  dgvbar.innerHTML = "<div style=/"width:1px;height:100%;overflow-x:hidden;/">&nbsp;</div>";

  //dhdatagrid bgbar 滚动条背景
  var dgbgbar = document.createElement("DIV");
  dgbgbar.id = "bgbar";
  dgbgbar.style.background = "buttonface";
  dgbgbar.style.position = "absolute";
  dgbgbar.style.width = "100%";
  dgbgbar.style.height = "17px";
  dgbgbar.style.top = this.height-17;
  dgbgbar.style.overflowX = "auto";
  dgbgbar.style.zIndex = "9";
  dgbgbar.style.display = "none";
  dgbgbar.innerHTML = "&nbsp;";

  //appendChild
  dgframe.innerHTML = dgzero+dgslide+dgcolumn+dgdata;
  dgframe.appendChild(dghbar);
  dgframe.appendChild(dgvbar);
  dgframe.appendChild(dgbgbar);

  this.parentNode.appendChild(dgframe);

  if(document.attachEvent){
   document.attachEvent("onkeydown",updown);
  }else{
   document.addEventListener("keydown",updown,false);
  }

  framediv = dgframe;
  zerobj = document.getElementById("zero");
  leftobj = document.getElementById("slidecolumn");
  titleobj = document.getElementById("titlecolumn");
  dataobj = document.getElementById("datacolumn");
  hbar = dghbar;
  vbar = dgvbar;
  bgbar = dgbgbar;

  var btt = getCurrentStyle(framediv,"borderTopWidth");
  var btr = getCurrentStyle(framediv,"borderRightWidth");
  var btb = getCurrentStyle(framediv,"borderBottomWidth");
  var btl = getCurrentStyle(framediv,"borderLeftWidth");
  var fh = getCurrentStyle(framediv,"height");
  var zh = getCurrentStyle(zerobj,"height");
  var zbt = getCurrentStyle(zerobj,"borderTopWidth");
  var zbb = getCurrentStyle(zerobj,"borderBottomWidth");

  if(document.all){
   vbar.style.left = parseInt(vbar.style.left)-parseInt(btr)-parseInt(btl);
  }else{
   framediv.style.height = parseInt(fh)-parseInt(btb)-parseInt(btt);
   zerobj.style.height = parseInt(zh)-parseInt(zbb)-parseInt(zbt);
  }

  hbar.style.top = parseInt(hbar.style.top)-parseInt(btb)-parseInt(btt);
  bgbar.style.top = parseInt(bgbar.style.top)-parseInt(btb)-parseInt(btt);
 }
 function getCurrentStyle(oElement, sProperty) {  
  if(oElement.currentStyle){  
   return oElement.currentStyle[sProperty];  
  }else if(window.getComputedStyle){  
   sProperty = sProperty.replace(/([A-Z])/g, "-$1").toLowerCase();  
   return window.getComputedStyle(oElement, null).getPropertyValue(sProperty);  
  }else{  
   return null;  
  }  
 }
 //设置块滚动条
 this.setwh = function(){
  hbar.style.display = "block";
  vbar.style.display = "block";
  hbar.childNodes[0].style.width = dataobj.offsetWidth;
  vbar.childNodes[0].style.height = dataobj.offsetHeight;
  if(hbar.childNodes[0].offsetWidth<=hbar.offsetWidth){
   hbar.style.display = "none";
  }else{
   hbar.style.display = "block";
  }
  if(vbar.childNodes[0].offsetHeight<=vbar.offsetHeight){
   vbar.style.display = "none";
  }else{
   vbar.style.display = "block";
  }
  if(hbar.childNodes[0].offsetWidth>hbar.offsetWidth && vbar.childNodes[0].offsetHeight>vbar.offsetHeight && changeposv){
   bgbar.style.display = "block";
   hbar.style.width = hbar.offsetWidth-17;
   vbar.style.height = vbar.offsetHeight-17;
   vbar.childNodes[0].style.height = vbar.childNodes[0].offsetHeight+17;
   changeposv = false;
  }
  if(hbar.childNodes[0].offsetWidth<=hbar.offsetWidth+17 && !changeposv){
   bgbar.style.display = "none";
   hbar.childNodes[0].style.width = 0;
   hbar.style.width = hbar.offsetWidth+17;
   vbar.style.height = vbar.offsetHeight+17;
   changeposv = true;
   if(vbar.offsetHeight-dataobj.offsetHeight>dataobj.offsetTop && document.all){
    leftobj.style.top = leftobj.offsetTop+17;
    dataobj.style.top = dataobj.offsetTop+17;
   }
  }
 }

 //鼠标滚轮，列表滚动事件
 function mwEvent(e){
  e=e||window.event;
  if(e.wheelDelta<=0 || e.detail>0){
   vbar.scrollTop += 18;
  }else {
   vbar.scrollTop -= 18;
  }
 }
 function ae(obj){
  if(document.attachEvent){
   obj.attachEvent("onmousewheel",mwEvent);
  }else{
   obj.addEventListener("DOMMouseScroll",mwEvent,false);
  }
 }

 //滚动条事件
 function scrv(){
  leftobj.style.top = -(vbar.scrollTop);
  dataobj.style.top = -(vbar.scrollTop);
 }

 function scrh(){
  titleobj.style.left = -(hbar.scrollLeft);
  dataobj.style.left = -(hbar.scrollLeft);
 }

 //选择行
 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){
    if(nowrow!=null){
     dataobj.rows[nowrow].className = "";
    }
    dataobj.rows[eprowindex].className = "selectedrow";
    nowrow = eprowindex;
   }
  }
 }

 //更改列宽
 this.rsc_d = function(e,obj){
  var px = document.all?e.offsetX:e.layerX-obj.offsetLeft;
  if(px>obj.offsetWidth-6 && px<obj.offsetWidth){
   e=e||window.event;
   obj=obj||this;
   ml = e.clientX;
   ow = obj.offsetWidth;
   tdobj = obj;
   if(obj.setCapture){
    obj.setCapture();
   }else{
    e.preventDefault();
   }
  }else{
   if(nowrow!=null){
    dataobj.rows[nowrow].className = "";
   }
   if(obj.getAttribute("sort")==null){
    obj.setAttribute("sort",0);
   }
   var sort = obj.getAttribute("sort");
   if(sort==1){
    dgsort(obj,true);
    obj.setAttribute("sort",0);
   }else{
    dgsort(obj,false);
    obj.setAttribute("sort",1);
   }
   obj.className = "sortdown";
  }
 }
 this.mouseup = function(obj){
  obj.className = "over";
 }
 function rsc_m(e){
  if(tdobj!=null){
   e=e||window.event;
   var newwidth = ow-(ml-e.clientX);
   if(newwidth>5){
    tdobj.style.width = newwidth;
    dataobj.rows[0].cells[tdobj.cellIndex].style.width = newwidth;
   }else{
    tdobj.style.width = 5;
    dataobj.rows[0].cells[tdobj.cellIndex].style.width = 5;
   }
   dh.setwh();
   scrh();
  }
 }
 function rsc_u(e){
  if(tdobj!=null){
   e=e||window.event;
   var newwidth = ow-(ml-e.clientX);
   if(newwidth>5){
    tdobj.style.width = newwidth;
    dataobj.rows[0].cells[tdobj.cellIndex].style.width = newwidth;
   }else{
    tdobj.style.width = 5;
    dataobj.rows[0].cells[tdobj.cellIndex].style.width = 5;
   }
   if(tdobj.releaseCapture){
    tdobj.releaseCapture();
   }
   ml = 0;
   ow = 0;
   tdobj = null;
  }
  dh.setwh();
  scrh();
 }

 this.cc = function(e,obj){
  var px = document.all?e.offsetX:e.layerX-obj.offsetLeft;
  if(px>obj.offsetWidth-6 && px<obj.offsetWidth){
   obj.style.cursor = "col-resize";
  }else{
   obj.style.cursor = "default";
  }
 }

 this.over = function(obj){
  obj.className = "over";
 }

 this.out = function(obj){
  obj.className = "column";
 }

 this.dataover = function(obj){
  if(obj.rowIndex!=nowrow){
   obj.className = "dataover";
  }
 }

 this.dataout = function(obj){
  if(obj.rowIndex!=nowrow){
   obj.className = "";
  }
 }

 //键盘Up & Down事件
 function updown(e){
  e=e || window.event; e=e.which || e.keyCode;
  var rl = dh.data.length;
  switch(e){
   case 38://Up;
    if(nowrow!=null && nowrow>1){
     vbar.scrollTop -= 18;
     dataobj.rows[nowrow].className = "";
     nowrow -= 1;
     dataobj.rows[nowrow].className = "selectedrow";
    };
    break;
   case 40://Down;
    if(nowrow!=null && nowrow<rl){
     vbar.scrollTop += 18;
     dataobj.rows[nowrow].className = "";
     nowrow += 1;
     dataobj.rows[nowrow].className = "selectedrow";
    };
    break;
   default:break;
  }
 }

 function dti(s){
  var n = 0;
  var a = s.match(//d+/g);
  for(var i=0;i<a.length;i++){
   if(a[i].length<2){
    a[i] = "0"+a[i];
   }
  }
  n = a.join("");
  return n;
 }

 //排序
 function dgsort(obj,asc){
  var rl = dh.data.length;
  var ci = obj.cellIndex;
  var rowsobj = [];
  for(var i=1;i<dataobj.childNodes[0].rows.length;i++){
   rowsobj[i-1] = dataobj.childNodes[0].rows[i];
  }
  rowsobj.sort(function(trObj1,trObj2){
    if(!isNaN(trObj1.cells[ci].innerHTML.charAt(0)) && !isNaN(trObj2.cells[ci].innerHTML.charAt(0))){
     if(asc){
      return dti(trObj1.cells[ci].innerHTML)-dti(trObj2.cells[ci].innerHTML);
     }else{
      return dti(trObj2.cells[ci].innerHTML)-dti(trObj1.cells[ci].innerHTML);
     }
    }else{
     if(asc){
      return trObj1.cells[ci].innerHTML.localeCompare(trObj2.cells[ci].innerHTML);
     }else{
      return trObj2.cells[ci].innerHTML.localeCompare(trObj1.cells[ci].innerHTML);
     }
    }
   });
  for(var i=0;i<rowsobj.length;i++){
   dataobj.childNodes[0].appendChild(rowsobj[i]);
  }
  for(var c=1;c<obj.parentNode.cells.length-1;c++){
   obj.parentNode.cells[c].childNodes[1].innerHTML = "";
  }
  if(asc){
   obj.childNodes[1].innerHTML = "▲";
  }else{
   obj.childNodes[1].innerHTML = "▼";
  }
 }
}

 

引用：

<html>
<head>
<meta http-equiv="content-type" content="type=text/html; charset=gb2312">
<link type="text/css" rel="stylesheet" href="default/dhdatagrid.css">
<script language="javascript" src="dhdatagrid.js"></script>
</head>
<body style="background:#ECE9D8;">
<script language="javascript">
var dhdg = new dhdatagrid();
dhdg.callname = "dhdg";
dhdg.columns = ["名称","大小","修改时间"];
dhdg.data = [["01.jpg","49 KB","2006-12-6 17:06"],["02.gif","3 KB","2006-12-6 17:06"],["axjz.jpg","121 KB","2007-1-19 10:19"],["bb.jpg","314 KB","2006-10-24 15:49"],["cd056.jpg","50 KB","2007-1-5 10:03"],["d.psd","27,639 KB","2006-11-6 13:31"],["dhAJ2.htm","12 KB","2006-12-21 10:53"],["dhChange.htm","12 KB","2006-10-19 9:28"],["dhcombobox.htm","2 KB","2006-12-22 11:39"],["保险.txt","5 KB","2007-1-3 11:31"],["滨江丽景.rar","1,048 KB","2007-1-18 14:23"],["积分兑奖.doc","634 KB","2007-1-19 11:17"],["亲人.jpg","396 KB","2006-12-23 15:50"],["未标题-2.jpg","61 KB","2006-12-23 15:46"]];
dhdg.dblclick_fun = function(e){alert(e+',ondblclick');}
dhdg.contextmenu_fun = function(e){alert(e+',oncontextmenu');}
dhdg.init();
dhdg.setwh();
</script>
</body>
</html>

DEMO（演示）：http://www.jxxg.com/dh20156/dhdatagrid/