GridView 捲軸

GridView預設是沒有左右捲軸,如果資料列比較多預設的GridView就比較難看了!此時我們一般將GridView加上捲軸!

1、利用Panel控制項封裝GridView

  <asp:Panel ID="pn" runat="server" Height="200px" ScrollBars="Both" Width="400px">
           <asp:GridView ID="gv1" Width="1000px" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1">
             .......  
            </asp:GridView>

 </asp:Panel>

2、利用Div封裝GridView

<div style="overflow: scroll; position:absolute; z-index:auto; height:200px;width:300px" id="dv"> 
        <asp:GridView ID="GridView1"  Width="1000px" runat="server" AutoGenerateColumns="False" DataSourceID="ObjectDataSource1">
            <Columns>                
             .....           
            </Columns>
               <HeaderStyle CssClass="GridViewFixedHeader" BackColor= "MediumSeaGreen"  ForeColor= "White" />

        </asp:GridView>

如果要Header固定,還可以利用css控製表頭

<style type="text/css">
 .GridViewFixedHeader  
{
   position:relative ;
   table-layout:fixed;
   top:expression(this.offsetParent.scrollTop);
   z-index: 10;
  }
  .GridViewFixedHeader th{text-overflow:ellipsis;overflow:hidden;white-space: nowrap;padding:2px;}
}
</style>

在固定表頭時注意樣式控制,比如div 的position和GridViewFixedHeader的position屬性，另外GridView的
邊框可能存在白色現象，將邊線顏色和表頭背景顏色設為同一種顏色BackColor!這樣整個GridView外觀就比較好看了

3、SmartGridView控制項

部落格園http://webabcd.cnblogs.com的SmartGridView控制項對GridView擴充得十分好。捲軸也分易使用。