html table水平和垂直滚动条,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;

}

},