GridView冻结列的实现.doc

GridView冻结列的实现

关于表格的冻结列（冻结标题），网上有一些现成的框架，经测试，挺好用的，如：

该框架的执行脚本为：
<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; }
#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，原因正在找，请高手帮忙看看。

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

说明：已用新的方法解决了浏览器兼容问题，相见
GirdView冻结列2

上篇文章中，初步探讨了利用改变表格中需要固定列的属性（与滚动条的位置关系）而实现的表格冻结列效果，但遗憾的是仅能支持IE，和OPERA。

事实上，各浏览器对表格的解析很不一样，在CSS代码中改变表格的位置属性本身就是不太明智的，好在那个项目使用人群极小，因此，IE only凑合也能说的过去。

后来在HJ大侠的提醒下，设想了另一种思路：将表格中需要固定的列复制到另一个表中，母表与字表的样式定义要完全一致，然后将字表的位置定义死，并覆盖母表中相关的列。母表依旧随着滚动条移动，完全不做改变。（实际上是一种视觉欺骗效果）

实现该效果的关键思路在于
1.               表格外要套两层div，内层的用于设置滚动条，外层的要相对定位，以便于新的子表位置设定；
2.               子表与母表的样式要完全一致，因此，需要实现设定好GridView的样式，运行后，查看浏览器源文件，以完全复制表格的样式（提醒新手，GridView经IIS解析后，就是普通的<table> </table>）
3.               复制后的子表位置要绝对定位，并设置z-index属性

   以下为Gridview嵌套两层div的代码：
   <div id="grid">
    <div id="gridview">
    <asp:GridView ID="GridView1" runat="server" Font-Size="9pt" CssClass="datagrid">

     <HeaderStyle Wrap="false" />
     <RowStyle Wrap="false" />  
    </asp:GridView>
    </div>
</div>
然后是CSS样式表：
<style>
         .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 auto; background:#fff; overflow:hidden;} 
         #gridview{position:relative;display:block;width:100%; background:#fff; overflow-y: hidden;overflow-x: scroll;}

    </style>

再是JS代码（用Jquery框架）：
<script type="text/javascript" src="jquery-1.3.1.js"></script>

    <script type="text/javascript">

    $(document).ready(function(){
    var d=$("<div></div>");
    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 class="datagrid" cellspacing="0" rules="all" border="1" style="font-size:9pt;border-collapse:collapse;"></table>');    /*这里的table样式是在浏览器中查看GridView解析后的表格的样式，直接复制就行！*/
         var trlist=view.find("tr");
         for(var i=0;i<trlist.length;i++){
              var tr=trlist[i];
              var newTr=$('<tr style="white-space:nowrap;"></tr>');    /*这里tr的样式也一样，但要注意的是，有时gridview会隔一行换一种样式，这里的JS代码需要做一些处理*/
              newTr.append($(tr).children(".fixed").clone());
              t.append(newTr);
         }
         d.append(t);
    });
</script>

效果图，与上文的无差，略去！