一个封装的很简单的grid,支持排序编辑分页锁定表头,兼容FF

<style>...




*{...}{font-size:12px;}




table{...}{ width: auto;height:auto;background:#E8E8E8; margin:0 auto; cursor:pointer; table-layout:fixed}




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"],


["Cruise","女",18,"本科","WAR3"],


["Fast","男",23,"本科","WAR3"],


["Kathy","女",21,"硕士","SC"],


["Grose","女",19,"高中","SC"],


["Mut","男",29,"硕士","SC"],


["Ken","男",27,"本科","WAR3"],


["Darkman","男",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.curOrder;


this.editTools = [document.body.appendChild(document.createElement("input")),document.body.appendChild(document.createElement("select"))];


this.editTools[0].className = "input";


this.editTools[1].className = "select";


this.dragBar = []; //拖拉改变尺寸的条




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 width='70'>" + this.datas.title[o] + (this.curOrder == o?(this.datas.order[o]==1?"↑":"↓"):"") + "</th>");


}//<div style='float:left;height:100%;width:4px;font-size:0px;cursor:e-resize;'></div>


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;






/**//*for(var k in this.datas.title){ //拖拉表格宽度


this.dragBar[k] = this.table.rows[0].cells[k].firstChild;


this.dragBar[k].onclick = function(e){


var eve = e || window.event;


eve.cancelBubble = true;


}


this.dragBar[k].onmousedown = function(e){


var eve = e || window.event;




}


}*/








/**//** 设置编辑工具 **/




this.editTools[0].onblur = 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.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.curOrder = 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
>y
)...{return type;}else if(x
<y
)...{return -type;}else...{return 0;}});


this.load();


}






this.delRow = function()...{ //删除行


if(!this.curRow) return;


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;






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;


}






/**//*---------------------------分页---*/




function Page(data, ctn)...{


this.data = data;


this.container = ctn;


this.totalCount = data.length;


this.pageSize = 5;


this.pageCount = Math.ceil(this.totalCount/this.pageSize);


this.curPage = 1;






this.go = function(i)...{


if(isNaN(i) || i<1 || i>this.pageCount) return;




this.curPage = i;


this.showData();


}






this.firstPage = function()...{


this.curPage = 1;


this.showData();


}






this.lastPage = function()...{


this.curPage = this.pageCount;


this.showData();


}






this.prevPage = function()...{


this.curPage --;




if(this.curPage == 0)...{


this.curPage = 1;


}


this.showData();


}






this.nextPage = function()...{


this.curPage++;




if(this.curPage == this.pageCount+1)...{


this.curPage = this.pageCount;


}


this.showData();


}






this.refresh = function()...{


this.totalCount = this.data.length;


this.pageCount = Math.ceil(this.totalCount/this.pageSize);


this.curPage = 1;


this.showData();


}






this.showData = function()...{


var tempArr = [];


var start = (this.curPage-1)*this.pageSize;


var len = this.curPage==this.pageCount && (this.totalCount%this.pageSize) > 0?this.totalCount%this.pageSize:this.pageSize;






for(var i=0; i<len;i++)...{


tempArr[i] = [];




for(var j=0; j<this.data[0].length; j++)...{


tempArr[i].push(this.data[i+start][j])


}


}






grid.datas.data = tempArr;


grid.load();


}


}




window.onload = init;




var pages;






function init()...{


grid = new MyGrid(GridData, $("panel"));




pages = new Page(GridData.data, null);


pages.showData();


}






</script>




<div id="panel" style="width:300px;height:200px;overflow:scroll;">


</div><br>


<div>     <a href="javascript:pages.firstPage();">首页</a>   <a href="javascript:pages.prevPage();">上页</a>   


<a href="javascript:pages.nextPage();">下页</a>   <a href="javascript:pages.lastPage();">尾页</a><br><br>


<input id="page" size="3"><button onclick="pages.go($('page').value)">Go</button>


每页条数<select onchange="pages.pageSize=Number(this.value);pages.refresh();"><option value="3">3</option><option value="4">4</option><option value="5" selected>5</option><option value="6">6</option><option value="7">7</option><option value="8">8</option><option value="9">9</option><option value="10">10</option></select></div><br>




<input type="button" value="导出当前行" onclick="if(grid.curRow)alert(grid.curRow.innerText);else{alert('请选中一行');}" ><br>


<input type="button" value="导出所有数据" onclick="alert(grid.datas.data.join(' '))" ><br>


<input type="button" value="删除行" onclick="grid.delRow();" ><br>