数据表格表头与首列固定的完全实现
前几天项目经理跟我说有这么个需求：一个很大的表格，垂直滑动时表头固定，水平滑动里第一、二列固定。我一想这也太难实现了，直接回复说可能实现不了，可是没过会经理发个12306网站的一个现存的实现样子，汗！我只能说那我先调研下实现的成本吧。心里想想反正客户给钱，没有什么理由不做啊。
1. 前期调研
先打开12306网站上面的那个表格，打开浏览器调试工具，发现他们好像用的是插件（dhtmlxgrid），再看了下布局，发现它们把固定的表头和列放在一个DIV里面，心里想这样的需求肯定很常见，说不定网上早有相应插件了，于是上google搜“table header fixed ”（个人比较喜欢用英文关键字搜索信息），第一条信息就是一个基于jquery的插件叫Fixed Header Table,而且还不要钱的，于是下载下来，研究它的源码，发现它的布局与12306上面的类似也是把固定的表头和列放在一个DIV，然后在此DIV里面放table，整体布局如下图所示：
通过控制单元格的宽度和高度，使整体的单元格对齐，最后监听maindiv的滑动事件，当它滑动时通过js去滑动headerdiv与columndiv的滑动。其实里面最麻烦的应该是单元格对齐问题，因为单元格宽和高会随里面的内容变化（如果你想自适应的话）。
知道实现原理后，然后对照下我实际的项目，我项目中的表格和12306中的表格有的类似，不是普通的数据表格，里面的单元格的合并，而且我项目中的表格还有分组（grounp），截个图：
里面有编辑功能，还得在行和列分别加个total，表格够复杂吧。Fixed Header Table这个插件不支持我的表格（单元格的合并），dhtmlxgrid插件很强大，但要钱，项目中本来就有jquery了，不想再引用其它框架了，自己动手，丰衣足食！
2. 具体实现
2.1 简化需求
以前的布局就是一个table，要做这种行列锁定的表格，布局肯定大改，为了简单点，我把我表格中的单元格宽度和高度固定，超出的文字用…表示，呵呵，我还是想怎么简单怎么来，这么做客户也接受。把单元格定死后，代码量会少很多。布局尽量用CSS去控制，JS只控制滑动和初始化区域大小（因为我页面是自适应的）。
2.2 html+CSS
先画个两行两列的表格，把整体布局定好，我做布局都先做整体，再做局部。先看下整体布局的html：
<table>
<thead>
<tr >
<th></th>
<th>
<div id="Headerdiv" style=" overflow: hidden"></div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td >
<div id="Columndiv" style=" overflow: hidden"></div>
</td>
<td>
<div id="maindiv" style=" overflow: scroll" onscroll="fnScroll()"></div>
</td>
</tr>
</tbody>
</table>
里面div的主要属性和事件都已经声明，接下来做thead里的两行固定列，第一个th的源代码：
<th id="firstTd " class="tdborder">
<table cellspacing="0" cellpadding="0">
<tr>
<td class="tableFirstCol txtcenter td_right td_bottom">Project</td>
<td class="tableSecondCol td_bottom">
<table cellspacing="0" cellpadding="0" class="Tamount">
<tr>
<td colspan="3" class="txtcenter td_bottom">Total</td>
</tr>
<tr>
<td class="current td_right">current</td>
<td class="scenario td_right">scenario</td>
<td class="different">different</td>
</tr>
</table>
</td>
</tr>
<tr>
<td class="tableFirstCol td_right">Total</td>
<td class="tableSecondCol ">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="current td_right"><input type="text" /></td>
<td class="scenario td_right"><input type="text" /</td>
<td class="different"><input type="text" /</td>
</tr>
</table>
</td>
</tr>
</table>
</th>
然后是第二个th里面的Headerdiv的源代码：
<div id="Headerdiv" >
<table cellspacing="0" cellpadding="0" width="1560" id="headertable" class="td_right" >
<tr >
<td class="td_left">
<table cellspacing="0" cellpadding="0" class="Tamount">
<tr>
<td colspan="3" class="txtcenter td_bottom">1999</td>
</tr>
<tr>
<td class="current td_right">current</td>
<td class="scenario td_right">scenario</td>
<td class="different">different</td>
</tr>
</table>
</td>
重复TD...
</tr>
<tr >
<td class="td_left td_top">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="current td_right"><input type="text" /></td>
<td class="scenario td_right"><input type="text" /</td>
<td class="different"><input type="text" /</td>
</tr>
</table>
</td>
重复TD...
</tr>
</table>
</div>
大家可能注意到里面对套了这么多table有异议，本人是为了站单元格对齐才出此下策，在整个页面的制作过程中单元格的边框对齐是最烦人的。
接下来展示固定列的html源码：
<div id="Columndiv" class="fixedcol">
<table cellspacing="0" cellpadding="0" >
<tr>
<td colspan="2" class="tdgroup">
group name group name group name group nam name group name group name
</td>
</tr>
<tr>
<td class="tableFirstCol">Project Name 1 </td>
<td class="tableSecondCol">
<table cellpadding="0" cellspacing="0">
<tr>
<td class="current td_right"><input type="text" /></td>
<td class="scenario td_right"><input type="text" /</td>
<td class="different"><input type="text" /</td>
</tr>
</table>
</td>
</tr>
里面class为tdgrounp的为表格的分组名，这分组名如果太长就会换行，我会在JS里面控制maindiv里对应单元格的高度，也是JS代码里唯一控制单元格的代码。
maindiv里的HTML就不粘出来了，里就就放了一个table。
3.3 javascript
接下来讲讲JS,JS 还是很简单的（基于jquery）：
$(document).ready(function () {
fnAdjustTable();
//先求页面给定的高度
var _h = $("#tablediv").height();
var _w = $("#tablediv").width();
//然后设定相关div的高度
var _head_h = $("#thead").height();
$("#maindiv").height(_h - _head_h);
$("#Columndiv").height(_h - _head_h - 18);//18是空出了相应滚动条的距离
var _clo_w = $("#Columndiv").width();
$("#Headerdiv").width(_w - _clo_w-18 );
$("#maindiv").width(_w - _clo_w);
});
function fnAdjustTable() {
//调整组名的单元格高度
$('#Columndiv .tdgroup').each(function (i) {
//不同浏览器这高度可能不一样，相关一两个像素
if ($.browser.msie) {
$("#maindiv .tdgroup:eq(" + i + ")").height($(this).height());
} else {
$("#maindiv .tdgroup:eq(" + i + ")").height($(this).height() + 1);
}
});
}
//滑动事件
function fnScroll () {
$('#Headerdiv').scrollLeft($('#maindiv').scrollLeft());
$('#Columndiv').scrollTop($('#maindiv').scrollTop());
}
