针对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>
如对本文有疑问，
点击进行留言回复！！
我要评论
网友评论