2010-10-03 40 views
2

Comment pouvons-nous avoir un GridView SCROLLABLE avec en-tête fixe ??? (en vs 2008 - asp.net avec C#)Comment pouvons-nous avoir un GridView SCROLLABLE avec en-tête fixe?

En-tête fixe est mon problème! J'ai testé plusieurs façons de le faire et de voir des démos en direct, mais cela n'a pas fonctionné.

pouvez-vous me montrer un moyen simple 4 de le faire avec un exemple?

+0

Pourquoi moyens avez-vous essayé? CSS? Envelopper le GridView dans un panneau/div? – TheGeekYouNeed

+0

J'ai essayé div et le panneau et la barre de défilement fonctionne parfaitement ... Mais mon problème est à propos de l'en-tête fixe ... lorsque vous faites défiler la grille pour que l'en-tête disparaisse, mais je ne le veux pas. comment puis-je résoudre ce problème avec css? – LostLord

+0

est-il une idée sur l'en-tête fixe? – LostLord

Répondre

0

Ce billet de blog peut vous aider:

http://www.dotnetcurry.com/ShowArticle.aspx?ID=255&AspxAutoDetectCookieSupport=1

Il a trouvé un moyen de créer des en-têtes et pieds de page gridview fixes en utilisant un peu de jQuery. Je n'ai pas essayé cela moi-même, mais à en juger par les commentaires, cela fonctionne pour beaucoup de gens.

+0

salut mon cher ami/j'ai vu votre lien/mais je ne pouvais pas trouver la barre de défilement dans son projet ...! – LostLord

1

deux tables, une pour l'en-tête et une pour le contenu. Le seul problème est que vous devez définir des largeurs spécifiques pour chaque colonne.

<style> 
    .tbl th { border: 1px solid black; background:#DDD; } 
    .tbl td { border: 1px solid black; border-top:none } 
    .scroll { height:80px; overflow-y:auto } 
</style> 

<table class="tbl"> 
    <colgroup> 
     <col style="width:100px" /> 
     <col style="width:150px" /> 
    </colgroup> 
    <tr> 
     <th>header1</th> 
     <th>header2</th> 
    </tr> 
</table> 

<div class="scroll"> 
    <table class="tbl"> 
     <colgroup> 
      <!-- same as before --> 
      <col style="width:100px" /> 
      <col style="width:150px" /> 
     </colgroup> 
     <tr><td>....</td><td>...</td></tr> 
     <tr><td>....</td><td>...</td></tr> 
     <tr><td>....</td><td>...</td></tr> 
     <tr><td>....</td><td>...</td></tr> 
     <tr><td>....</td><td>...</td></tr> 
     <tr><td>....</td><td>...</td></tr> 
     <tr><td>....</td><td>...</td></tr> 
     <tr><td>....</td><td>...</td></tr> 
     <tr><td>....</td><td>...</td></tr> 
    </table> 
<div> 
​