滚动时修复gridview标题

Posted 2023-02-22

【中文标题】滚动时修复gridview标题

【英文标题】：fixing gridview header while scrolling

【发布时间】：2013-08-02 03:53:46

【问题描述】：

我已经修复了 GridView 标题，当我向下滚动标题时，标题将保持不变，但问题是标题格式不正确。就像所有列标题都被缩小并且不会显示在特定列下。我尝试了很多东西，但没有任何用处。显然，标题宽度不等于列。我使用 javascript 代码进行滚动，也使用 CssClass 进行修复。

请为我找到解决方案

JavaScript 代码

 <script type = "text/javascript">
        var GridId = "<%=GridViewLeaveHistory.ClientID %>";
        var ScrollHeight = 300;
        var ScrollWidth = 300;
        window.onload = function () 
            var grid = document.getElementById(GridId);
            var gridWidth = grid.offsetWidth;
            var gridHeight = grid.offsetHeight;
            var headerCellWidths = new Array();
            for (var i = 0; i < grid.getElementsByTagName("TH").length; i++) 
                headerCellWidths[i] = grid.getElementsByTagName("TH")[i].offsetWidth;
            
            grid.parentNode.appendChild(document.createElement("div"));
            var parentDiv = grid.parentNode;

            var table = document.createElement("table");
            for (i = 0; i < grid.attributes.length; i++) 
                if (grid.attributes[i].specified && grid.attributes[i].name != "id") 
                    table.setAttribute(grid.attributes[i].name, grid.attributes[i].value);
                
            
            table.style.cssText = grid.style.cssText;
            table.style.width = gridWidth + "px";
            table.appendChild(document.createElement("tbody"));
            table.getElementsByTagName("tbody")[0].appendChild(grid.getElementsByTagName("TR")[0]);
            var cells = table.getElementsByTagName("TH");

            var gridRow = grid.getElementsByTagName("TR")[0];
            for (var i = 0; i < cells.length; i++) 
                var width;
                if (headerCellWidths[i] > gridRow.getElementsByTagName("TD")[i].offsetWidth) 
                    width = headerCellWidths[i];
                
                else 
                    width = gridRow.getElementsByTagName("TD")[i].offsetWidth;
                
                cells[i].style.width = parseInt(width - 3) + "px";
                gridRow.getElementsByTagName("TD")[i].style.width = parseInt(width - 3) + "px";
            
            parentDiv.removeChild(grid);

            var dummyHeader = document.createElement("div");
            dummyHeader.appendChild(table);
            parentDiv.appendChild(dummyHeader);
            var scrollableDiv = document.createElement("div");
            if (parseInt(gridHeight) > ScrollHeight) 
                gridWidth = parseInt(gridWidth) + 17;
            
            scrollableDiv.style.cssText = "overflow:auto;height:" + ScrollHeight + "px;width:" + gridWidth + "px" + ScrollWidth;
            scrollableDiv.appendChild(grid);
            parentDiv.appendChild(scrollableDiv);
        

Css 类

.Freezing 
     
    position: relative;  
    top: expression(this.offsetParent.scrollTop-1); 
    z-index: 10; 
    

GridView 代码

<div style="width: 810px; height: 259px;">
 <asp:GridView ID="GridViewLeaveHistory" runat="server" AllowSorting="True" 
  AutoGenerateColumns="False" BackColor="White" BorderColor="#0061C1" 
  BorderStyle="None" CaptionAlign="Bottom" EmptyDataText="No Records Found" 
  Font-Names="Verdana" Font-Size="X-Small" ForeColor="#0061C1" Height="18px" 
  OnRowCommand="GridViewLeaveHistory_RowCommand" 
  OnRowDataBound="GridViewLeaveHistory_RowDataBound" CssClass="Freezing"                                                       
  OnSelectedIndexChanged="GridViewLeaveHistory_SelectedIndexChanged"                                                      
  ShowFooter="True" ShowHeaderWhenEmpty="True" >

【参考方案1】：

    <!-- Fixed Grid header Script-->
    <script type="text/javascript">
        $(document).ready(function () 
            var gridHeader = $('#<%=GrdMWRFinal.ClientID%>').clone(true); // Here Clone Copy of Gridview with style
            $(gridHeader).find("tr:gt(0)").remove(); // Here remove all rows except first row (header row)
            $('#<%=GrdMWRFinal.ClientID%> tr th').each(function (i) 
                // Here Set Width of each th from gridview to new table(clone table) th 
                $("th:nth-child(" + (i + 1) + ")", gridHeader).css('width', ($(this).width()).toString() + "px");
            );
            $("#GHead1").append(gridHeader);
            $('#GHead1').css('position', 'top');
            $('#GHead1').css('top', $('#<%=GrdMWRFinal.ClientID%>').offset().top);
    
        );
    </script>
    <!-- Fixed Grid header Script-->


  <div id="divGridViewScroll1" style="height: 500px; overflow: scroll">
                                                                    <div class="table-responsive">

                                                                        <asp:GridView ID="grdEmpValidations" runat="server" CssClass="table table-small-font table-bordered table-striped">
                                                                            <Columns>
 </Columns>
                                                                            <HeaderStyle HorizontalAlign="Justify" VerticalAlign="Top"
                                                                                Font-Bold="true" />
                                                                            <RowStyle Font-Size="Small" Height="1" ForeColor="#000000" />
                                                                        </asp:GridView>