针对dhdatagrid的前一版本ver1.0.0而做的更新！
1、标题栏、左边边栏固定方式更新，取消expression方式；
2、排序方式更新，同时支持数字、字符、日期、数字字符混合、中文汉字的排序；
3、支持换肤，您可以自己定制该控件样式；
4、预留[双击]、[右键]功能；
5、支持ie、ff；
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 = 
  ;
  for(var cc=0;cc   dgc += +this.columns[cc]+ ;
  }
  dgc +=  
;
 }
var dgs = ;
 var dgd = ;
 if(this.data.length>0){
  //第一列
  dgs =  
;
  for(var r=0;r   dgs += +(r+1)+
;
   dgd +=   ;
   for(var c=0;c    dgd += +this.data[r][c]+ ;
   }
   dgd +=  
;
  }
  if(dgc==){
   dgc =   ;
   for(var dc=0;dc    dgc += expr+(dc+1)+ ;
   }
   dgc +=  
;
  }
 }
//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 =
//dhdatagrid slidecolumn 第一列
 var dgslide = +dgs+
;
//dhdatagrid column 标题栏
 var dgcolumn = +dgc+
;
//dhdatagrid data 数据
 var dgdata = +dgc+dgd+
;
//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 =  
;
//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 =  
;
//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 =  ;
//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.style.display = none;
 }else{
  hbar.style.display = block;
 }
 if(vbar.childnodes[0].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  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.wheeldelta0){
  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  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.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    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  if(a[i].length   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  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  dataobj.childnodes[0].appendchild(rowsobj[i]);
 }
 for(var c=1;c  obj.parentnode.cells[c].childnodes[1].innerhtml = ;
 }
 if(asc){
  obj.childnodes[1].innerhtml = ▲;
 }else{
  obj.childnodes[1].innerhtml = ▼;
 }
}
}
注： demo（演示）：http://www.jxxg.com/dh20156/dhdatagrid/
原文：http://blog.csdn.net/dh20156/archive/2007/02/08/1505050.aspx
另外一个封装的很简单的grid by 秦皇也爱js