css实例:实现gridview仿excel冻结列

看代码之前,先说一说思路,关键点有三:

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>');    

         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>');   

              newTr.append($(tr).children(".fixed").clone());

              t.append(newTr);

         }

         d.append(t);

    });

</script>