1、GridView 冻结列的实现关于表格的冻结列（冻结标题），网上有一些现成的框架，经测试，挺好用的，如：http:/ $(“#GridView1“).toSuperTable( width: “640px“, height: “480px“, fixedCols: 2 ).find(“tr:even“).addClass(“altRow“););需要注意的是，该脚本未必总是好用，因为很多时候，“#GridView1 并不能取到 GridView1，事实上，服务器控件在解析后，ID的名称都发生了变化，好在有 ClientID可以追踪，可以在 cs文件的 pageLoad中加入以下代码，代替上句脚
2、本：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_5
3、4。这两个框架用在一起的时候，问题出现了，仅有 IE能同时实现遮罩层和 supertable的效果，其他浏览器只能二选一我 JS基础一般，看他们的代码很吃力，于是就自己设想做一个具有冻结列效果的 GridView。网上搜了下，实现思路大体一样：1. 将 GridView装在一个带有滚动条的容器中2. 需要冻结的列，其定位为 relative3. 冻结列的左距离与滚动条的位置关联最常见的写法是.fixed position:relative;cursor:default;left: expression(this.parentElement.offsetParent.scrollLeft);但首
4、先，这种写法并不能被所有浏览器所解析（FF 好像就不行），而且可固定的列在滚动条拖动时会闪烁，严重影响视觉效果！事实上，仔细想想，上述实现方法的思维是逆向的GridView 的其他列实际上并没有动，反倒是需要固定的列的位置在随滚动条位置的变化而变化。于是，“该动的不动，该静的在动”，由此引发视觉效果的不和谐，为什么不能反过来呢？可以先让表格的位置固定，然后不需要的固定的列，其位置随滚动条变化而变化。思路确定，就可以开工了。先用一个容器将 GridView装起来（该容器的宽度显然会小于 GridView的宽度，否则，没有固定列的必要了）再做一个滚动条：对应的样式表为：.datagrid td p
5、adding:4px; height:20px; text-align:center;.datagrid th padding:8px;.fixedwidth: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; #grid display:block; width:9
6、5%; margin:30px auto; overflow:hidden; #total width:95%; margin:0 auto; overflow:auto;当滚动条移动的时候，需要设置 unfixed的位置$(document).ready(function() $(“#total“).scroll(function () var left= this.scrollLeft;$(“.unfixed“).css(“left“,-left);) ); 至此，前台搭建工作基本完成，后台中需要编写代码，以设定需要固定的列的个数private void fixGrid(int n) /n
7、为需要固定的列的个数for (int i = 0; i ）3. 复制后的子表位置要绝对定位，并设置 z-index 属性以下为 Gridview 嵌套两层 div 的代码：然后是 CSS 样式表：.datagrid td padding:4px; height:20px; text-align:center.fixed background:#fcc; z-index:2; .gridWidth width:4000px; .unfixed border:none;#grid position:relative;display:block; width:90%; margin:30px aut
8、o; background:#fff; overflow:hidden; #gridviewposition:relative;display:block;width:100%; background:#fff; overflow-y: hidden;overflow-x: scroll;再是 JS 代码（用 Jquery 框架）：$(document).ready(function()var d=$(“);var height=0;var width=0;d.css(position:“absolute“,left:“0“,top:“0“,background:“#fff“);$(“#grid“).append(d);var view=$(“.datagrid“);var t=$(); /*这里的 table样式是在浏览器中查看 GridView解析后的表格的样式，直接复制就行！*/var trlist=view.find(“tr“);for(var i=0;i); /*这里 tr的样式也一样，但要注意的是，有时gridview会隔一行换一种样式，这里的 JS代码需要做一些处理*/newTr.append($(tr).children(“.fixed“).clone();t.append(newTr);d.append(t););效果图，与上文的无差，略去！
