关于表格的冻结列(冻结标题),网上有一些现成的框架,经测试,挺好用的,如:

http://blog.darkthread.net/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:60pxborder:none; position:relative; left:0px; top:0px; background:#fcc; z-index:2; }

.gridWidth{ width:4000px;}               /*滚动条宽度与GridView一致*/

.unfixedtable-layout:fixedposition:relative; border:none; }

#grid {display:block; width:95%; margin:30px auto; overflow:hidden;} 

#total{ width:95%; margin:0 auto; overflow:auto;}

 

 

当滚动条移动的时候,需要设置unfixed的位置

<script type="text/javascript" src="jquery-1.3.1.js"></script>

   

 <script type="text/javascript">   

    $(document).ready(function(){  

        $("#total").scroll(function () {      

          var left= this.scrollLeft;

          $(".unfixed").css("left",-left);})         

    });   

</script>

至此,前台搭建工作基本完成,后台中需要编写代码,以设定需要固定的列的个数

private void fixGrid(int n)         //n为需要固定的列的个数

    {

        for (int i = 0; i < GridView1.Columns.Count; i++)

        {

            if (i < n)

            {

                GridView1.Columns[i].HeaderStyle.CssClass = "fixed";

                GridView1.Columns[i].ItemStyle.CssClass = "fixed";

 

            }

            else

            {

                GridView1.Columns[i].HeaderStyle.CssClass = "unfixed";

                GridView1.Columns[i].ItemStyle.CssClass = "unfixed";

            }

        }

    }

大工告成!【如图】

经测试,只支持IE和opera,原因正在找,请高手帮忙看看。

 

新手文章,接受老鸟骂人,但别骂我家人。

 

 

/Files/xiadongzq/ScrollTable.rar 

说明:已用新的方法解决了浏览器兼容问题,相见

http://www.cnblogs.com/xiadongzq/archive/2010/04/13/1711393.html

 

posted on 2010-04-07 15:52  爱比你武  阅读(10901)  评论(0编辑  收藏  举报