Comment avoir un en-tête fixe dans une grille ?

Question

J'ai reçu cette mise en œuvre actuelle d'un ami de l'esprit. Le projet a un GridView comme indiqué ci-dessous

<div ID="divGrid" runat="server">
<asp:GridView ID="docGrid" runat="server" AutoGenerateColumns="False" GridLines="None"
    DataSourceID="pagedDatasetSourceControl" OnRowDataBound="docGrid_RowDataBound" OnSelectedIndexChanging="docGrid_SelectedIndexChanging" DataKeyNames="ID"
    CssClass="gridTable" AllowSorting="True" AllowPaging="True" meta:resourcekey="docGridResource1">
    <PagerSettings Visible="false"></PagerSettings>
    <Columns>
        ..................
    </Columns>
    <RowStyle CssClass="tableRow"></RowStyle>
    <PagerStyle VerticalAlign="Bottom" HorizontalAlign="Right"></PagerStyle>
    <AlternatingRowStyle CssClass="tableRowAlt"></AlternatingRowStyle>
</asp:GridView>
</div>

Maintenant, plus d'une (1) classe .cs utilise cette GridView, alors chaque implémentation est différente. Ainsi, "UNE" des classes .cs implémente un "scrolling" qui est illustré ci-dessous.

this.divGrid.Attributes.Add("class", "fleft scroll");
this.divGrid.Attributes.Add("style", "width:100%; height:250px;");

Mais le code ci-dessus fait également défiler l'en-tête, de sorte que lorsque je fais défiler le texte vers le bas, l'en-tête défile également. Existe-t-il un moyen de résoudre ce problème en ajoutant un "Attributs" dans mon fichier .cs pour cette classe.

Gracias

Answer 1

J'ai écrit un plug-in jQuery qui permet de fixer l'en-tête et de figer la colonne, il peut être appliqué à GridView. voir l'image :

consulter le site web : http://gridviewscroll.aspcity.idv.tw/

Navigateurs pris en charge

• Internet Explorer 7, 8 (compatibilité avec IE 9)
• Internet Explorer 9 (9.0.8112)
• Avant-première d'Internet Explorer 10 sur Windows 7
• Google Chrome(23.0.1271.64 m)
• Mozilla Firefox (16.0.2)
• Apple Safari (5.1.7)

Answer 2

Une autre solution consiste à ajouter une classe Css à l'en-tête (ShowHeader="true") :

<HeaderStyle CssClass="StickyHeader" />

Et ajoutez la css suivante

.StickyHeader th {
   position: sticky;
   top: 0
}

Il fait coller les données du tableau de la première ligne, et non de la ligne. C'est pourquoi ce n'est qu'une solution alternative, parce que la barre de défilement est lancée à partir de la ligne d'en-tête mais après avoir stylé un peu la barre de défilement, le résultat n'est pas si mauvais.