固定ヘッダーを持つASP.NET Gridview tablesorter

Question

私は創造的な解決策が切望されています。 私はasp.net 4.5 Webアプリケーションを持っています。ここでは、約40-50の列を持つgridviewを生成し、行は1から数千の間で変化します。

非常に大きいので、私はdivにgridviewを置き、高さとoverflow-y：scrollを設定します。

私が欲しいのは、スクロールするときにヘッダーが見えるようにすることです。

私はオンラインで回答を見つけようとしました。 最初の解決策は、ヘッダーにcssクラスを与え、位置を設定することでした：絶対、したがってヘッダーをポップアウトします。このアプローチの問題点は、ヘッダーが飛び出したときに最初の行をカバーし、行の高さを大きく設定しない限り、最初の行が表示されないことです。

最初の行の高さを大きくして、垂直方向の揃えを下に設定しようとしました。これはとてもうまくいった。 問題は、ヘッダにjquery tablesortを実装していることです。 テーブルをソートすると、巨大な高さを持つ最初の行が埋められ、残りの行は、その巨大な行によってオフセットされているため、スクランブルされます。

Iはstackoverflowので検索し、私は同じ問題について別のスレッドが見つかりました：それは、ヘッダーのための別のテーブルを作成提案ここ How Can We Have A SCROLLABLE GridView With Fixed Header?

を。これはとてもいいですが、ここでの問題は固定サイズのテーブルがないことです。列nrは変化し、行の値は変化する。だから私はメインの上に別のgridviewを作った。 ShowHeaderWhenEmpty = trueに設定しました。コードの中に列を追加しました。 問題は、列が元のgridviewと同じ幅でないことです。

OnRowDataBoundで幅を設定しようとしました。私はjqueryで試しました。何も動作しません。 元のグリッドビューのデータを追加して行を非表示にするだけで動作します。しかし、私はそれらを隠すことができますか？ display：noneを使用すると、ヘッダーの幅はデータが表示されないように戻ります。私は不透明で行を隠すことができました：0.0

ここでの問題は、ページの読み込みに時間がかかり、非常に遅く、正しくレンダリングされないことです。

すべてのデータを追加するのではなく、1行追加しました。この行では、各セルについて、その列に最長の文字列を追加しました。このメソッドは最も効果的でしたが、問題は現在、2番目のグリッドビューの列の一部が元のグリッドビューに揃っていないことです。

なぜですか？私の推測では、一部のセルで折り返しが有効になっていて、その最長の文字列が折り返されたときに、同じ行が折り返されて列の幅に影響する可能性があります。

私は次にどこを見なければならないのか分かりません。だから誰かが私が試みるかもしれないアイデアを持っているか、あるいは私が試した方法のいくつかが働かない理由が私に教えてください。

UPDATE：私はすでにjqueryのtablesorterプラグインを使用していますので、

だから私は、考えていた、私はヘッダが固定持っているウィジェット・スクロールを使用するように試みることができます。 私はこのページを見つけました：https://mottie.github.io/tablesorter/docs/example-widget-scroller.htmlしかし、私はscrollerを有効にすることはできませんでした。 現在のテーブル・バージョン：TableSorter（FORK）v2.28。

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> 

この絵の何が問題になっている：15

私のコードはこれですか？なぜスクロールがアクティブではないのですか？ griviewにcolgroupsがないので私は考えていますか？私はtheadとやっているように、私はそれらを追加する必要がありますか？

ごめんなさい。

<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です：

Answer 1

私のソリューションは、ScrollableTablePluginのアドオンを使用していた私が正しくundertand場合

<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>