Asp.net Lock/Freeze Multi Row Gridview Headers

Question

Я задал задачу заморозить заголовки на моем Gridview. Gridview также должен быть прокручиваемым. Я выполнил функцию прокрутки. Я не могу получить функцию заголовка блокировки. Я пробовал различные решения, включая стили CSS и плагины JQuery, но ничего не работает. Я думаю, что самый большой из них - мой Gridview имеет многострочный заголовок. Я определяю заголовок одной строки в aspx, тогда я создал заголовок второй строки в событии привязки данных строки Gridview. Любые полезные решения?

Код Ниже

ASPX

<div style="height: 95%; overflow-y: auto;"> 
        <asp:GridView ID="markdownGrid" runat="server" AutoGenerateColumns="false" BackColor="White" RowStyle-Height="15" HeaderStyle-Height="20" HeaderStyle-Font-Size="small" HeaderStyle-Font-Names="Calibri" RowStyle-Font-Names="Calibri" RowStyle-Font-Size="13px" BorderWidth="0" OnRowDataBound="markdownGrid_RowDataBound" AllowPaging="false" OnPageIndexChanging="markdownGrid_PageIndexChanging" GridLines="Both" > 
         <RowStyle BackColor="#E5F2FF" CssClass="rowHeight" /> 
         <AlternatingRowStyle BackColor="White" /> 
         <Columns> 
          <asp:BoundField DataField="Row Header" HeaderText="" ItemStyle-Width="9%" ItemStyle-HorizontalAlign="Left" ItemStyle-Font-Bold="true" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="Stores Clearance Actual" 
           HeaderText="Clearance Actual" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="Stores Clearance Estimate" HeaderText="Clearance Estimate" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="Stores Clearance Total" HeaderText="Clearance Total" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="Stores POS Actual" HeaderText="POS Actual" ItemStyle-Width="4%" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="Stores MD Total" HeaderText="MD Total" ItemStyle-Width="4%" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="Stores Next Month Clearance Estimate" ItemStyle-Width="4%" 
           HeaderText="Next Month Clearance Estimate" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="Stores blank" ItemStyle-Width="0.5%" ItemStyle-BackColor="#F8F8F8" ItemStyle-BorderStyle="None" HeaderStyle-BorderStyle="None" HeaderStyle-BackColor="#F8F8F8" /> 

          <asp:BoundField DataField="COM Clearance Actual" 
           HeaderText="Clearance Actual" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="COM Clearance Estimate" HeaderText="Clearance Estimate" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="COM Clearance Total" HeaderText="Clearance Total" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="COM POS Actual" HeaderText="POS Actual" ItemStyle-Width="4%" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="COM MD Total" HeaderText="MD Total" ItemStyle-Width="4%" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="COM Next Month Clearance Estimate" ItemStyle-Width="4%" 
           HeaderText="Next Month Clearance Estimate" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="COM blank" ItemStyle-Width="0.5%" ItemStyle-BackColor="#F8F8F8" ItemStyle-BorderStyle="None" HeaderStyle-BorderStyle="None" HeaderStyle-BackColor="#F8F8F8" /> 

          <asp:BoundField DataField="Company Clearance Actual" 
           HeaderText="Clearance Actual" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="Company Clearance Estimate" HeaderText="Clearance Estimate" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="Company Clearance Total" HeaderText="Clearance Total" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="Company POS Actual" HeaderText="POS Actual" ItemStyle-Width="4%" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="Company Other Actual" HeaderText="Other-MDA" ItemStyle-Width="5%" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="Company MD Total" HeaderText="MD Total" ItemStyle-Width="4%" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="Company LY Clearance" HeaderText="LY Clearance EOW" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
          <asp:BoundField DataField="Company Next Month Clearance Estimate" ItemStyle-Width="4%" HeaderText="Next Month Clearance Estimate" DataFormatString="{0:##,###,##0}" ItemStyle-HorizontalAlign="Right" HeaderStyle-BorderWidth="1" ItemStyle-BorderWidth="1" /> 
         </Columns> 
        </asp:GridView> 
       </div> 

код за

protected void markupGrid_RowDataBound(object sender, GridViewRowEventArgs e) 
    { 
     if (e.Row.RowType == DataControlRowType.Header) 
     { 
      if (dateSelection.Text != null) 
      { 
       e.Row.Cells[0].Text = dateSelection.Text; 
      } 

      GridViewRow headerow = new GridViewRow(0, 0, DataControlRowType.Header, 
                 DataControlRowState.Insert); 
      TableCell headercell = new TableCell() 
      { 
       // First blank cell      
       Text = "PTD", 
       ForeColor = Color.Red, 
       HorizontalAlign = HorizontalAlign.Center, 
       BorderWidth = 1, 
       BorderColor = Color.Black, 
       CssClass = "gridSectionHeaders" 
      }; 
      headerow.Cells.Add(headercell); 

      headercell = new TableCell() 
      { 
       // TOTAL SELLING LOCATIONS header 
       ColumnSpan = 2, 
       Text = "TOTAL SELLING LOCATIONS", 
       HorizontalAlign = HorizontalAlign.Center, 
       BorderWidth = 1, 
       CssClass = "gridSectionHeaders" 
      }; 
      headerow.Cells.Add(headercell); 

      headercell = new TableCell() 
      { 
       // Second blank cell 
       BackColor = ColorTranslator.FromHtml("#F8F8F8"), 
       BorderWidth = 0 
      }; 
      headerow.Cells.Add(headercell); 

      headercell = new TableCell() 
      { 
       // COM header 
       Text = "COM", 
       ColumnSpan = 2, 
       HorizontalAlign = HorizontalAlign.Center, 
       BorderWidth = 1, 
       CssClass = "gridSectionHeaders" 
      }; 
      headerow.Cells.Add(headercell); 

      headercell = new TableCell() 
      { 
       // Last blank cell 
       BackColor = ColorTranslator.FromHtml("#F8F8F8"), 
       BorderWidth = 0 
      }; 
      headerow.Cells.Add(headercell); 

      headercell = new TableCell() 
      { 
       // TOTAL header 
       ColumnSpan = 3, 
       Text = "TOTAL", 
       HorizontalAlign = HorizontalAlign.Center, 
       BorderWidth = 1, 
       CssClass = "gridSectionHeaders" 
      }; 

      headerow.Cells.Add(headercell); 
      headercell.Height = 20; 
      markupGrid.Controls[0].Controls.AddAt(0, headerow); 
     } 
    } 

Answer 1

Я думаю, что вы ищете this.

Вот как я использую его в своем приложении, и он работает без каких-либо проблем. Смотрите мои другие ответы here и here на SO для аналогичной задачи

<script type="text/javascript"  src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script> 
<script type="text/javascript" src="gridviewScroll.min.js"></script> 
<link href="GridviewScroll.css" rel="stylesheet" /> 

function pageLoad(sender, args) { 
    gridviewScroll(); 
} 

function gridviewScroll() { 
    gridView1 = $('#GridView1').gridviewScroll({ 
     width: 915, 
     height: 449, 
     railcolor: "#F0F0F0", 
     barcolor: "#CDCDCD", 
     barhovercolor: "#606060", 
     bgcolor: "#F0F0F0", 
     freezesize: 5, 
     arrowsize: 30, 
     varrowtopimg: "../../../images/arrowvt.png", 
     varrowbottomimg: "../../../images/arrowvb.png", 
     harrowleftimg: "../../../images/arrowhl.png", 
     harrowrightimg: "../../../images/arrowhr.png", 
     headerrowcount: 1, 
     onScrollVertical: function (delta) { 
     // store the scroll offset outside of this function in a hidden field and restore if you want to maintain vertical scroll position 
     }, 
     onScrollHorizontal: function (delta) { 
     //store the scroll offset outside of this function in a hidden field and restore if you want to maintain horizontal scroll position 
     } 
    }); 
    } 

И экран печати о том, как заголовок замороженной сетки выглядит в моем приложении