帶有固定標題的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>