Ajax: Excel风格的HTML Table输入控件[一]：内部表格的区域划分与区域标识

随着Ajax技术的广泛运用，很多以前很难通过HTML实现的客户端功能，现在都可以尝试了。本人由于实际项目的需要，开发了这么一个Ajax类似Excel表格输入控件。近两个星期、超过2000余行原创JavaScript代码，现在整理出来与技术广大朋友共享。

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

首先需要说明的是，开发过程采用了许多Prototype与scriptaculous的方法和组件。

要实现上下行、左右列均可固定，只有中间行列可滚动的表格，需要将整个表格划分成16个部分，具体如下：

#	left fixed columns	scrollable columns	right fixed columns
1	top fixed rows
2	scrollable rows
3	bottom fixed rows

这16个单元格内又放置16个表格。其中又有8个单元格又要分别放在8个可滚动的DIV内。
buildFixedTable: function() {
return Builder.node("TABLE", {cellSpacing:'0', cellPadding:'0', style:'table-layout:fixed;border-collapse:collapse;margin:0;'});
},
buildRelativeDiv: function() {
return Builder.node("DIV", {style:'position:relative; overflow:hidden;'});
},
第一个function运用builder创建一个表格，注意table-layou:fixed非常重要。
第二个function运用builder创建一个可滚动的DIV，注意overflow:hidden，因为我们需要提供单独的垂直滚动条，统一负责四个垂直方向的DIV的滚动。也需要提供单独的水平滚动条，统一负责四个水平方向的DIV的滚动。

另外，我们需要给每个区域标注一下。首先，四个列区域分别为no，left，center，right；四个行区域分别为header，top，buffer，footer。这样行列组合成每个区域的标识。例如top行的四个区域的标识分别为：no-top，left-top，center-top，right-top。同时为每个行赋予相应区域的标识。

例如如果要取任一单元格所在行的数据，只需要提供区域名和所在区域的行号即可。实现如下：
getRowData: function(rowIndex, area, rowId) {
var data = new Array(0);
if (rowId == "inserted") {
data[0] = null; //important, can't be ""
} else
data[0] = rowId;
if (area == "footer") {
return data;
}
var getFunction = null;
if (this.leftFixedColumns > 0) {
getFunction = ("_get-left-" + area + "-row-data").camelize();
eval("this." + getFunction + "(rowIndex, data);");
}
getFunction = ("_get-center-" + area + "-row-data").camelize();
eval("this." + getFunction + "(rowIndex, data);");
if (this.rightFixedColumns > 0) {
getFunction = ("_get-right-" + area + "-row-data").camelize();
eval("this." + getFunction + "(rowIndex, data);");
}
return data;
},
这里利用javascript的反射机制调用相应的方法，例如_getLeftTopRowData，_getCenterTopRowData，_getRightTopRowData，_getLeftBufferRowData，_getCenterBufferRowData，_getRightBufferRowData。

同样的方法有很多，如getColCells(取得任一单元格所在列的数据)、getNoCell(取得任一单元格所在行的序号单元格)、getAdjustedColIndex(取得任一单元格所在列的全局列号)、getAdjustedRowIndex(取得任一单元格所在行的全局行号)、setRowCssClass(设置任一单元格所在行的css样式)等。