GridView凍结列的实现.doc

GridView冻结列的实现 ? 关于表格的冻结列（冻结标题），网上有一些现成的框架，经测试，挺好用的，如： /blogs/darkthreadtw/archive/2009/02/17/4240.aspx 该框架的执行脚本为： script type=text/javascript ??????? $(function() { ??????????? $(#GridView1).toSuperTable({ width: 640px, height: 480px, fixedCols: 2 }) ??????????? .find(tr:even).addClass(altRow); ??????? }); /script ? 需要注意的是，该脚本未必总是好用，因为很多时候，#GridView1并不能取到GridView1，事实上，服务器控件在解析后，ID的名称都发生了变化，好在有ClientID可以追踪，可以在cs文件的pageLoad中加入以下代码，代替上句脚本： string?strScript =?$(function () {$(#?+ GridView1.ClientID +?).toSuperTable({ width: 640px , height: 480px , fixedCols: 2 }).find(tr:even).addClass(altRow);});; ScriptManager.RegisterStartupScript(this.Page,?this.GetType(),?GridView1, strScript,?true); ? 但在我的项目中，同时运用了另一个“遮罩层”的框架，就是大名鼎鼎的GreyBox_v5_54。这两个框架用在一起的时候，问题出现了，仅有IE能同时实现遮罩层和supertable的效果，其他浏览器只能二选一… 我JS基础一般，看他们的代码很吃力，于是就自己设想做一个具有冻结列效果的GridView。 ? 网上搜了下，实现思路大体一样： 1.??????将GridView装在一个带有滚动条的容器中 2.??????需要冻结的列，其定位为relative 3.??????冻结列的左距离与滚动条的位置关联 ? 最常见的写法是 .fixed { position:relative; cursor:default; left: expression(this.parentElement.offsetParent.scrollLeft);} ? 但首先，这种写法并不能被所有浏览器所解析（FF好像就不行），而且可固定的列在滚动条拖动时会闪烁，严重影响视觉效果！ ? 事实上，仔细想想，上述实现方法的思维是逆向的——GridView的其他列实际上并没有动，反倒是需要固定的列的位置在随滚动条位置的变化而变化。于是，“该动的不动，该静的在动”，由此引发视觉效果的不和谐，为什么不能反过来呢？ ? 可以先让表格的位置固定，然后不需要的固定的列，其位置随滚动条变化而变化。 思路确定，就可以开工了。 先用一个容器将GridView装起来（该容器的宽度显然会小于GridView的宽度，否则，没有固定列的必要了） div?id=grid ????? ?????asp:GridView?ID=GridView1?runat=server?CssClass=datagrid gridWidth ????? ?????HeaderStyle?BackColor=#ffcccc?/??????? ??? ???????/asp:GridView ????/div ? ? 再做一个滚动条： div?id=total?style=?overflow:auto;? ??????div?style=?height:20px;?display:block;?class=gridWidth? ???????????p/p ??????????/div ?/div ? 对应的样式表为： ? .datagrid?td?{?padding:4px;?height:20px;?text-align:center;} .datagrid?th?{padding:8px;} .fixed{width:60px;?border:none;?position:relative;?left:0px;?top:0px;?background:#fcc;?z-index:2; } .gridWidth{?width:4000px;}???????????????/*滚动条宽度与GridView一致*/ .unfixed{?table-layout:fixed;?position:relative;?border:none; } #gri