冻结窗格如 Excel

分享于 

4分钟阅读

Web开发

  繁體 雙語

介绍

本文描述的脚本只是使用滚动按钮隐藏/取消隐藏列或者行,创建一个像这样的。

背景

这里已经有几个脚本演示如何冻结 HTML table 顶行和第一列。

大多数脚本都是特定于 IE的,而我尝试使用的是 跨浏览器 兼容的,但要求列设置为特定宽度。 例如所有列宽必须设置为 100px 宽。

我发现这不是理想的,因为列隐藏了大于 100px的内容,无法通过屏幕控件调整隐藏数据。

我发现的另一个解决方案非常不错,但是需要非常庞大和复杂的JavaScript代码。

使用代码

该脚本使用滚动按钮隐藏/取消隐藏列或者行:

<buttontitle="Up"onmousedown="upp();"onmouseup="upp(1);">Up</button><buttontitle="Left"onmousedown="left();"onmouseup="left(1);">&lt;&lt;</button><buttontitle="Right"onmousedown="right();"onmouseup="right(1);">&gt;&gt;</button><buttontitle="Down"onmousedown="down();"onmouseup="down(1);">Dn</button>

自然地,图像可以很容易地用于更吸引人的显示器。

将JavaScript函数放置在页面的头部或者 body 中。 函数 setUp() 在第一次单击按钮时初始化 table。 请确保修改:

if(!myTable){myTable=document.getElementById("t1");

如果你的table 不是" t1",则将它的标识为 MATCH。 脚本可以更好地优化,但是为了演示,代码很容易遵循。

var myRow=1;
 var myCol=1;
 var myTable;
 var noRows;
 var myCells,ID;function setUp(){
 if(!myTable){myTable=document.getElementById("t1");}
 myCells = myTable.rows[0].cells.length;
 noRows=myTable.rows.length;
 for( var x = 0; x <myTable.rows[0].cells.length; x++ ) {
 colWdth=myTable.rows[0].cells[x].offsetWidth;
 myTable.rows[0].cells[x].setAttribute("width",colWdth-4);
 } 
}function right(up){
 if(up){window.clearTimeout(ID);return;}
 if(!myTable){setUp();}
 if(myCol<(myCells)){
 for( var x = 0; x <noRows; x++ ) {
 myTable.rows[x].cells[myCol].style.display="";
 }
 if(myCol> 1){myCol--;}
 ID = window.setTimeout('right()',100);
 }
}function left(up){
 if(up){window.clearTimeout(ID);return;}
 if(!myTable){setUp();}
 if(myCol<(myCells-1)){
 for( var x = 0; x <noRows; x++ ) {
 myTable.rows[x].cells[myCol].style.display="none";
 }
 myCol++
 ID = window.setTimeout('left()',100);
 }
}function down(up){
 if(up){window.clearTimeout(ID);return;}
 if(!myTable){setUp();}
 if(myRow<(noRows-1)){
 myTable.rows[myRow].style.display="none";
 myRow++ ;
 ID = window.setTimeout('down()',100);
 } 
}function upp(up){
 if(up){window.clearTimeout(ID);return;}
 if(!myTable){setUp();}
 if(myRow<=noRows){
 myTable.rows[myRow].style.display="";
 if(myRow> 1){myRow--;}
 ID = window.setTimeout('upp()',100);
 } 
}

在这里看到一个工作Freeze演示

以下是使用自定义水平和verticle滚动条在可以滚动 div 内更好布局的更新版本: 演示工具。


FREE  PAN  Excel  PANE  冻结  panes  
相关文章