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

本文介绍了一个使用纯 JavaScript 实现的自定义网格表格组件及其分页功能。该组件支持基本的数据展示、排序、编辑及简单的分页操作。通过对 HTML、CSS 和 JavaScript 的综合运用，展示了如何创建一个实用且交互丰富的表格组件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>

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[n]>y[n]){return type;}else if(x[n]<y[n]){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><br>

每页条数<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>