zoukankan      html  css  js  c++  java
  • Freezing GridView Column Headers using Only CSS

    Recently I wrote an article describing how you could use CSS plus a GrdiView Control Adaptor to add the 'frozen column headers' feature to your GridView. 

    Live Demo (IE only) | Download

    I received the following comment from a kind reader named Mitch:

    I have also noticed that applying a skin to the gridview also seems to create TH elements for the headers. I have a simple solution that freezes the headers by doing the following:

    • apply a skin to a gridview.
    • wrap the gridview in a div or fieldset.
    • Apply a css class to the wrapper that sets the overflow to scroll and the TH position to relative. You may need to set the TR height to 0px for IE.

    I set the height of the wrapper in the local style so I can reuse the css class. I have tested this in IE6 & 7 and Firefox and it works great.

    Wow.  If this is true, it has a number of advantages over my original solution:

    1. It can be applied without using Control Adaptors - one less dependency
    2. It works with both IE and FF
    3. It is really simple!

    So I took this feedback and tried to fix up my old sample site.  I created a new site from my trusty GridView web site template and started following Mitch's advise.  First off, I created a regular GridView and placed it inside a DIV element like so.  Notice I assign the DIV to the container class.

    <div class="container" style="height:300px; 700px;">
        <asp:GridView 
            runat="server" AutoGenerateColumns="false" 
            AllowSorting="true" DataSourceID="odsCustomers" BorderWidth="0px">
            <Columns>
                <asp:BoundField HeaderText="ID" DataField="CustomerID" SortExpression="CustomerID" />
                <asp:BoundField HeaderText="Name" DataField="ContactName" SortExpression="ContactName" />
                <asp:BoundField HeaderText="Title" DataField="ContactTitle" SortExpression="ContactTitle" />
                <asp:BoundField HeaderText="Address" DataField="Address" SortExpression="Address" />
                <asp:BoundField HeaderText="City" DataField="City" SortExpression="City" />
            </Columns>
        </asp:GridView>
    </div>

    Next, I created the container css style class as Mitch suggests ...

    /* So the overflow scrolls */
    .container {overflow:auto;}
    
    /* Keep the header cells positioned as we scroll */
    .container table th {position:relative;}
    
    /* For alignment of the scroll bar */
    .container table tbody {overflow-x:hidden;} 

    Finally, I added back in the other styles that are not related to the frozen headers to spruce things up a bit.  At this point I opened IE to test it out and sure enough it works great.  The only problem is that (again) it doesn't work in FireFox.  It behaves better than my original solution in that the grid renders fine, just the header columns do not stay stationary.  Even though it isn't perfect, I figured I would pass Mitch's solution on since it seems to be hands down better than my original one.  If anyone know's how FF can be supported with pure CSS, I would be interested.

    That's it.  Enjoy!   

  • 相关阅读:
    jquery选择器[转]
    asp.net调用exe并传递参数然后关闭exe[转]
    JS操作JSON总结[转]
    Newtonsoft.Json序列化和反序列[转]
    jQuery EasyUI自定义DataGrid的Editor【转】
    【转】jquery easy UI datagrid新增一行,columns中editor下拉框之间的联动。
    jquery 表单序列化 转换json
    Jquery组合form元素为json格式,asp.net反序列化[转]
    什么是BOM头,及PHP解决办法
    PHP中去除字符串中的换行的方法
  • 原文地址:https://www.cnblogs.com/weicleer/p/2771577.html
Copyright © 2011-2022 走看看