滚动时固定gridview标头的位置

Question

i want to fix my gridview header position so that at the time of vertical scroll columns headings must be seen. i have tried multiple solutions for it but not a single has worked for me. follwing is code that is mostly popular for fixing header of gridview in asp.net please sort out my problem why it is not working

csscode

<style type="text/css">

 .WrapperDiv 
    {
        width:560px;height:290px;border: 1px solid black;
    }        


   .WrapperDiv TH 
    {
        /* Needed for IE */
         position: relative;
    }

   .WrapperDiv TR 
    {
        /* Needed for IE */
        height:0px;
    }


</style>  

javascript code

<script type="text/ecmascript">


    var headerHeight = 8;


    freezeGridViewHeaderForIEAndFF('GridView2', 'WrapperDiv');


    function freezeGridViewHeaderForIEAndFF(gridViewId, wrapperDivCssClass) {
        debugger;
        var grid = document.getElementById(gridViewId);
        if (grid) {
       if (grid.style && grid.style.visibility)
            grid.style.visibility = 'hidden';


          if (grid.parentNode) {
              //Find wrapper div output by GridView
           var  div = grid.parentNode;
              if (div.tagName == "div1") {
                   div.className = wrapperDivCssClass;
                   div.style.overflow = "auto";
               }
           }

            var grid = prepareFixedHeader(grid);
            var tbody = grid.getElementsByTagName('TBODY')[0];

            //Needed for Firefox
            tbody.style.height = (div1.offsetHeight - headerHeight) + 'px';

            tbody.style.overflowX = "hidden";
            tbody.overflow = 'auto';
            tbody.overflowX = 'hidden';

            grid.style.visibility = 'visible';
        }
    }


    function prepareFixedHeader(grid) {
        //Find DOM TBODY element and  and 
        var tags = grid.getElementsByTagName('TBODY');
        if (tags != 'undefined') {
            var tbody = tags[0];

            var trs = tbody.getElementsByTagName('TR');

            if (trs != 'undefined') {
                headerHeight += trs[0].offsetHeight;

                //Remove first TR tag from it        
                var headTR = tbody.removeChild(trs[0]);

                //create a new element called THEAD
                var head = document.createElement('THEAD');
                head.appendChild(headTR);

                //add to a THEAD element instead of TR so CSS styles
                //can be applied properly in both IE and FireFox
                grid.insertBefore(head, grid.firstChild);
            }
        }

        return grid;
    }
</script>

gridview asp code

<div id="div1"style="overflow-x:hidden;overflow-y:auto;height:400px">
     <table>
    <asp:GridView ID="GridView2" style="table-layout:fixed;" Width="1000px" AutoGenerateColumns ="False" AllowSorting="true"        runat="server"                 
        CellPadding="4" ForeColor="#333333" 
        GridLines="None">
        <AlternatingRowStyle BackColor="White" />
        <Columns>
            <asp:TemplateField   HeaderText="Assembly" HeaderStyle-Font-Size="Small" >

            <ItemTemplate >
                <asp:label ID="label23" Font-Size="small"  ToolTip ="click to see assembly page" runat="server" Text='<%# bind("AsbCd") %>' >
                </asp:label>
             </ItemTemplate>
                <HeaderStyle BorderStyle="Outset" />
                <ItemStyle BorderStyle="Outset" HorizontalAlign ="center" />
             </asp:TemplateField>

            <asp:TemplateField HeaderText="AssemblyName" HeaderStyle-Font-Size="small"   >
            <ItemTemplate> 
            <asp:label ID="label24" Font-Size="Small" ToolTip ="click to see assembly page"    runat="server" Text='<%# bind("AsbNm") %>' >
                </asp:label>
                </ItemTemplate>
                <HeaderStyle BorderStyle="Outset" />
                <ItemStyle BorderStyle="Outset" HorizontalAlign="Left" />
            </asp:TemplateField>

            <asp:BoundField HeaderText="Source" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell"  >
            <HeaderStyle BorderStyle="Outset" />
            <ItemStyle BorderStyle="Outset" HorizontalAlign ="left"/>
            </asp:BoundField>

            <asp:BoundField HeaderText="Operators" DataField="operators" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell"  >
            <HeaderStyle BorderStyle="Outset" />
            <ItemStyle BorderStyle="Outset" HorizontalAlign ="left"/>
            </asp:BoundField>

            <asp:BoundField HeaderText="Hours" DataField="Days" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell"   >
            <HeaderStyle BorderStyle="Outset" />
            <ItemStyle BorderStyle="Outset" HorizontalAlign ="Right"/>
            </asp:BoundField>

            <asp:BoundField DataField="PlannedDt" HeaderText="Start Date" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell"   
                DataFormatString="{0:dd-MMM-yyyy}" HtmlEncode="false"  >
            <HeaderStyle BorderStyle="Outset" />
            <ItemStyle BorderStyle="Outset" HorizontalAlign ="Right" />
            </asp:BoundField>

            <asp:BoundField DataField="PlancedEnddt" HeaderText="End Date" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell"   
                DataFormatString="{0:dd-MMM-yyyy}" HtmlEncode="false" >
            <HeaderStyle BorderStyle="Outset" />
            <ItemStyle BorderStyle="Outset" HorizontalAlign ="Right"/>
            </asp:BoundField>

            <asp:BoundField DataField="Operator" HeaderText="Operator" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell"   >
            <HeaderStyle BorderStyle="Outset" />
            <ItemStyle BorderStyle="Outset" HorizontalAlign ="left"/>
            </asp:BoundField>

            <asp:BoundField DataField="ActualDays" HeaderText="Hours" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell"   >
            <HeaderStyle BorderStyle="Outset" />
            <ItemStyle BorderStyle="Outset" HorizontalAlign ="Right"  />
            </asp:BoundField>
            <asp:BoundField DataField="ActualStartDt" HeaderText="Start Date " ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell" 

                DataFormatString="{0:dd-MMM-yyyy}" HtmlEncode="false" >
            <HeaderStyle BorderStyle="Outset" />
            <ItemStyle BorderStyle="Outset" HorizontalAlign ="Right"  />
            </asp:BoundField>
            <asp:BoundField DataField="ActualEndDt" HeaderText="End Date" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell "     
                DataFormatString="{0:dd-MMM-yyyy}" HtmlEncode="false" >
            <HeaderStyle BorderStyle="Outset" />
            <ItemStyle BorderStyle="Outset" HorizontalAlign ="Right" />
            </asp:BoundField>
            <asp:BoundField DataField="IssuePending" HeaderText="Shortfall" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell " >
            <HeaderStyle BorderStyle="Outset" />
            <ItemStyle BorderStyle="Outset" HorizontalAlign ="Right" />
            </asp:BoundField>
            <asp:BoundField DataField="rack" HeaderText="Rack" ItemStyle-Font-Size="Small" HeaderStyle-Font-size="Small" HeaderStyle-CssClass="fixedheadercell"  >
            <HeaderStyle BorderStyle="Outset" />
            <ItemStyle BorderStyle="Outset" HorizontalAlign ="Right" />
            </asp:BoundField>

            <asp:BoundField DataField="Remark" HeaderText="Remark" ItemStyle-Font-Size="Small" HeaderStyle-Font-Size="Small" HeaderStyle-CssClass="fixedheadercell"  >
            <HeaderStyle BorderStyle="Outset" />
            <ItemStyle BorderStyle="Outset" HorizontalAlign ="Right" />
            </asp:BoundField>

        </Columns>


    </asp:GridView>
     </table>
    </div>

Answer 1

You can try to separate the header from the content and put the header outside the scrollable content.

<div>Some Page Content </div>
    //your heading goes here
    <div style="max-height: 400px; overflow: auto;">
       //your gridview goes here
    </div>
<div>Some Page Content </div>

like this

 <div style="float: left; width: 100%;">
        <table id="Table1" runat="server" cellpadding="1" border="1" style="background-color: #FFFFFF;
            border-collapse: collapse; border-color: #999999; border-style: none; border-width: 1px;
            width: 100%;">
            <tr style="background-color: #E5E5FE">
                <th style="width: 15%;">
                    Order
                </th>
                <th style="width: 15%;">
                    Column Title
                </th>
                <th style="width: 15%;">
                    DataType
                </th>

            </tr>
        </table>
    </div>
    <div style="max-height: 200px; overflow: auto; float: left; width: 100%;">
        <asp:GridView ID="GridView2" Style="table-layout: fixed;" Width="100%" AutoGenerateColumns="false"
            AllowSorting="true" runat="server" CellPadding="4" ForeColor="#333333" GridLines="both" ShowHeader="False">
            <AlternatingRowStyle BackColor="White"     />
            <Columns>
                <asp:TemplateField >
                    <ItemTemplate>
                        <asp:Label ID="lbl" runat="server" Text='Teste'>
                        </asp:Label>
                    </ItemTemplate>
                <ItemStyle Width="15%" />
                </asp:TemplateField>
                  <asp:TemplateField >
                    <ItemTemplate>
                        <asp:Label ID="lbl" runat="server" Text='Teste'>
                        </asp:Label>
                    </ItemTemplate>
                      <ItemStyle Width="15%" />

                </asp:TemplateField>
                  <asp:TemplateField >
                    <ItemTemplate>
                        <asp:Label ID="lbl" runat="server" Text='Teste'>
                        </asp:Label>
                    </ItemTemplate>
                      <ItemStyle Width="15%" />

                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>

Answer 2

这是js版本。但是在链接中，标题的宽度以像素为单位。因此，它不会随着页面缩小而缩小。

http://www.codeproject.com/Articles/61775/Grid-View-with-Fixed-Header