针对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 = "<tr><td class="firstcolumn"> </td>"; for(var cc=0;cc<this.columns.length;cc++){ dgc += "<td class="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]+"<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 onmouseover=""+this.callname+".dataover(this);" onmouseout=""+this.callname+".dataout(this);"><td class="firstcolumn"> </td>"; for(var c=0;c<this.data[r].length;c++){ dgd += "<td ondblclick=""+this.callname+".dblclick_fun(this);" oncontextmenu=""+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" 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)+"<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/ 原文：http://blog.csdn.net/dh20156/archive/2007/02/08/1505050.aspx 另外一个封装的很简单的grid by 秦皇也爱JS <style> table{ width: 120%;height:auto;background:#E8E8E8; margin:0 auto; cursor:pointer} table th{ background:url(http://www.cpp114.com/cppjob/bg.gif) repeat-x; font-size:12px; padding:2px 0;} table td{ font-size:12px; text-align:center; padding:2px 0;} input {border:none;position:absolute;display:none;text-align:center;} select {position:absolute;display:none;} </style> <script> var GridData = { 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 学历 = ["高中", "本科", "硕士", "博士"]; function MyGrid(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"))]; var CurGrid = this; this.load = function(){ //grid重画模块 /** 加载table **/ var tbStr = []; tbStr.push("<table cellspacing='1'><tr height='25'>"); for(var o in this.datas.title){ tbStr.push("<th>" + this.datas.title[o] + (this.datas.order[o]==1?"↑":"↓") + "</th>"); } tbStr.push("</tr>"); for(var i in this.datas.data){ tbStr.push("<tr bgcolor=" + MyGrid.backColor + " height='25'>"); for(var j in this.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(var r=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; else this.style.backgroundColor = MyGrid.clickColor; } for(var c=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(); }else if(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(var g=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]){return type;}else if(x[n]<y[n]){return -type;}else{return 0;}}); this.load(); } this.delRow = function(){ //删除行 this.datas.data.splice(this.curRow.rowIndex-1, 1); this.table.deleteRow(this.curRow.rowIndex); } this.loadSelect = function(type){ //读取下拉框内容 var opts = this.editTools[1].options; for(var o in eval(type)){ var opt = document.createElement("option"); opt.value = opt.text = eval(type)[o]; opts.add(opt); } } } var grid; window.onload = loadGrid; function loadGrid(){ grid = new MyGrid(GridData, $("panel")); grid.load(); } function $(id){ return document.getElementById?document.getElementById(id):eval(id); } function getAbsPos(obj){ var objResult = new Object(); objResult.topy = obj.offsetTop; objResult.leftx = obj.offsetLeft; while( obj = obj.offsetParent){ objResult.topy += obj.offsetTop; objResult.leftx += obj.offsetLeft; } return objResult; } </script> <div id="panel" style="width:300px;height:300px;overflow:scroll;"> </div><br> <input type="button" value="导出当前行" onclick="if(grid.curRow)alert(grid.curRow.innerText);else{alert('请选中一行');}" style="display:block;border:1px outset;"><br> <input type="button" value="导出所有数据" onclick="alert(grid.datas.data.join('n'))" style="display:block;border:1px outset;"><br> <input type="button" value="删除行" onclick="grid.delRow();" style="display:block;border:1px outset;"><br>

　　推荐阅读

　　javascript之解决IE下不渲染的bug

有时候，你会发现，在一些JS应用中，涉及到CSS的重新渲染（即页面样式需要更新）的话，IE死活不变。 此时你需要让IE重新渲染一下： function handleIEhasLayout(){ //trigger re-rendering document.body.styl>>>详细阅读

本文标题：javascript之dhDataGrid Ver2.0.0代码

地址：http://www.17bianji.com/kaifa2/JS/30305.html

 1/2    1