Ajax: Excel风格的HTML Table输入控件[二]：外部表格与水平垂直滚动条

实际效果：  [url]http://www.weiqihome.com/scotttable.jsp[/url]

 

前一节介绍了内部表格的区域划分与区域标识，这一节介绍外部表格。

 

外部表格的作用是提供水平垂直滚动条，它们分别与多个可滚动的DIV联系，并且滚动条的大小随着滚动区域的内容动态改变。

 

先介绍水平垂直滚动区域。前一节介绍了共有7个可滚动区域，它们分别是：centerHeaderBox，centerTopBox，noBufferBox，leftBufferBox，centerBufferBox，rightBufferBox，centerFooterBox；它们分别容纳着7个内部表格：centerHeaderTable，centerTopTable，noBufferTablex，leftBufferTable，centerBufferTable，rightBufferTable，centerFooterTable。

 

外部表格的构建如下：

 buildOuterTable: function() {
  this.verticalBar = Builder.node("DIV", {style:'position:relative; overflow:scroll;width:19px;'});
  this.heightDiv = document.createElement("div");
  this.heightDiv.style.width  = "1px";
  this.verticalBar.style.height=this.visibleHeight + 18;
  this.verticalBar.appendChild(this.heightDiv);
  this.verticalBar.onscroll = this.verticalScroll.bindAsEventListener(this);

  this.verticalBarBox = Builder.node("DIV", {style:'position:relative; overflow:hidden;width:20px;'});
  this.verticalBarBox.style.height=this.visibleHeight;
  this.verticalBarBox.appendChild(this.verticalBar);

  this.horizonBar = Builder.node("DIV", {style:'position:relative; overflow:scroll;height:19px;'});
  this.horizonBar.style.width = this.visibleWidth + 18;
  this.horizonBar.appendChild(this.widthDiv);
  this.horizonBar.onscroll = this.horizonScroll.bindAsEventListener(this);

  this.horizonBarBox = Builder.node("DIV", {style:'position:relative; overflow:hidden;width:20px;'});
  this.horizonBarBox.style.width=this.visibleWidth + 2
  this.horizonBarBox.appendChild(this.horizonBar);

  this.outerTable = this.buildFixedTable();
  var row = this.outerTable.insertRow();
  var cell = row.insertCell();
  cell.style.width = this.visibleWidth + 3;
  cell.appendChild(this.innerTable);
  cell = row.insertCell();
  cell.style.width = "19px";
  cell.appendChild(this.verticalBarBox);
  row = this.outerTable.insertRow();
  var cell1 = row.insertCell();
  var cell2 = row.insertCell();
  row.removeChild(cell1);
  cell2.colSpan = "2";
  cell2.appendChild(this.horizonBarBox);
 },

 

可以看出，水平垂直滚动条都有三层：外部Box、中间显示滚动条的DIV、最里面代表实际大小的DIV(另外水平部分的widthDiv在外面创建)。外部Box的style是：overflow:hidden，这样可不显示滚动条多余的部分。当滚动区域的内容即行数或列宽度改变时，只需要改变最里面的DIV的style的width或height即可。

另外请注意，水平垂直滚动条的style是overflow:scroll，这样保证即使不需要滚动时，滚动条依然在。

另外在创建内部表格的同时，也将这另外几个可滚动DIV的onscroll事件与其Scroll方法关联起来，这样任一DIV的滚动导致其他相应DIV同时一致滚动。

 

滚动实现如下：

 horizonScroll: function() {
  this.centerBufferBox.scrollLeft = this.horizonBar.scrollLeft;
  this.centerHeaderBox.scrollLeft = this.horizonBar.scrollLeft;
  if (this.topFixedRows > 0) {
   this.centerTopBox.scrollLeft = this.horizonBar.scrollLeft;
  }
  
  if (this.bottomFixedRows > 0) {
   this.centerFooterBox.scrollLeft = this.horizonBar.scrollLeft;
  }
  
 },

 verticalScroll: function() {
  this.centerBufferBox.scrollTop = this.verticalBar.scrollTop;
  this.noBufferBox.scrollTop = this.verticalBar.scrollTop;
  if (this.leftBufferBox) {
   this.leftBufferBox.scrollTop = this.verticalBar.scrollTop;
  }
  if (this.rightBufferBox) {
   this.rightBufferBox.scrollTop = this.verticalBar.scrollTop;
  }
 },

 

 centerBufferScroll: function() {
  this.verticalBar.scrollTop = this.centerBufferBox.scrollTop;
  if (this.leftBufferBox) {
   this.leftBufferBox.scrollTop = this.verticalBar.scrollTop;
  }
  if (this.rightBufferBox) {
   this.rightBufferBox.scrollTop = this.verticalBar.scrollTop;
  }
 },

 leftBufferScroll: function() {
  this.verticalBar.scrollTop = this.leftBufferBox.scrollTop;
  this.centerBufferBox.scrollTop = this.verticalBar.scrollTop;

  if (this.rightBufferBox) {
   this.rightBufferBox.scrollTop = this.verticalBar.scrollTop;
  }
 },

 rightBufferScroll: function() {
  this.verticalBar.scrollTop = this.rightBufferBox.scrollTop;
  this.centerBufferBox.scrollTop = this.verticalBar.scrollTop;

  if (this.leftBufferBox) {
   this.leftBufferBox.scrollTop = this.verticalBar.scrollTop;
  }
 },