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

最新推荐文章于 2022-08-02 10:12:11 发布

weixin_34060741

最新推荐文章于 2022-08-02 10:12:11 发布

阅读量107

点赞数

文章标签： javascript ViewUI

根据网上的一些脚本改的，大家看一下，应该对开发有用，准备在.Net下写个Server-Side端控件
把下面的代码另存为.htm文件后看下效果。

<HTML><HEAD>
<TITLE>数据表格</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<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>
<SCRIPT language=JavaScript>
// 栏位标题 ( 栏位名称 # 栏位宽度 # 资料对齐 #数据类型（主要分三种数据类型：文本、数值、日期）)
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>
<SCRIPT language=JavaScript>
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 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
}

var sindex = oEl.rowIndex;

SetRowColor(sindex, RowSelectedColor);

if (rowC >= 0)
  if (rowC != sindex)
   ResetRowColor(rowC);

rowC = sindex;
}
catch (e)
{}
}

var sindex = oEl.rowIndex;

if (rowC >= 0)
if (sindex == rowC)
return;

SetRowColor(sindex, RowMouseOverColor);
}

var sindex = oEl.rowIndex;

  if (rowC >= 0)
  if (sindex == rowC)
   return;

ResetRowColor(sindex);
}

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;' οnclick=\"SortTableAsc();hideMenu();\"><img src=\"images/asc.gif\" width=\"16\" height=\"16\">按升序排序</div>";
  txtHTML += "<div class=\"coolMenuItem\" style='padding-top: 1px;' οnclick=\"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;' οnclick=\"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;' οnclick=\"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>
<META content="MSHTML 6.00.2800.1170" name=GENERATOR>
<script language="JavaScript" type="text/JavaScript">

</script>
</HEAD>
<BODY onLoad="WriteTable();createMenu();" onClick="hideMenu();">
<CENTER>
<H4> </H4>

<TABLE cellSpacing=0 cellPadding=0 border=0>
<TBODY>
<TR>
<TD style="BORDER-RIGHT: white 2px inset; BORDER-TOP: white 2px inset; BORDER-LEFT: white 2px inset; BORDER-BOTTOM: white 2px inset; BACKGROUND-COLOR: scrollbar">
<DIV id=DataTable>
</DIV></TD></TR></TBODY></TABLE>
<P> </P>
<div id="objHeadMenu" style="position:absolute; width:124px; height:13px; z-index:1; left: 525px; top: 164px; visibility: hidden;" οncοntextmenu="return false;"></div>
</CENTER></BODY></HTML>