Fixe-Têtes de Colonne Pour ASP.NET Gridview
J'ai un ASP.NET Panneau qui a un gridview à l'intérieur de celui-ci. Ci-dessous est le balisage pour elle:
<asp:Panel runat="server" ID="searchResultsPanel" CssClass="datagrid" ClientIDMode="Static" style="display:none; max-height:500px; max-width:700px; overflow:auto;" >
<asp:GridView runat="server" ID="gridMemberInfo" AutoGenerateColumns="false" EmptyDataText="No Members Were Found." OnRowCommand="Command_SearchGrid" ShowHeader="true" ShowHeaderWhenEmpty="true" >
<PagerSettings Visible="false" />
<AlternatingRowStyle CssClass="alt" />
<Columns>
<asp:ButtonField ButtonType="Link" Text="Select" CommandName="SelectRow" />
<asp:BoundField HeaderText="PMI" DataField="PMI" />
<asp:BoundField HeaderText="Product" DataField="Product" ItemStyle-Width="110px" />
<asp:BoundField HeaderText="County" DataField="County" />
<asp:BoundField HeaderText="Last Name" DataField="LastName" />
<asp:BoundField HeaderText="First Name" DataField="FirstName" />
<asp:BoundField HeaderText="Currently Enrolled" DataField="CurrentlyEnrolled" ItemStyle-Width="50px" />
</Columns>
</asp:GridView>
</asp:Panel>
J'ai le code CSS suivant pour le groupe et gridview:
.datagrid table
{
border-collapse: collapse;
text-align: left;
width: 100%;
}
.datagrid
{
font: normal 12px/150% Arial, Helvetica, sans-serif;
background: #fff;
overflow: hidden;
border: 2px solid #006699;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.datagrid table td, .datagrid table th
{
padding: 3px 10px;
}
.datagrid table thead th
{
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #00A2F2), color-stop(1, #002C42) );
background:-moz-linear-gradient( center top, #00A2F2 5%, #002C42 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00A2F2', endColorstr='#002C42');
background-color:#00A2F2;
color:#FFFFFF;
font-size: 12px;
font-weight: bold;
border: none;
}
.datagrid table thead th:first-child
{
border: 3px;
}
.datagrid table tbody td
{
color: #00496B;
font-size: 12px;
font-weight: normal;
}
.datagrid table tbody .alt td
{
background: #E1EEF4;
color: #00496B;
}
.datagrid table tbody td:first-child
{
border-left: none;
}
.datagrid table tbody tr:last-child td
{
border-bottom: none;
}
Pour le contrôle gridview à rendre avec éléments thead, je le fais dans le code-behind: this.gridMemberInfo.HeaderRow.TableSection = TableRowSection.TableHeader;
Depuis que j'ai le panneau de dépassement de la valeur auto, je peux faire défiler lors de la gridview a beaucoup de lignes. Ce que je voudrais faire maintenant, c'est de faire la ligne d'en-tête fixe, de sorte que je peux toujours le voir pendant le défilement. J'ai essayé de réglage position:fixed;
dans le .datagrid table thead th
classe CSS mais cela n'a pas fonctionné. J'ai essayé plusieurs autres options et pas de chance. Quelqu'un peut-il m'aider avec cela?
Vous devez vous connecter pour publier un commentaire.
Vous ne pouvez le faire que sur IE, depuis thead n'est pas considéré, il y a css interprète. vous devrez mettre en place un: wapping div qui contiendra vos en-têtes. ou utiliser ceux qui l'ont fait avant : http://www.scientificpsychic.com/blogentries/html-and-css-scrolling-table-with-fixed-heading.html
ou vous pouvez prendre un coup d'oeil à:
http://demos.devexpress.com/ASPxGridViewDemos/PagingAndScrolling/Scrolling.aspx
prises à partir de la pile réponse : Fixe GridView en-Tête de défilement horizontal et vertical dans asp.net