在多列的情况下，如何冻结 ASP:gridview 的（或可滚动的）标题？ [复制]

Question

我对 Asp.net 很陌生。我在项目（C#）中的 asp:gridview 中使用自定义分页。我想修复我的 gridview 标题（冻结或可滚动标题，以便用户在向下滚动到行时可以看到标题）。我在互联网上阅读了不同的解决方案，但仍然无法找出解决方案。 如果有人可以指导我将非常高兴，谢谢。

以下是我的 gridview 代码：

<div style="overflow:scroll;width:1200px; height:500px;" > 
 <asp:GridView ID="ResultGridView" runat="server" CellPadding="4" OnRowCommand="ResultGridView_OnRowCommand"  Font-Size="Small" Width="100%" ShowHeaderWhenEmpty="True" AutoGenerateColumns="False" AllowCustomPaging="True" AllowPaging="True" OnPageIndexChanging="ResultGridView_PageIndexChanging" >
     <AlternatingRowStyle BackColor="White"  HorizontalAlign="Left" Wrap="False"/>
     <EditRowStyle BackColor="#7C6F57"  CssClass="alt"/>
     <FooterStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" />
     <HeaderStyle BackColor="#1C5E55" Font-Bold="True" ForeColor="White" Wrap="false"  />
     <PagerSettings Mode="NumericFirstLast" FirstPageText="First" LastPageText="Last"/>
     <PagerStyle CssClass="gridViewPager" BackColor="#666666" ForeColor="White" HorizontalAlign="Left" Font-Size="Small" VerticalAlign="Middle" Wrap="False" />
     <RowStyle BackColor="#E3EAEB" HorizontalAlign="Left" />
     <SelectedRowStyle BackColor="#C5BBAF" Font-Bold="True" ForeColor="#333333" />
      <SortedAscendingCellStyle BackColor="#F8FAFA" />
      <SortedAscendingHeaderStyle BackColor="#246B61" />
     <SortedDescendingCellStyle BackColor="#D4DFE1" />
     <SortedDescendingHeaderStyle BackColor="#15524A" />
     <Columns>
         <asp:TemplateField ShowHeader="False">
             <ItemTemplate>
                 <asp:Button ID="DetailsButton"  title="Click this button to edit / add bioactivity information" CssClass="bt" runat="server" CausesValidation="false" CommandName="DetailsButton" Text="Edit" CommandArgument='<%# String.Format("{0}",  Eval("RowNumber")) %>' />
             </ItemTemplate>                 
         </asp:TemplateField>
         <asp:BoundField DataField="RowNumber" HeaderText="Row ID" htmlencode="false" ItemStyle-CssClass="gridView_hiddencol" HeaderStyle-CssClass="gridView_hiddencol" />                                        
         <asp:BoundField DataField="Compound_ID" HeaderText="Compound ID" htmlencode="false" />
         <asp:BoundField DataField="Compound_Name" HeaderText="Compound Name/Syn" ItemStyle-Wrap="false" htmlencode="false" />
         <asp:BoundField DataField="Target_ID" HeaderText="Target ID"  htmlencode="false" ItemStyle-Wrap="false" />
         <asp:BoundField DataField="Target_Pref_Name" HeaderText="Target Pref. Name" ItemStyle-Wrap="false"  htmlencode="false" />  <asp:BoundField DataField="PUBMED_ID"   HeaderText="PubMed ID" htmlencode="false" ItemStyle-CssClass="gridView_hiddencol" HeaderStyle-CssClass="gridView_hiddencol"/>
     </Columns>  
  </asp:GridView>
</div>

Answer 1

不是您特定网格的答案，但对于任何 table，您可以克隆 thead 并将其放在顶部：

document.addEventListener('DOMContentLoaded', function() {
  var div = document.getElementById('scroller'),
    table = div.querySelector('table'),
    newTable = table.cloneNode(true),
    tbody = newTable.querySelector('tbody'),
    cells = table.querySelectorAll('thead > tr > th');

  newTable.removeChild(tbody);

  newTable.style.position = 'absolute';
  newTable.style.top = table.getBoundingClientRect().top + 'px';
  newTable.style.left = table.getBoundingClientRect().left + 'px';

  [].forEach.call(newTable.querySelectorAll('thead > tr > th'), function(el, i) {
    el.style.width = cells[i].getBoundingClientRect().width + 'px';
  });

  div.style.width = (table.getBoundingClientRect().width + div.offsetWidth - div.clientWidth) + 'px';

  div.appendChild(newTable);
});

.grid {
  background-color: aqua;
}

.grid > thead {
  background-color: gray;
}

<div id="scroller" style='height: 100px; overflow-y: auto'>
  <table id="tablesorter-demo" class="grid" border="0" cellpadding="0" cellspacing="1">
    <thead>
      <tr>
        <th class="header headerSortDown">First Name</th>
        <th class="header">Last Name</th>
        <th class="header headerSortUp">Age</th>
        <th class="header">Total</th>
        <th class="header">Discount</th>
        <th class="header">Difference</th>
        <th class="header">Date</th>
      </tr>
    </thead>
    <tbody>
      <tr class="odd">
        <td>Bruce</td>
        <td>Almighty</td>
        <td>45</td>
        <td>$153.19</td>
        <td>44.7%</td>
        <td>+77</td>
        <td>Jan 18, 2001 9:12 AM</td>
      </tr>
      <tr class="even">
        <td>Bruce</td>
        <td>Evans</td>
        <td>22</td>
        <td>$13.19</td>
        <td>11%</td>
        <td>-100.9</td>
        <td>Jan 18, 2007 9:12 AM</td>
      </tr>
      <tr class="odd">
        <td>Bruce</td>
        <td>Evans</td>
        <td>22</td>
        <td>$13.19</td>
        <td>11%</td>
        <td>0</td>
        <td>Jan 18, 2007 9:12 AM</td>
      </tr>
      <tr class="even">
        <td>Clark</td>
        <td>Kent</td>
        <td>18</td>
        <td>$15.89</td>
        <td>44%</td>
        <td>-26</td>
        <td>Jan 12, 2003 11:14 AM</td>
      </tr>
      <tr class="odd">
        <td>John</td>
        <td>Hood</td>
        <td>33</td>
        <td>$19.99</td>
        <td>25%</td>
        <td>+12</td>
        <td>Dec 10, 2002 5:14 AM</td>
      </tr>
      <tr class="even">
        <td>Peter</td>
        <td>Parker</td>
        <td>28</td>
        <td>$9.99</td>
        <td>20.9%</td>
        <td>+12.1</td>
        <td>Jul 6, 2006 8:14 AM</td>
      </tr>
    </tbody>
  </table>
</div>

然后，您可以针对您的特定场景调整上面的代码。