javascript之dhDataGrid Ver2.0.0代码

//dhdatagridbgbar滚动条背景
vardgbgbar=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;

varbtt=getCurrentStyle(framediv,"borderTopWidth");
varbtr=getCurrentStyle(framediv,"borderRightWidth");
varbtb=getCurrentStyle(framediv,"borderBottomWidth");
varbtl=getCurrentStyle(framediv,"borderLeftWidth");
varfh=getCurrentStyle(framediv,"height");
varzh=getCurrentStyle(zerobj,"height");
varzbt=getCurrentStyle(zerobj,"borderTopWidth");
varzbb=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);
}
functiongetCurrentStyle(oElement,sProperty){
if(oElement.currentStyle){
returnoElement.currentStyle[sProperty];
}elseif(window.getComputedStyle){
sProperty=sProperty.replace(/([A-Z])/g,"-$1").toLowerCase();
returnwindow.getComputedStyle(oElement,null).getPropertyValue(sProperty);
}else{
returnnull;
}
}
//设置块滚动条
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;
}
}
}

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

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

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

//选择行
functiongetrow(e){
e=e||window.event;
varesrcobj=e.srcElement?e.srcElement:e.target;
if(esrcobj.parentNode.tagName=="TR"){
varepobj=esrcobj.parentNode;
vareprowindex=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){
varpx=document.all?e.offsetX:e.layerX-obj.offsetLeft;
if(px>obj.offsetWidth-6&&pxe=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);
}
varsort=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";
}
functionrsc_m(e){
if(tdobj!=null){
e=e||window.event;
varnewwidth=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();
}
}
functionrsc_u(e){
if(tdobj!=null){
e=e||window.event;
varnewwidth=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){
varpx=document.all?e.offsetX:e.layerX-obj.offsetLeft;
if(px>obj.offsetWidth-6&&pxobj.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事件
functionupdown(e){
e=e||window.event;e=e.which||e.keyCode;
varrl=dh.data.length;
switch(e){
case38://Up;
if(nowrow!=null&&nowrow>1){
vbar.scrollTop-=18;
dataobj.rows[nowrow].className="";
nowrow-=1;
dataobj.rows[nowrow].className="selectedrow";
};
break;
case40://Down;
if(nowrow!=null&&nowrowvbar.scrollTop+=18;
dataobj.rows[nowrow].className="";
nowrow+=1;
dataobj.rows[nowrow].className="selectedrow";
};
break;
default:break;
}
}

functiondti(s){
varn=0;
vara=s.match(/d+/g);
for(vari=0;iif(a[i].length<2){
a[i]="0"+a[i];
}
}
n=a.join("");
returnn;
}

//排序
functiondgsort(obj,asc){
varrl=dh.data.length;
varci=obj.cellIndex;
varrowsobj=[];
for(vari=1;irowsobj[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){
returndti(trObj1.cells[ci].innerHTML)-dti(trObj2.cells[ci].innerHTML);
}else{
returndti(trObj2.cells[ci].innerHTML)-dti(trObj1.cells[ci].innerHTML);
}
}else{
if(asc){
returntrObj1.cells[ci].innerHTML.localeCompare(trObj2.cells[ci].innerHTML);
}else{
returntrObj2.cells[ci].innerHTML.localeCompare(trObj1.cells[ci].innerHTML);
}
}
});
for(vari=0;idataobj.childNodes[0].appendChild(rowsobj[i]);
}
for(varc=1;cobj.parentNode.cells[c].childNodes[1].innerHTML="";
}
if(asc){
obj.childNodes[1].innerHTML="▲";
}else{
obj.childNodes[1].innerHTML="▼";
}
}
}

vardhdg=newdhdatagrid();
dhdg.callname="dhdg";
dhdg.columns=["名称","大小","修改时间"];
dhdg.data=[["01.jpg","49KB","2006-12-617:06"],["02.gif","3KB","2006-12-617:06"],["axjz.jpg","121KB","2007-1-1910:19"],["bb.jpg","314KB","2006-10-2415:49"],["cd056.jpg","50KB","2007-1-510:03"],["d.psd","27,639KB","2006-11-613:31"],["dhAJ2.htm","12KB","2006-12-2110:53"],["dhChange.htm","12KB","2006-10-199:28"],["dhcombobox.htm","2KB","2006-12-2211:39"],["保险.txt","5KB","2007-1-311:31"],["滨江丽景.rar","1,048KB","2007-1-1814:23"],["积分兑奖.doc","634KB","2007-1-1911:17"],["亲人.jpg","396KB","2006-12-2315:50"],["未标题-2.jpg","61KB","2006-12-2315:46"]];
dhdg.dblclick_fun=function(e){alert(e+',ondblclick');}
dhdg.contextmenu_fun=function(e){alert(e+',oncontextmenu');}
dhdg.init();
dhdg.setwh();

注：DEMO（演示）：http://www.jxxg.com/dh20156/dhdatagrid/
原文：http://blog.csdn.net/dh20156/archive/2007/02/08/1505050.aspx

另外一个封装的很简单的gridby秦皇也爱JS