JavaScript实现的数据表格：冻结列、调整列宽和客户端排序

根据网上的一些脚本改的，大家看一下，应该对开发有用，准备在.Net下写个Server-Side端控件

把下面的代码另存为.htm文件后看下效果。

<STYLE type=text/css>BODY {

FONT: 12px 细明体; CURSOR: default

}

TD {

FONT: 12px 细明体; CURSOR: default

}

.title {

BORDER-RIGHT: #555 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 4px; BACKGROUND: LightBlue; PADDING-BOTTOM: 4px; OVERFLOW: hidden; BORDER-LEFT: #fff 1px solid; CURSOR: hand; PADDING-TOP: 4px; BORDER-BOTTOM: #555 1px solid; WHITE-SPACE: nowrap

}

.cdata {

PADDING-RIGHT: 3px; BORDER-TOP: #fff 1px solid; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; OVERFLOW: hidden; PADDING-TOP: 3px; BORDER-BOTTOM: #ddd 1px solid; WHITE-SPACE: nowrap

}

.coolMenu

{

position: absolute;

height: 1px;

width: 1px;

font-size: 9pt;

background-color: menu;

border-top: 2px outset buttonhighlight;

border-left: 2px outset buttonhighlight;

border-bottom: 1px solid buttonshadow;

border-right: 1px solid buttonshadow;

visibility: hidden;

}

.coolMenu .coolMenuItem

{

height: 20px;

margin: 1px;

padding-right: 10px;

cursor: hand;

overflow: hidden;

}

.coolMenu .coolMenuItem IMG

{

vertical-align: middle;

margin-left: 1px;

margin-right: 6px;

}

.coolMenu .coolMenuItem .coolMenuMore

{

font-family: webdings;

}

.coolMenu .coolMenuDivider

{

border: 1px inset;

border-top-color: buttonshadow;

border-bottom-color: buttonhighlight;

height: 2px;

overflow: hidden;

margin-left: 2px;

margin-top: 2px;

margin-bottom: 2px;

}

.sinput

{

BORDER-BOTTOM: black 1px solid;

BORDER-LEFT: 0px;

BORDER-RIGHT: 0px;

BORDER-TOP: 0px;

FONT-FAMILY: 宋体,Arial;

FONT-SIZE: 9pt;

WIDTH: 15pt;

height: 12pt;

}

</STYLE>

// 栏位标题 ( 栏位名称 # 栏位宽度 # 资料对齐 #数据类型（主要分三种数据类型：文本、数值、日期）)

var DataTitles=new Array(

"歌手 / 团体#90 #left#文本" ,

"专辑名称 #130#left#文本" ,

"发行公司 #110#left#文本" ,

"本周排名 #58 #center#数值",

"排名状况 #58 #center#文本",

"上周排名 #58 #center#数值",

"上榜周数 #58 #center#数值",

"最高名次 #58 #center#数值",

"销售百分比 #70 #center#数值",

"发行日期 #100 #right#日期"

)

// 栏位资料 ( 二维阵列 )

var DataFields=new Array()

DataFields[0] =new Array("萧亚轩萧亚轩萧亚轩萧亚轩萧亚轩萧亚轩萧亚轩萧亚轩" ,"爱的主打歌-吻" ,"维京 Virgin" ,"1" ,"持平" ,"1" ,"2","1" ,"2.9 %", "2004-1-1")

DataFields[1] =new Array("张惠妹" ,"发烧" ,"华纳 Warner" ,"2" ,"持平" ,"2" ,"2","2" ,"2.1 %", "2004-2-10")

DataFields[2] =new Array("陶吉吉" ,"黑色柳丁" ,"全员集合 Shock" ,"3" ,"持平" ,"3" ,"5","1" ,"1.8 %", "2004-2-09")

DataFields[3] =new Array("S.H.E" ,"美丽新世界" ,"华研 HIM" ,"4" ,"持平" ,"4" ,"6","1" ,"1.2 %", "2003-1-1")

DataFields[4] =new Array("艾薇儿" ,"展翅高飞" ,"博德曼 BMG" ,"5" ,"新进榜","-" ,"1","5" ,"1.1 %", "2004-4-4")

DataFields[5] =new Array("任贤齐" ,"一个任贤齐" ,"滚石 Rock" ,"6" ,"新进榜","-" ,"1","6" ,"1.0 %", "2002-10-11")

DataFields[6] =new Array("范逸臣" ,"范逸臣第一张专辑","丰华 Forward" ,"7" ,"持平" ,"7" ,"2","7" ,"0.9 %", "2002-12-11")

DataFields[7] =new Array("谢霆锋" ,"无形的他全精选" ,"新力 Sony" ,"8" ,"下跌" ,"6" ,"4","4" ,"0.9 %", "2004-1-1")

DataFields[8] =new Array("周蕙" ,"寂寞城市" ,"福茂 Decca" ,"9" ,"下跌" ,"5" ,"3","5" ,"0.8 %", "2004-1-1")

DataFields[9] =new Array("周杰伦" ,"八度空间" ,"博德曼 BMG" ,"10","下跌" ,"8" ,"8","1" ,"0.8 %", "2004-1-1")

DataFields[10]=new Array("酷玩乐团","玩过头" ,"科艺百代 EMI" ,"11","上升" ,"16","2","11","0.7 %", "2004-1-1")

DataFields[11]=new Array("张震岳" ,"等我有一天" ,"魔岩 Magicstone","12","新进榜","-" ,"1","12","0.6 %", "2004-1-1")

DataFields[12]=new Array("堂本刚" ,"红与蓝" ,"艾回 Avex" ,"13","新进榜","-" ,"1","13","0.6 %", "2004-1-1")

DataFields[13]=new Array("ENERGY" ,"COME ON" ,"环球 Universal" ,"14","下跌" ,"10","9","5" ,"0.6 %", "2004-1-1")

DataFields[14]=new Array("陈冠希" ,"TRANSITION" ,"艾回 Avex" ,"15","下跌" ,"9" ,"3","5" ,"0.4 %", "2004-1-1")

DataFields[15]=new Array("合辑" ,"MTV 嘻哈大师" ,"环球 Universal" ,"16","下跌" ,"12","3","12","0.4 %", "2004-1-1")

</SCRIPT>

var BoxWidth = 480 // 资料表显示宽度 ( 不含滚动条)

var ShowLine = 10 // 资料表显示列数

var RsHeight = 21 // 资料列高度

var LockCols = 1 // 要锁定的栏位数 ( 由左至右 )

var RowColor = "Linen"

var RowAlternativeColor = "#d9ffd3"

var RowMouseOverColor = "LightSteelBlue"

var RowSelectedColor = "CornflowerBlue"

//记录每次右击的列的索引。

var columnRC = 0

//记录被单击过的行的索引。

var rowC = -1;

function SetRowColor(sRowIndex, sColor)

{

for(i=0;i<leftTable.rows[sRowIndex].cells.length;i++)

leftTable.rows[sRowIndex].cells[i].style.backgroundColor = sColor;

for(i=0;i<rightTable.rows[sRowIndex].cells.length;i++)

rightTable.rows[sRowIndex].cells[i].style.backgroundColor = sColor;

}

function ResetRowColor(sRowIndex)

{

var sColor = null;

if (sRowIndex % 2 ==0)

sColor = RowColor;

else

sColor = RowAlternativeColor;

SetRowColor(sRowIndex, sColor);

}

function SortTableAsc()

{

var cTitle=DataTitles[columnRC].split("#");

switch(cTitle[3])

{

case "文本" :

alert("暂时不支持文本排序！汉字的拼音问题尚未解决！");

break;

case "数值" :

var minIndex = 0;

var tempArray = new Array();

for(i=0;i<DataFields.length;i++)

{

minIndex = i;

var leftMin = parseFloat(DataFields[i][columnRC]);

for(j=i+1;j<DataFields.length;j++)

{

if (leftMin>parseFloat(DataFields[j][columnRC]))

{

leftMin = parseFloat(DataFields[j][columnRC]);

minIndex = j;

}

if (minIndex != i)

{

for(h=0;h<DataFields[i].length;h++)

{

tempArray[h] = DataFields[i][h];

DataFields[i][h] = DataFields[minIndex][h];

DataFields[minIndex][h] = tempArray[h];

}

ApplyData();

break;

case "日期" :

var minIndex = 0;

var tempArray = new Array();

for(i=0;i<DataFields.length;i++)

{

//日期必须是yyyy-mm-dd格式的。

minIndex = i;

var leftMin = DataFields[i][columnRC].split("-");

for(j=i+1;j<DataFields.length;j++)

{

var currentDate = DataFields[j][columnRC].split("-");

if ( ( parseInt(leftMin[0]) > parseInt(currentDate[0]) ) || ( ( leftMin[0] == currentDate[0] ) && ( parseInt(leftMin[1]) > parseInt(currentDate[1]) ) ) || ( ( leftMin[0] == currentDate[0] ) && ( leftMin[1] == currentDate[1] ) && ( parseInt(leftMin[2]) > parseInt(currentDate[2]) ) ) )

{

leftMin[0] = currentDate[0];

leftMin[1] = currentDate[1];

leftMin[2] = currentDate[2];

minIndex = j;

}

if (minIndex != i)

{

for(h=0;h<DataFields[i].length;h++)

{

tempArray[h] = DataFields[i][h];

DataFields[i][h] = DataFields[minIndex][h];

DataFields[minIndex][h] = tempArray[h];

}

ApplyData();

break;

}

function SortTableDesc()

{

var cTitle=DataTitles[columnRC].split("#");

switch(cTitle[3])

{

case "文本" :

alert("暂时不支持文本排序！汉字的拼音问题尚未解决！");

break;

case "数值" :

var minIndex = 0;

var tempArray = new Array();

for(i=0;i<DataFields.length;i++)

{

minIndex = i;

var leftMin = parseFloat(DataFields[i][columnRC]);

for(j=i+1;j<DataFields.length;j++)

{

if (leftMin<parseFloat(DataFields[j][columnRC]))

{

leftMin = parseFloat(DataFields[j][columnRC]);

minIndex = j;

}

if (minIndex != i)

{

for(h=0;h<DataFields[i].length;h++)

{

tempArray[h] = DataFields[i][h];

DataFields[i][h] = DataFields[minIndex][h];

DataFields[minIndex][h] = tempArray[h];

}

ApplyData();

break;

case "日期" :

var minIndex = 0;

var tempArray = new Array();

for(i=0;i<DataFields.length;i++)

{

//日期必须是yyyy-mm-dd格式的。

minIndex = i;

var leftMin = DataFields[i][columnRC].split("-");

for(j=i+1;j<DataFields.length;j++)

{

var currentDate = DataFields[j][columnRC].split("-");

if ( ( parseInt(leftMin[0]) < parseInt(currentDate[0]) ) || ( ( leftMin[0] == currentDate[0] ) && ( parseInt(leftMin[1]) < parseInt(currentDate[1]) ) ) || ( ( leftMin[0] == currentDate[0] ) && ( leftMin[1] == currentDate[1] ) && ( parseInt(leftMin[2]) < parseInt(currentDate[2]) ) ) )

{

leftMin[0] = currentDate[0];

leftMin[1] = currentDate[1];

leftMin[2] = currentDate[2];

minIndex = j;

}

if (minIndex != i)

{

for(h=0;h<DataFields[i].length;h++)

{

tempArray[h] = DataFields[i][h];

DataFields[i][h] = DataFields[minIndex][h];

DataFields[minIndex][h] = tempArray[h];

}

ApplyData();

break;

}

function WriteTable(){ // 写入表格

var iBoxWidth=BoxWidth

var NewHTML="<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\"><tr><td><div style=\"width:100%;overflow-x:scroll\"><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" id=\"leftHead\"><tr>"

for(i=0;i<DataTitles.length;i++){

if(i<LockCols){

var cTitle=DataTitles[i].split("#")

iBoxWidth-=cTitle[1]

NewHTML+="<td><div class=\"title\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px\" align=\"" + cTitle[2] + "\" oncontextmenu=\"HeadRightClick()\">"+cTitle[0]+"</div></td>"

}

NewHTML+="</tr><tr><td colspan=\""+LockCols+"\"><div id=\"DataFrame1\" style=\"position:relative;width:100%;overflow:hidden\"><div id=\"DataGroup1\" style=\"position:relative\"></div></div></td></tr></table></div></td><td valign=\"top\"><div style=\"width:"+iBoxWidth+"px;overflow-x:scroll\"><table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" id=\"rightHead\"><tr>"

for(i=0;i<DataTitles.length;i++){

if(i>=LockCols){

var cTitle=DataTitles[i].split("#")

NewHTML+="<td><div class=\"title\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px\" align=\"" + cTitle[2] + "\" oncontextmenu=\"HeadRightClick()\">"+cTitle[0]+"</div></td>"

}

NewHTML+="</tr><tr><td colspan=\""+(DataTitles.length-LockCols)+"\"><div id=\"DataFrame2\" style=\"position:relative;width:100%;overflow:hidden\"><div id=\"DataGroup2\" style=\"position:relative\"></div></div></td></tr></table></div></td><td valign=\"top\"><div id=\"DataFrame3\" style=\"position:relative;background:#000;overflow-y:scroll\" onscroll=\"SYNC_Roll()\"><div id=\"DataGroup3\" style=\"position:relative;width:1px;visibility:hidden\"></div></div></td></tr></table>"

DataTable.innerHTML=NewHTML

ApplyData()

}

function ApplyData(){ // 写入资料

var NewHTML="<table id=\"leftTable\" onMouseOver=\"overcolor()\" onClick=\"clickColor()\" onMouseOut=\"outcolor()\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"

for(i=0;i<DataFields.length;i++){

if (i %2 == 0)

NewHTML+="<tr bgcolor=\"" + RowColor + "\">"

else

NewHTML+="<tr bgcolor=\"" + RowAlternativeColor + "\">"

for(j=0;j<DataTitles.length;j++){

if(j<LockCols){

var cTitle=DataTitles[j].split("#")

NewHTML+="<td><div class=\"cdata\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px;text-align:"+cTitle[2]+"\">"+DataFields[i][j]+"</div></td>"

}

NewHTML+="</tr>"

}

NewHTML+="</table>"

DataGroup1.innerHTML=NewHTML

var NewHTML="<table id=\"rightTable\" onMouseOver=\"overcolor()\" onClick=\"clickColor()\" onMouseOut=\"outcolor()\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\">"

for(i=0;i<DataFields.length;i++){

if (i %2 == 0)

NewHTML+="<tr bgcolor=\"" + RowColor + "\">"

else

NewHTML+="<tr bgcolor=\"" + RowAlternativeColor + "\">"

for(j=0;j<DataTitles.length;j++){

if(j>=LockCols){

var cTitle=DataTitles[j].split("#")

NewHTML+="<td><div class=\"cdata\" style=\"width:"+cTitle[1]+"px;height:"+RsHeight+"px;text-align:"+cTitle[2]+"\">"+DataFields[i][j]+"</div></td>"

}

NewHTML+="</tr>"

}

NewHTML+="</table>"

DataGroup2.innerHTML=NewHTML

DataFrame1.style.pixelHeight=RsHeight*ShowLine

DataFrame2.style.pixelHeight=RsHeight*ShowLine

DataFrame3.style.pixelHeight=RsHeight*ShowLine+RsHeight

DataGroup3.style.pixelHeight=RsHeight*(DataFields.length+1)

}

function ResetTable(){

var iBoxWidth=0

for(i=0;i<DataTitles.length;i++){

if(i<(columnRC+1)){

var cTitle=DataTitles[i].split("#")

iBoxWidth+=parseInt(cTitle[1])

}

if(iBoxWidth>BoxWidth){

var Sure=confirm("\n锁定栏位的宽度大於资料表显示的宽\n\n度，这可能会造成版面显示不正常。\n\n\n您确定要继续吗？")

}else{

Sure=true

}

if(Sure){

LockCols=(LockCols==columnRC+1)?0:columnRC+1

WriteTable()

}

function SYNC_Roll(){

DataGroup1.style.posTop=-DataFrame3.scrollTop

DataGroup2.style.posTop=-DataFrame3.scrollTop

}

function clickColor()

{

try

{

var oEl = event.srcElement;

if (oEl)

if (oEl.tagName == "DIV")

{

try

{

oEl = oEl.parentElement.parentElement;

}

catch (e)

{

return;

}

if (oEl.tagName == "TD")

oEl = oEl.parentElement;

var sindex = oEl.rowIndex;

SetRowColor(sindex, RowSelectedColor);

if (rowC >= 0)

if (rowC != sindex)

ResetRowColor(rowC);

rowC = sindex;

}

catch (e)

{}

}

function overcolor()

{

var oEl = event.srcElement;

if (oEl)

if (oEl.tagName == "DIV")

{

try

{

oEl = oEl.parentElement.parentElement;

}

catch (e)

{

return;

}

if (oEl.tagName == "TD")

oEl = oEl.parentElement;

var sindex = oEl.rowIndex;

if (rowC >= 0)

if (sindex == rowC)

return;

SetRowColor(sindex, RowMouseOverColor);

}

function outcolor()

{

var oEl = event.srcElement;

if (oEl)

if (oEl.tagName == "DIV")

{

try

{

oEl = oEl.parentElement.parentElement;

}

catch (e)

{

return;

}

if (oEl.tagName == "TD")

oEl = oEl.parentElement;

var sindex = oEl.rowIndex;

if (rowC >= 0)

if (sindex == rowC)

return;

ResetRowColor(sindex);

}

function HeadRightClick()

{

var ev = window.event;

var el = ev.srcElement;

if (el.tagName == "DIV")

{

showMenu(ev.clientX, ev.clientY);

ev.cancelBubble = true;

ev.returnValue = false;

var ep = el.parentElement;

columnRC = ep.cellIndex;

ep = el.parentElement.parentElement.parentElement.parentElement;

if (ep.tagName == "TABLE")

{

if (ep.id == "rightHead")

columnRC += LockCols;

}

function showMenu(x, y)

{

var intRightEdge = window.document.body.clientWidth - x;

var intBottomEdge = window.document.body.clientHeight - y;

var intScrollLeft = window.document.body.scrollLeft + x;

var intScrollTop = window.document.body.scrollTop + y;

if (intRightEdge < objHeadMenu.offsetWidth)

objHeadMenu.style.left = intScrollLeft - objHeadMenu.offsetWidth;

else

objHeadMenu.style.left = intScrollLeft;

if (intBottomEdge < objHeadMenu.offsetHeight)

objHeadMenu.style.top = intScrollTop - objHeadMenu.offsetHeight;

else

objHeadMenu.style.top = intScrollTop;

objHeadMenu.style.zIndex = 50;

objHeadMenu.style.filter = "blendTrans(duration=0.50) progid:DXImageTransform.Microsoft.Shadow(color=#323232, direction=135, strength=3)";

if (objHeadMenu.filters.blendTrans.status != 2)

{

objHeadMenu.filters.blendTrans.apply();

objHeadMenu.style.visibility = "visible";

objHeadMenu.filters.blendTrans.play();

}

function hideMenu()

{

objHeadMenu.style.filter = "blendTrans(duration=0.50) progid:DXImageTransform.Microsoft.Shadow(color=#323232, direction=135, strength=3)";

if (objHeadMenu.filters.blendTrans.status != 2)

{

objHeadMenu.filters.blendTrans.apply();

objHeadMenu.style.visibility = "hidden";

objHeadMenu.filters.blendTrans.play();

}

//加列宽

function SetCWP(valWidth)

{

var cTitle = DataTitles[columnRC].split("#");

var cWidth = parseInt(cTitle[1]) + parseInt(valWidth);

DataTitles[columnRC] = cTitle[0] + "#" + cWidth + "#" + cTitle[2] + "#" + cTitle[3];

WriteTable();

}

//减列宽

function SetCWM(valWidth)

{

var cTitle = DataTitles[columnRC].split("#");

var cWidth = parseInt(cTitle[1]) - parseInt(valWidth);

if (cWidth <= 0) return;

DataTitles[columnRC] = cTitle[0] + "#" + cWidth + "#" + cTitle[2] + "#" + cTitle[3];

WriteTable();

}

右键菜单上的两个调整列宽的文本框的KeyDown事件，用于捕捉"Enter"时调整列宽并隐藏菜单

function CWKeyDown()

{

if (event.keyCode == 13)

{

var oEl = event.srcElement;

if (oEl.id == "txtCWPlus")

SetCWP(txtCWPlus.value);

if (oEl.id == "txtCWMinus")

SetCWM(txtCWMinus.value);

hideMenu();

}

function createMenu()

{

var txtHTML = "<div class=\"coolMenuItem\" style='padding-top: 1px;' onclick=\"SortTableAsc();hideMenu();\"><img src=\"images/asc.gif\" width=\"16\" height=\"16\">按升序排序</div>";

txtHTML += "<div class=\"coolMenuItem\" style='padding-top: 1px;' onclick=\"SortTableDesc();hideMenu();\"><img src=\"images/desc.gif\" width=\"16\" height=\"16\">按降序排序</div>";

txtHTML +="<div class=\"coolMenuDivider\"></div>";

txtHTML += "<div class=\"coolMenuItem\" style='padding-top: 1px;' onclick=\"ResetTable();hideMenu();\"><img src=\"images/blank.gif\" width=\"16\" height=\"16\">锁定列</div>";

txtHTML += "<div class=\"coolMenuDivider\"></div>";

txtHTML += "<div class=\"coolMenuItem\" style='padding-top: 1px;' onClick=\"SetCWP(txtCWPlus.value);\" onMouseOver=\"txtCWPlus.focus();\"><img src=\"images/blank.gif\" width=\"16\" height=\"16\">列宽 + <input type=\"text\" id=\"txtCWPlus\" class=\"sinput\" value=\"20\" onKeyDown=\"CWKeyDown();\"> px</div>";

txtHTML += "<div class=\"coolMenuItem\" style='padding-top: 1px;' onclick=\"SetCWM(txtCWMinus.value);\" onMouseOver=\"txtCWMinus.focus()\"><img src=\"images/blank.gif\" width=\"16\" height=\"16\">列宽 - <input type=\"text\" id=\"txtCWMinus\" class=\"sinput\" value=\"20\" onKeyDown=\"CWKeyDown();\"> px</div>";

objHeadMenu.className = "coolMenu";

objHeadMenu.innerHTML = txtHTML;

window.document.body.insertAdjacentElement("afterBegin", objHeadMenu);

}

</SCRIPT>

<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

//-->

</script>

</HEAD>

<TBODY>

<TR>

</DIV></TD></TR></TBODY></TABLE>

</CENTER></BODY></HTML>