《GridView冻结列的实现.doc》由会员分享，可在线阅读，更多相关《GridView冻结列的实现.doc（5页珍藏版）》请在金锄头文库上搜索。
1、GridView冻结列的实现关于表格的冻结列（冻结标题），网上有一些现成的框架，经测试，挺好用的，如：http:/ $(function() $(#GridView1).toSuperTable( width: 640px, height: 480px, fixedCols: 2 ) .find(tr:even).addClass(altRow); );需要注意的是，该脚本未必总是好用，因为很多时候，#GridView1并不能取到GridView1，事实上，服务器控件在解析后，ID的名称都发生了变化，好在有ClientID可以追踪，可以在cs文件的pageLoad中加入以下代码，代替上句脚本：
2、stringstrScript =$(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。这两个框架用在一起的时候，问题
3、出现了，仅有IE能同时实现遮罩层和supertable的效果，其他浏览器只能二选一我JS基础一般，看他们的代码很吃力，于是就自己设想做一个具有冻结列效果的GridView。网上搜了下，实现思路大体一样：1.将GridView装在一个带有滚动条的容器中2.需要冻结的列，其定位为relative3.冻结列的左距离与滚动条的位置关联最常见的写法是.fixed position:relative;cursor:default;left: expression(this.parentElement.offsetParent.scrollLeft);但首先，这种写法并不能被所有浏览器所解析（FF好像就不行
4、），而且可固定的列在滚动条拖动时会闪烁，严重影响视觉效果！事实上，仔细想想，上述实现方法的思维是逆向的GridView的其他列实际上并没有动，反倒是需要固定的列的位置在随滚动条位置的变化而变化。于是，“该动的不动，该静的在动”，由此引发视觉效果的不和谐，为什么不能反过来呢？可以先让表格的位置固定，然后不需要的固定的列，其位置随滚动条变化而变化。思路确定，就可以开工了。先用一个容器将GridView装起来（该容器的宽度显然会小于GridView的宽度，否则，没有固定列的必要了） 再做一个滚动条：对应的样式表为：.datagridtdpadding:4px;height:20px;text-ali
5、gn:center;.datagridthpadding:8px;.fixedwidth:60px;border:none;position:relative;left:0px;top:0px;background:#fcc;z-index:2; .gridWidthwidth:4000px;/*滚动条宽度与GridView一致*/.unfixedtable-layout:fixed;position:relative;border:none; #griddisplay:block;width:95%;margin:30pxauto;overflow:hidden;#totalwidth:95
6、%;margin:0auto;overflow:auto;当滚动条移动的时候，需要设置unfixed的位置 $(document).ready(function() $(#total).scroll(function() varleft=this.scrollLeft; $(.unfixed).css(left,-left);) );至此，前台搭建工作基本完成，后台中需要编写代码，以设定需要固定的列的个数privatevoidfixGrid(intn)/n为需要固定的列的个数 for(inti = 0; i GridView1.Columns.Count; i+) if(i n) GridVi
7、ew1.Columnsi.HeaderStyle.CssClass =fixed; GridView1.Columnsi.ItemStyle.CssClass =fixed; else GridView1.Columnsi.HeaderStyle.CssClass =unfixed; GridView1.Columnsi.ItemStyle.CssClass =unfixed; 大工告成！【如图】经测试，只支持IE和opera，原因正在找，请高手帮忙看看。新手文章，接受老鸟骂人，但别骂我家人。说明：已用新的方法解决了浏览器兼容问题，相见GirdView冻结列2上篇文章中，初步探讨了利用改变表格
8、中需要固定列的属性（与滚动条的位置关系）而实现的表格冻结列效果，但遗憾的是仅能支持IE，和OPERA。http:/ only凑合也能说的过去。后来在HJ大侠的提醒下，设想了另一种思路：将表格中需要固定的列复制到另一个表中，母表与字表的样式定义要完全一致，然后将字表的位置定义死，并覆盖母表中相关的列。母表依旧随着滚动条移动，完全不做改变。（实际上是一种视觉欺骗效果）实现该效果的关键思路在于1.表格外要套两层div，内层的用于设置滚动条，外层的要相对定位，以便于新的子表位置设定；2.子表与母表的样式要完全一致，因此，需要实现设定好GridView的样式，运行后，查看浏览器源文件，以完全复制表格的样
9、式（提醒新手，GridView经IIS解析后，就是普通的 ）3.复制后的子表位置要绝对定位，并设置z-index属性以下为Gridview嵌套两层div的代码：然后是CSS样式表：.datagridtdpadding:4px;height:20px;text-align:center.fixedbackground:#fcc;z-index:2; .gridWidthwidth:4000px;.unfixedborder:none;#gridposition:relative;display:block;width:90%;margin:30pxauto;background:#fff;overflow:hidden;#gridviewposition:relative;display:block;width:100%;background:#fff;overflow-y:hidden;overflow-x:scroll;再是JS代码（用Jquery框架）： $(document).ready(function()vard=$();varheight=0;varwidth=0; d.css(position:absolute,left:0,top:0,background:#fff); $(#grid).append(d);varview=$(.datagrid);
