带有固定标题的ASP.NET Gridview tablesorter

Question

我迫切需要一个创造性的解决方案。 我有一个asp.net 4.5网络应用程序，在那里我生成了约40-50列的gridview，行数在1到几千之间不等。

因为它是如此之大，我把GridView控件在一个div，设置高度和溢出-Y：滚动。

我想要的是能够看到标题的时候我滚动。

我试着在网上找到答案。 第一个解决方案是给头一个CSS类，并设置位置：绝对，从而弹出头。这种方法的问题是，当标题弹出时，它会覆盖第一行，除非我将行的高度设置得很大，否则我看不到第一行。

我试图使只有第一行的高度更大，设置垂直对齐上下。这工作非常好。 问题是我已经在头上实现了jquery tablesort。 当我对表格排序时，第一行有一个很大的高度，会被埋起来，其余的行会因为它们被这个巨大的行所抵消而加扰。

我搜索了计算器，我发现了大约同样的问题另一个线程： How Can We Have A SCROLLABLE GridView With Fixed Header?

这建议的报头创建另一个表。这非常好，但这里的问题是我没有固定大小的表格。列nr不同，行值也不相同。所以我做了另一个GridView的主要之一。 我设置了ShowHeaderWhenEmpty = true。我在后面的代码中添加了列。 现在的问题是，列与原始gridview的宽度不一样。

我试图设置在OnRowDataBound宽度。我试着用jQuery。什么都没有 唯一可行的是如果我添加原始gridview的数据并隐藏行。但我可以隐藏它们吗？如果我使用display：none，那么标题宽度会返回，因为它甚至不会看到数据。我设法隐藏与不透明的行：0.0

这里的问题是，该网页需要很长的时间来加载，这是非常缓慢的，它甚至不恰当地渲染。

因此，而不是将所有的数据，我尝试添加一行。在这一行中，对于每个单元格，我在该列上添加了最长的字符串。这种方法效果最好，但现在的问题是，第二个gridview中的某些列与原始的gridview不一致。

为什么？我最好的猜测是某些单元格已启用换行，并且当最长的字符串换行时，它不包含与可能影响列宽度的其他行相同的换行。

现在我不知道接下来要看的地方。因此，如果有人对我可能尝试的方法有所了解，或者为什么我尝试过某些方法无效，请告诉我。

UPDATE：

所以我在想，既然我已经使用jQuery tablesorter插件，我可以尝试使用窗口小部件卷轴有头固定。 我发现此页面：https://mottie.github.io/tablesorter/docs/example-widget-scroller.html，但我没有设法启用滚动。 当前tablesorter版本：TableSorter（FORK）v2.28。15

我的代码是这样的：

HTML

<div id="wrapper"> 
        <asp:GridView ID="OnlineSearchGridView" runat="server" CssClass="tablesorter hover-highlight tablesorter-scroller tablesorter-scroller-table" Visible="false" EnableSortingAndPagingCallbacks="false" AutoGenerateColumns="true" OnRowDataBound="OnlineSearchGridView_RowDataBound" Height="50px" CellPadding="5" Font-Names="Arial" Font-Size="9pt"> 
         <EditRowStyle Font-Names="Arial" Font-Size="9pt" /> 
         <HeaderStyle BackColor="#666666" BorderColor="Black" Font-Names="Arial" Font-Size="9pt" ForeColor="White"/> 
         <RowStyle BorderStyle="Solid" Font-Names="Arial" Font-Size="9pt" BorderColor="Black" BorderWidth="1px" HorizontalAlign="Center"/> 
        </asp:GridView> 
       </div> 

JS

jQuery.fn.insertTHead = function (selection) 
       { 
        return this.each(function() 
        { 
         if (jQuery('thead', this).length == 0) 
          jQuery("<thead></thead>").prependTo(this).append(jQuery(selection, this)) 
        }) 
       } 

$(document).ready(function() 
       { 
        $("table") 
         .insertTHead("tr:first")//Calling the jquery function that will insert the thead after postback. 
         .tablesorter({ 
          widgets: ['scroller'], 
          widgetOptions: 
          { 
           scroller_height: 300, 
           scroller_upAfterSort: true, 
           scroller_jumpToHeader: true, 
           scroller_barWidth: null 
          } 
         }) 
       }); 

外部文件

<link rel="stylesheet" type="text/css" href="css/tablesort_style.css"/> 
<script type="text/javascript" src="Scripts/jquery-latest.js"></script> 
<script type="text/javascript" src="Scripts/jquery.tablesorter.js"></script> 
<script type="text/javascript" src="Scripts/jquery.tablesorter.widgets.js"></script> 

什么是不对的图片？为什么滚动条不活动？ 我在想，因为griview没有colgroups？我是否需要追加它们，就像我在使用thead一样？

对不起，很长的职位。

Answer 1

我的解决办法是使用ScrollableTablePlugin插件：

<script src="js/ScrollableTablePlugin_1.0_min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(function() { 
     $('#<%=GridView1_resize.ClientID%>').Scrollable({ 
     ScrollHeight: 600 
    }); 
}); 

GridView1_resize是一个相当正常的GridView：

<asp:GridView ID="GridView1_resize" runat="server" AutoGenerateColumns="False" 
    CellPadding="0" DataSourceID="ObjectDataSource1" EnableTheming="false" 
    EmptyDataText="Nessun rapportino" CssClass="presenzeCol"> 
    <Columns> 
     <asp:BoundField DataField="Nome" 
      HeaderText="Cognome e Nome" SortExpression="Nome"> 
     </asp:BoundField> 
     <asp:BoundField DataField="Matricola" HeaderText="Matr." 
      SortExpression="Matricola"> 
     </asp:BoundField> 
     <asp:BoundField DataField="Email"> 
     </asp:BoundField> 
     <asp:BoundField DataField="G1" HeaderText="1" DataFormatString="{0:f}"> 
     </asp:BoundField> 
     <asp:BoundField DataField="G2" HeaderText="2" DataFormatString="{0:f}"> 
     </asp:BoundField> 
     <asp:BoundField DataField="G3" HeaderText="3" DataFormatString="{0:f}"> 
     </asp:BoundField> 
     <asp:BoundField DataField="G4" HeaderText=" 4" DataFormatString="{0:f}"> 
     </asp:BoundField> 
     <asp:BoundField DataField="G5" HeaderText="5" DataFormatString="{0:f}"> 
     </asp:BoundField> 
     <asp:BoundField DataField="G6" HeaderText="6" DataFormatString="{0:f}"> 
     </asp:BoundField> 
     <asp:BoundField DataField="G7" HeaderText="7" DataFormatString="{0:f}"> 
     </asp:BoundField> 
     <asp:BoundField DataField="G8" HeaderText="8" DataFormatString="{0:f}"> 
     </asp:BoundField> 
     <asp:BoundField DataField="G9" HeaderText="9" DataFormatString="{0:f}"> 
     </asp:BoundField> 
     <asp:BoundField DataField="G10" HeaderText="10" DataFormatString="{0:f}"> 
     </asp:BoundField> 
     <asp:BoundField DataField="G11" HeaderText="11" DataFormatString="{0:f}"> 
     </asp:BoundField> 
     <asp:BoundField DataField="G12" HeaderText="12" DataFormatString="{0:f}"> 
     </asp:BoundField> 

    </Columns> 
</asp:GridView>