javascript之dhDataGrid Ver2.0.0代码


Posted in Javascript onJuly 01, 2007

针对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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
Dec 25 Javascript
javascript变量声明实例分析
Apr 25 Javascript
javascript实现十秒钟后注册按钮可点击的方法
May 13 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
基于JavaScript实现回到页面顶部动画代码
May 24 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
React创建组件的三种方式及其区别
Jan 12 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
JavaScript 有用的代码片段和 trick
Feb 22 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
vue + webpack如何绕过QQ音乐接口对host的验证详解
Jul 01 Javascript
javascript事件模型代码
Jul 01 #Javascript
如何快速的呈现我们的网页的技巧整理
Jul 01 #Javascript
IE autocomplete internet explorer's autocomplete
Jun 30 #Javascript
用javascript实现的激活输入框后隐藏初始内容
Jun 29 #Javascript
javascritp实现input输入框相关限制用法
Jun 29 #Javascript
优化网页之快速的呈现我们的网页
Jun 29 #Javascript
javascript实现动态CSS换肤技术的脚本
Jun 29 #Javascript
You might like
PHP 文件上传功能实现代码
2009/06/24 PHP
PHP遍历数组的几种方法
2012/03/22 PHP
PHP中构造函数和析构函数解析
2014/10/10 PHP
PHP中Memcache操作类及用法实例
2014/12/12 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
在WordPress中安装使用视频播放器插件Hana Flv Player
2016/01/04 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
PHP单例模式数据库连接类与页面静态化实现方法
2019/03/20 PHP
动态表格Table类的实现
2009/08/26 Javascript
picChange 图片切换特效的函数代码
2010/05/06 Javascript
js自动闭合html标签(自动补全html标记)
2012/10/04 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
跟我学习javascript的Date对象
2015/11/19 Javascript
JS简单模拟触发按钮点击功能的方法
2015/11/30 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
全面了解js中的script标签
2016/07/04 Javascript
JS根据生日月份和日期计算星座的简单实现方法
2016/11/24 Javascript
纯js实现无缝滚动功能代码实例
2020/02/21 Javascript
python模拟enum枚举类型的方法小结
2015/04/30 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
Python 列表理解及使用方法
2017/10/27 Python
Numpy中stack(),hstack(),vstack()函数用法介绍及实例
2018/01/09 Python
Python中文分词库jieba,pkusegwg性能准确度比较
2020/02/11 Python
Python3内置函数chr和ord实现进制转换
2020/06/05 Python
塔吉特百货公司官网:Target
2017/04/27 全球购物
沙龙级头发造型工具:FOXYBAE
2018/07/01 全球购物
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
日本AOKI官方商城:AOKI西装
2020/06/11 全球购物
工程部经理岗位职责
2013/12/08 职场文书
九年级体育教学反思
2014/01/23 职场文书
2015年幼儿园班务工作总结
2015/05/12 职场文书
离婚律师函范本
2015/05/27 职场文书
MySQL infobright的安装步骤
2021/04/07 MySQL
gateway与spring-boot-starter-web冲突问题的解决
2021/07/16 Java/Android
浅谈css清除浮动(clearfix和clear)的用法
2023/05/21 HTML / CSS