2008-11-24 4 views
2

Salutations!ASP.NET GridView Newbie Questions à propos de TFOOT et TH

J'apprends toujours sur le contrôle GridView et j'en ai un lié à un ObjectDataSource. Ma forme Web ressemble à ceci:

<asp:GridView ID="ourGrid" runat="server" DataSourceID="ourDataSource" onrowdatabound="ourGrid_RowDataBound" 
       HeaderStyle-CssClass="header_style" AlternatingRowStyle-CssClass="altrow_style" 
       ShowFooter="true"> 
    <columns> 
    <asp:BoundField DataField="Name" HeaderText="Full Name" /> 
    <asp:BoundField DataField="Gender" HeaderText="Gender" /> 
    <asp:BoundField DataField="BirthYear" HeaderText="Year of Birth" /> 
    <asp:BoundField DataField="JoinDate" HeaderText="Date Joined" HtmlEncode="false" DataFormatString="{0:d}" /> 
    </columns> 
</asp:GridView> 
<asp:ObjectDataSource ID="ourDataSource" runat="server" SelectMethod="GetTopUsers" TypeName="Acme.Model.OurNewObject"> 
</asp:ObjectDataSource> 

Il génère actuellement le balisage suivant:

<table cellpadding="0" cellspacing="0" summary=""> 
    <thead> 
     <tr style="header_style"> 
      <th scope="col">Full Name</th> 
      <th scope="col">Gender</th> 
      <th scope="col">Year of Birth</th> 
      <th scope="col">Date Joined</th> 
     </tr> 
    </thead> 

    <tfoot> 
     <tr> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
      <td> </td> 
     </tr> 
    </tfoot> 

    <tbody> 
     <tr> 
      <td>John Smith</td> 
      <td>Male</td> 
      <td>1967</td> 
      <td>17-6-2007</td> 
     </tr> 
     <tr class="AspNet-GridView-Alternate altrow_style"> 
      <td>Mary Kay</td> 
      <td>Female</td> 
      <td>1972</td> 
      <td>15-11-2007</td> 
     </tr> 
     <tr> 
      <td>Bill Jones</td> 
      <td>Male</td> 
      <td>1970</td> 
      <td>23-2-2007</td> 
     </tr> 
    </tbody> 
</table> 

Il y a quelques éléments HTML que je voudrais ajouter à la balise de table que ce contrôle GridView va générer. Pour commencer, j'ai besoin TFOOT pour ressembler à ceci:

<tfoot> 
    <tr> 
     <td colspan="4"> 
      <div> 
       <a class="footerlink_style" title="Newest Members" href="#">Newest Members</a> 
       <a class="footerlink_style" title="Top Posters" href="#">Top Posters</a> 
      </div> 
     </td> 
    </tr> 
</tfoot> 

Les liens ne contiennent des informations databound, mais seront probablement des contrôles Hyperlien. Y a-t-il un moyen de le spécifier au moment du design?

De même, pour le THEAD, est-il possible de spécifier des styles séparés pour chaque en-tête de colonne comme ceci dans le GridView?

<thead> 
    <tr style="header_style"> 
     <th scope="col" style="col1_style">Full Name</th> 
     <th scope="col" style="col2_style">Gender</th> 
     <th scope="col" style="col3_style">Year of Birth</th> 
     <th scope="col" style="col4_style">Date Joined</th> 
    </tr> 
</thead> 

Enfin, est-il possible de spécifier l'attribut de résumé de la table comme ceci?

<table cellpadding="0" cellspacing="0" summary="Here is a list of users"> 

Merci d'avance.

+0

J'ai ajouté un exemple de travail complet sur une seule page. HTH. – Kev

+0

Merci pour les pastebins, je vais jeter un coup d'oeil plus tard aujourd'hui quand je reçois un bon bloc de temps libre. – Kev

Répondre

-1

Le contenu du pied de page devra être généré sur le serveur de données. Définissez un gestionnaire pour RowDataBound. La logique devrait ressembler à ceci:

if (e.Row.Type == DataControlRowType.Footer) 
{ 
// Do Work 
} 

Pour spécifier le style différent pour quelque chose d'en-tête comme celui-ci fera:

<Columns> 
    <asp:BoundField DataField="PrimaryKey" HeaderText="TheKey"> 
    <headerstyle cssclass="Header1" /> 
    </asp:BoundField> 
    <asp:BoundField DataField="Value" HeaderText="AValue"> 
    <HeaderStyle cssclass="Header2" /> 
    </asp:BoundField> 
    <%-- ... --%> 
</Columns> 

Pour la partie sommaire, vous pouvez simplement avoir que dans la déclaration du Contrôle GridView. En fonction de votre configuration de validation, il est possible que Visual Studio se présente à vous, mais il affichera.

+0

J'ai essayé: et Mais aucun ne semble fonctionner pour moi. – Bullines

+0

L'ajout de texte récapitulatif entraîne toujours

Bullines

1

TFOOT Personnalisation:

Le pied de page par défaut toujours à créer le même nombre de cellules que le reste de la gridview. Vous pouvez remplacer ce dans le code en ajoutant:

protected void OurGrid_RowCreated(object sender, GridViewRowEventArgs e) 
{ 
    if(e.Row.RowType == DataControlRowType.Footer) 
    { 
     int colSpan = e.Row.Cells.Count; 

     for(int i = (e.Row.Cells.Count - 1); i >= 1; i -= 1) 
     { 
      e.Row.Cells.RemoveAt(i); 
      e.Row.Cells[0].ColumnSpan = colSpan; 
     } 

     HtmlAnchor link1 = new HtmlAnchor(); 
     link1.HRef = "#"; 
     link1.InnerText = "Newest Members"; 

     HtmlAnchor link2 = new HtmlAnchor(); 
     link2.HRef = "#"; 
     link2.InnerText = "Top Posters"; 

     // Add a non-breaking space...remove the space between & and nbsp; 
     // I just can't seem to get it to render in 
     LiteralControl space = new LiteralControl("& nbsp;"); 

     Panel p = new Panel(); 
     p.Controls.Add(link1); 
     p.Controls.Add(space); 
     p.Controls.Add(link2); 

     e.Row.Cells[0].Controls.Add(p); 
    } 
} 

... et ajoutez l'attribut onrowcreated au contrôle du serveur:

<asp:GridView ID="ourGrid" onrowcreated="OurGrid_RowCreated" ... 

THEAD styles:

Vous pouvez spécifier l'en-tête css class pour chaque colonne de la classe 'headerstyle-cssclass' pour chaque champ lié.Par exemple:

<asp:BoundField headerstyle-cssclass="col1_style1" DataField="Name" HeaderText="Full Name" />  
<asp:BoundField headerstyle-cssclass="col1_style2" DataField="Gender" HeaderText="Gender" /> 

Tableau Résumé:

il suffit d'ajouter l'attribut résumé à l'griview:

<asp:GridView ID="ourGrid" summary="blah" ... 

Mettre tous ensemble:

<%@ Page Language="C#" %> 
<%@ Import Namespace="System.Data"%> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<script runat="server"> 
    protected void Page_Load(object sender, EventArgs e) 
    { 
     DataSet ds = CreateDataSet(); 
     this.gv.DataSource = ds.Tables[0]; 

     this.gv.DataBind(); 
     this.gv.HeaderRow.TableSection = TableRowSection.TableHeader; 
     this.gv.FooterRow.TableSection = TableRowSection.TableFooter; 
    } 

    protected void OurGrid_RowCreated(object sender, GridViewRowEventArgs e) 
    { 
     if (e.Row.RowType == DataControlRowType.Footer) 
     { 
      int colSpan = e.Row.Cells.Count; 

      for (int i = (e.Row.Cells.Count - 1); i >= 1; i -= 1) 
      { 
       e.Row.Cells.RemoveAt(i); 
       e.Row.Cells[0].ColumnSpan = colSpan; 
      } 

      HtmlAnchor link1 = new HtmlAnchor(); 
      link1.HRef = "#"; 
      link1.InnerText = "Newest Members"; 

      HtmlAnchor link2 = new HtmlAnchor(); 
      link2.HRef = "#"; 
      link2.InnerText = "Top Posters"; 

      LiteralControl l = new LiteralControl("&nbsp;"); 

      Panel p = new Panel(); 
      p.Controls.Add(link1); 
      p.Controls.Add(l); 
      p.Controls.Add(link2); 

      e.Row.Cells[0].Controls.Add(p); 

     } 
    } 

    private DataSet CreateDataSet() 
    { 
     DataTable table = new DataTable("tblLinks"); 
     DataColumn col; 
     DataRow row; 

     col = new DataColumn(); 
     col.DataType = Type.GetType("System.Int32"); 
     col.ColumnName = "ID"; 
     col.ReadOnly = true; 
     col.Unique = true; 
     table.Columns.Add(col); 

     col = new DataColumn(); 
     col.DataType = Type.GetType("System.DateTime"); 
     col.ColumnName = "Date"; 
     col.ReadOnly = true; 
     col.Unique = false; 
     table.Columns.Add(col); 

     col = new DataColumn(); 
     col.DataType = Type.GetType("System.String"); 
     col.ColumnName = "Url"; 
     col.ReadOnly = true; 
     col.Unique = false; 
     table.Columns.Add(col); 

     DataColumn[] primaryKeysColumns = new DataColumn[1]; 
     primaryKeysColumns[0] = table.Columns["ID"]; 
     table.PrimaryKey = primaryKeysColumns; 

     DataSet ds = new DataSet(); 
     ds.Tables.Add(table); 

     row = table.NewRow(); 
     row["ID"] = 1; 
     row["Date"] = new DateTime(2008, 11, 1); 
     row["Url"] = "www.bbc.co.uk/newsitem1.html"; 
     table.Rows.Add(row); 

     row = table.NewRow(); 
     row["ID"] = 2; 
     row["Date"] = new DateTime(2008, 11, 1); 
     row["Url"] = "www.bbc.co.uk/newsitem2.html"; 
     table.Rows.Add(row); 

     return ds; 
    } 
</script> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <style type="text/css"> 
    .red 
    { 
     color: red; 
    } 
    .olive 
    { 
     color:Olive; 
    } 
    .teal 
    { 
     color:Teal; 
    } 
    </style> 
</head> 
<body> 
    <form id="form1" runat="server"> 
    <div> 
     <asp:gridview 
     id="gv" 
     autogeneratecolumns="false" 
     showheader="true" 
     showfooter="true" 
     summary="Here is the news!" 
     caption="The Caption" 
     captionalign="Top" 
     alternatingrowstyle-cssclass="alt_row" 
     useaccessibleheader="true" 
     onrowcreated="OurGrid_RowCreated" 
     runat="server"> 
     <columns> 
      <asp:boundfield 
       headertext="ID" 
       headerstyle-cssclass="olive" 
       datafield="id" /> 
      <asp:hyperlinkfield 
       headertext="Link" 
       headerstyle-cssclass="red" 
       datanavigateurlfields="Url" 
       datanavigateurlformatstring="http://{0}" 
       datatextfield="Url" 
       datatextformatstring="http://{0}" /> 
      <asp:boundfield 
       headertext="Date" 
       headerstyle-cssclass="teal" 
       datafield="Date"/> 
     </columns> 
    </asp:gridview> 
    </div> 
    </form> 
</body> 
</html> 

Le produit ci-dessus le code HTML suivant:

<table cellspacing="0" 
     rules="all" 
     summary="Here is the news!" 
     border="1" 
     id="gv" 
     style="border-collapse:collapse;"> 

    <caption align="Top"> 
     The Caption 
    </caption> 
    <thead> 
     <tr> 
      <th class="olive" scope="col">ID</th> 
      <th class="red" scope="col">Link</th> 
      <th class="teal" scope="col">Date</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td>1</td> 
      <td> 
       <a href="http://www.bbc.co.uk/newsitem1.html"> 
        http://www.bbc.co.uk/newsitem1.html 
       </a> 
      </td> 
      <td>01/11/2008 00:00:00</td> 
     </tr> 
     <tr class="alt_row"> 
      <td>2</td> 
      <td> 
       <a href="http://www.bbc.co.uk/newsitem2.html"> 
        http://www.bbc.co.uk/newsitem2.html 
       </a> 
      </td> 
      <td>01/11/2008 00:00:00</td> 
     </tr> 
    </tbody> 
    <tfoot> 
     <tr> 
      <td colspan="3"> 
       <div> 
        <a href="#">Newest Members</a>&nbsp;<a href="#">Top Posters</a> 
       </div> 
      </td> 
     </tr> 
    </tfoot> 
</table> 
+0

Kev, L'ajout au pied de page de l'événement RowCreated fonctionne comme un charme :) Cependant, je ne peux pas obtenir la classe définie dans THEAD ou le résumé à apparaître dans la balise TABLE. – Bullines

+0

Odd ... Je peux voir à la fois dans la source de vue très bien. Pouvez-vous poster le GridView pour que je puisse voir ce que vous faites? – Kev

+0

J'ai posté mon code en réponse ici: http://stackoverflow.com/questions/315178/aspnet-gridview-newbie-questions-about-tfoot-and-th#315583 – Bullines

0

Il semble que vous ayez plus de succès avec ce que vous essayez de faire en utilisant le contrôle ListView. De cette façon, vous définissez le balisage au lieu de compter sur GridView pour le faire correctement.

Questions connexes