针对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/"> </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/"> </td></tr>"; }
var dgs = ""; var dgd = ""; if(this.data.length>0){ //第一列 dgs = "<tr><td> </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/"> </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/"> </td></tr>"; } if(dgc==""){ dgc = "<tr><td class=/"firstcolumn/"> </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/"> </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;/"> </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;/"> </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 = " ";
//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/
