针对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:1pxinset;-moz-user-select:none;}
/*dhdatagrid表格全局样式*/
#dhdatagridtable{table-layout:fixed;margin:0px;}
#dhdatagridtabletd{height:18px;cursor:default;font-size:12px;font-family:verdana;overflow:hidden;white-space:nowrap;text-indent:2px;border-right:1pxsolidbuttonface;border-bottom:1pxsolidbuttonface;}
#dhdatagridtabletd.arrow{font-size:8px;color:#808080;}
#dhdatagridtable.lastdata{border-right:none;}
#dhdatagridtable.column{width:120px;cursor:default;background:buttonface;border-top:1pxsolid#fff;border-right:1pxsolid#404040;border-bottom:1pxsolid#404040;border-left:1pxsolid#fff;}
#dhdatagridtable.over{width:120px;cursor:default;background:buttonface;border-top:1pxsolid#fff;border-right:1pxsolid#404040;border-bottom:1pxsolid#404040;border-left:1pxsolid#fff;}
#dhdatagridtable.sortdown{width:120px;cursor:default;background:buttonface;border-right:1pxsolid#ffffff;border-bottom:1pxsolid#ffffff;border-left:1pxsolid#404040;border-top:1pxsolid#404040;position:relative;left:1px;}
#dhdatagridtable.dataover{background:#FAFAFA;}
#dhdatagridtable.firstcolumn{width:30px;text-indent:0px;text-align:center;background:buttonface;border-top:1pxsolid#fff;border-right:1pxsolid#404040;border-bottom:1pxsolid#404040;border-left:1pxsolid#fff;}
#dhdatagridtable.lastcolumn{background:buttonface;border-top:1pxsolid#fff;border-right:1pxsolid#404040;border-bottom:1pxsolid#404040;border-left:1pxsolid#fff;}
/*dhdatagrid选定行样式*/
#dhdatagridtable.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#slidecolumntd{width:30px;text-indent:0px;text-align:center;background:buttonface;border-top:1pxsolid#fff;border-right:1pxsolid#404040;border-bottom:1pxsolid#404040;border-left:1pxsolid#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:1pxsolid#fff;border-right:1pxsolid#404040;border-bottom:1pxsolid#404040;border-left:1pxsolid#fff;text-align:center;font-size:10px;color:#A19F92;}
JS：
functiondhdatagrid(){
//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;
vardh=this;
varframediv=null;
varzerobj=null;
varleftobj=null;
vartitleobj=null;
vardataobj=null;
varhbar=null;
varvbar=null;
varbgbar=null;
//改变列宽初始位置
varml=0;
//改变列宽对象初始宽度
varow=0;
//改变列宽对象
vartdobj=null;
//当前选定行索引
varnowrow=null;
//是否更改垂直滚动条位置
varchangeposv=true;
this.init=function(){
//initthedata初始数据
vardgc="";
if(this.columns.length>0){
dgc="<tr><tdclass="firstcolumn"></td>";
for(varcc=0;cc<this.columns.length;cc++){
dgc+="<tdclass="column"onmouseover=""+this.callname+".over(this);"onmouseout=""+this.callname+".out(this);"onmousemove=""+this.callname+".cc(event,this);"onmousedown=""+this.callname+".rsc_d(event,this);"onmouseup=""+this.callname+".mouseup(this);">"+this.columns[cc]+"<spanclass="arrow"></span></td>";
}
dgc+="<tdclass="lastcolumn"></td></tr>";
}
vardgs="";
vardgd="";
if(this.data.length>0){
//第一列
dgs="<tr><td></td></tr>";
for(varr=0;r<this.data.length;r++){
dgs+="<tr><td>"+(r+1)+"</td></tr>";
dgd+="<tronmouseover=""+this.callname+".dataover(this);"onmouseout=""+this.callname+".dataout(this);"><tdclass="firstcolumn"></td>";
for(varc=0;c<this.data[r].length;c++){
dgd+="<tdondblclick=""+this.callname+".dblclick_fun(this);"oncontextmenu=""+this.callname+".contextmenu_fun(this);">"+this.data[r][c]+"</td>";
}
dgd+="<tdclass="lastdata"></td></tr>";
}
if(dgc==""){
dgc="<tr><tdclass="firstcolumn"></td>";
for(vardc=0;dc<this.data[0].length;dc++){
dgc+="<tdclass="column"onmouseover=""+this.callname+".over(this);"onmouseout=""+this.callname+".out(this);"onmousemove=""+this.callname+".cc(event,this);"onmousedown=""+this.callname+".rsc_d(event,this);"onmouseup=""+this.callname+".mouseup(this);">Expr"+(dc+1)+"<spanclass="arrow"></span></td>";
}
dgc+="<tdclass="lastcolumn"></td></tr>";
}
}
//dhdatagridframe框架
vardgframe=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(){returnfalse}
dgframe.onselectstart=function(){returnfalse}
ae(dgframe);
//dhdatagridzeropoint零点
vardgzero="<divid="zero"></div>"
//dhdatagridslidecolumn第一列
vardgslide="<tablecellpadding="0"cellspacing="0"id="slidecolumn">"+dgs+"</table>";
//dhdatagridcolumn标题栏
vardgcolumn="<tablecellpadding="0"cellspacing="0"id="titlecolumn">"+dgc+"</table>";
//dhdatagriddata数据
vardgdata="<tablecellpadding="0"cellspacing="0"id="datacolumn">"+dgc+dgd+"</table>";
//dhdatagridhbar水平滚动条
vardghbar=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="<divstyle="width:100%;height:1px;overflow-y:hidden;"></div>";
//dhdatagridvbar垂直滚动条
vardgvbar=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="<divstyle="width:1px;height:100%;overflow-x:hidden;"></div>";
//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&&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);
}
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&&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事件
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&&nowrow<rl){
vbar.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;i<a.length;i++){
if(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;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){
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;i<rowsobj.length;i++){
dataobj.childNodes[0].appendChild(rowsobj[i]);
}
for(varc=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>
<metahttp-equiv="content-type"content="type=text/html;charset=gb2312">
<linktype="text/css"rel="stylesheet"href="default/dhdatagrid.css">
<scriptlanguage="javascript"src="dhdatagrid.js"></script>
</head>
<bodystyle="background:#ECE9D8;">
<scriptlanguage="javascript">
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();
</script>
</body>
</html>
注：DEMO（演示）：http://www.jxxg.com/dh20156/dhdatagrid/
原文：http://blog.csdn.net/dh20156/archive/2007/02/08/1505050.aspx
另外一个封装的很简单的gridby秦皇也爱JS
<style>
table{width:120%;height:auto;background:#E8E8E8;margin:0auto;cursor:pointer}
tableth{background:url(http://www.cpp114.com/cppjob/bg.gif)repeat-x;font-size:12px;padding:2px0;}
tabletd{font-size:12px;text-align:center;padding:2px0;}
input{border:none;position:absolute;display:none;text-align:center;}
select{position:absolute;display:none;}
</style>
<script>
varGridData={
title:["姓名","性别","年龄","学历","特长"],
type:[0,1,0,1,0],//编辑框类型ŀ--textboxŁ---select
order:[-1,-1,-1,-1,-1],//排序类型Ł----升序-1---降序
data:[["张三","男",27,"本科","足球"],
["YM","男",26,"本科","中锋"],
["McGrady","男",28,"博士","前锋"],
["James","男",25,"本科","小前锋"],
["Good","女",21,"高中","商品"],
["Fut","男",22,"本科","WAR3"],
["Keens","男",37,"高中","SC"],
["Gruby","女",32,"本科","SC"],
["Grrr","男",19,"硕士","SC"],
["Sky","男",22,"本科","WAR3"],
["Moon","男",25,"本科","WAR3"]]
};
var性别=["男","女"];
var学历=["高中","本科","硕士","博士"];
functionMyGrid(data,cnt){
MyGrid.backColor="#fdfdfd";
MyGrid.hoverColor="#edfae9";
MyGrid.clickColor="#e1e6f1";
this.datas=data;
this.container=cnt;
this.table;
this.curRow;
this.curCell;
this.editTools=[document.body.appendChild(document.createElement("input")),document.body.appendChild(document.createElement("select"))];
varCurGrid=this;
this.load=function(){//grid重画模块
/**加载table**/
vartbStr=[];
tbStr.push("<tablecellspacing='1'><trheight='25'>");
for(varointhis.datas.title){
tbStr.push("<th>"+this.datas.title[o]+(this.datas.order[o]==1?"↑":"↓")+"</th>");
}
tbStr.push("</tr>");
for(variinthis.datas.data){
tbStr.push("<trbgcolor="+MyGrid.backColor+"height='25'>");
for(varjinthis.datas.data[i]){
tbStr.push("<td>"+this.datas.data[i][j]+"</td>");
}
tbStr.push("</tr>");
}
tbStr.push("</table>");
this.container.innerHTML=tbStr.join("");
this.table=this.container.firstChild;
/**设置编辑工具**/
this.editTools[0].onblur=function(){
CurGrid.curCell.removeChild(CurGrid.curCell.firstChild)
CurGrid.curCell.appendChild(document.createTextNode(this.value));
if(isNaN(CurGrid.datas.data[CurGrid.curCell.parentNode.rowIndex-1][CurGrid.curCell.cellIndex])){
CurGrid.datas.data[CurGrid.curCell.parentNode.rowIndex-1][CurGrid.curCell.cellIndex]=this.value;
}else{
CurGrid.datas.data[CurGrid.curCell.parentNode.rowIndex-1][CurGrid.curCell.cellIndex]=Number(this.value)
}
this.value="";
this.style.display="none";
}
this.editTools[1].onblur=function(){
this.options.length=0;
this.style.display="none";
}
this.editTools[1].onchange=function(){
CurGrid.curCell.removeChild(CurGrid.curCell.firstChild)
CurGrid.curCell.appendChild(document.createTextNode(this.value));
CurGrid.datas.data[CurGrid.curCell.parentNode.rowIndex-1][CurGrid.curCell.cellIndex]=this.value;
this.options.length=0;
this.style.display="none";
}
/**设置单元格**/
for(varr=1;r<this.table.rows.length;r++){
this.table.rows[r].onmouseover=function(){this.style.backgroundColor=MyGrid.hoverColor;}
this.table.rows[r].onmouseout=function(){
if(CurGrid.curRow!=this)this.style.backgroundColor=MyGrid.backColor;
elsethis.style.backgroundColor=MyGrid.clickColor;
}
for(varc=0;c<this.table.rows[r].cells.length;c++){
this.table.rows[r].cells[c].onclick=function(){
if(CurGrid.curRow)CurGrid.curRow.style.backgroundColor=MyGrid.backColor;
CurGrid.curRow=this.parentNode;
this.parentNode.style.backgroundColor=MyGrid.clickColor;
}
this.table.rows[r].cells[c].ondblclick=function(){
//alert("("+this.cellIndex+","+this.parentNode.rowIndex+")"+this.firstChild.data);
CurGrid.curCell=this;
CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.display="block";
CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.width=this.offsetWidth;
CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.height=this.offsetHeight;
CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.left=getAbsPos(this).leftx-CurGrid.container.scrollLeft;
CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].style.top=getAbsPos(this).topy-CurGrid.container.scrollTop;
CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].focus();
if(CurGrid.datas.type[this.cellIndex]==0){
CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].select();
}elseif(CurGrid.datas.type[this.cellIndex]==1){
CurGrid.loadSelect(CurGrid.datas.title[this.cellIndex]);
}
CurGrid.editTools[CurGrid.datas.type[this.cellIndex]].value=this.firstChild.data;
}
}
}
for(varg=0;g<this.table.rows[0].cells.length;g++){
this.table.rows[0].cells[g].onclick=function(){
CurGrid.datas.order[this.cellIndex]=-CurGrid.datas.order[this.cellIndex];
CurGrid.sort(this.cellIndex,CurGrid.datas.order[this.cellIndex]);
}
}
}
this.sort=function(n,type){//排序
this.datas.data=this.datas.data.sort(function(x,y){if(x[n]>y[n]){returntype;}elseif(x[n]<y[n]){return-type;}else{return0;}});
this.load();
}
this.delRow=function(){//删除行
this.datas.data.splice(this.curRow.rowIndex-1,1);
this.table.deleteRow(this.curRow.rowIndex);
}
this.loadSelect=function(type){//读取下拉框内容
varopts=this.editTools[1].options;
for(varoineval(type)){
varopt=document.createElement("option");
opt.value=opt.text=eval(type)[o];
opts.add(opt);
}
}
}
vargrid;
window.onload=loadGrid;
functionloadGrid(){
grid=newMyGrid(GridData,$("panel"));
grid.load();
}
function$(id){
returndocument.getElementById?document.getElementById(id):eval(id);
}
functiongetAbsPos(obj){
varobjResult=newObject();
objResult.topy=obj.offsetTop;
objResult.leftx=obj.offsetLeft;
while(obj=obj.offsetParent){
objResult.topy+=obj.offsetTop;
objResult.leftx+=obj.offsetLeft;
}
returnobjResult;
}
</script>
<divid="panel"style="width:300px;height:300px;overflow:scroll;">
</div><br>
<inputtype="button"value="导出当前行"onclick="if(grid.curRow)alert(grid.curRow.innerText);else{alert('请选中一行');}"style="display:block;border:1pxoutset;"><br>
<inputtype="button"value="导出所有数据"onclick="alert(grid.datas.data.join('n'))"style="display:block;border:1pxoutset;"><br>
<inputtype="button"value="删除行"onclick="grid.delRow();"style="display:block;border:1pxoutset;"><br>
【javascript之dhDataGrid Ver2.0.0代码】相关文章：
★ javascript委托(Delegate)blur和focus用法实例分析