关于TFOOT和TH的ASP.NET GridView新手问题

Greetings!

I'm still learning about the GridView control and I have one bound to an ObjectDataSource. My Web form looks like this:

我还在学习GridView控件,我有一个绑定到ObjectDataSource。我的Web表单如下所示:

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

It currently generates the following markup:

它目前生成以下标记:

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

There are a few more HTML elements that I'd like to add to the table markup that this GridView control will generate. For starters, I need the TFOOT to look like this:

还有一些我想要添加到此GridView控件将生成的表标记的HTML元素。对于初学者,我需要TFOOT看起来像这样:

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

The links will not contain databound information, but will likely be Hyperlink controls. Is there a way I can specify this at design-time?

链接不包含数据绑定信息,但可能是超链接控件。有没有办法在设计时指定这个?

Also, for the THEAD, is it possible to specify separate styles for each column header like this in the GridView?

另外,对于THEAD,是否可以在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>

Finally, is it possible to specifiy the summary attribute of the table like this?

最后,是否可以像这样指定表的summary属性?

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

Thanks in advance.

提前致谢。

3 个解决方案

#1

TFOOT Customisation:

The footer will always default to creating the same number of cells as the rest of the gridview. You can override this in code by adding:

页脚始终默认创建与gridview其余部分相同数量的单元格。您可以通过添加以下内容在代码中覆盖:

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);
    }
}

...and add the onrowcreated attribute to the server control:

...并将onrowcreated属性添加到服务器控件:

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

THEAD styles:

You can specify the header css class for each column in the 'headerstyle-cssclass' for each bound field. For example:

您可以为每个绑定字段的'headerstyle-cssclass'中的每个列指定标头css类。例如:

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

Table Summary:

Just add the summary attribute to the griview:

只需将摘要属性添加到griview:

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

Putting it all together:

把它们放在一起:

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

The above produces the following HTML:

以上产生以下HTML:

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

#2

It looks like you might have more success with what you're trying to do by using the ListView control. That way you define the markup instead of relying on the GridView to do it right.

看起来您可能通过使用ListView控件可以获得更多成功。这样您就可以定义标记,而不是依赖GridView来正确执行。

#3

Footer content will need to be generated on databind. Set a handler for RowDataBound. The logic should look something like this:

需要在数据绑定器上生成页脚内容。为RowDataBound设置处理程序。逻辑看起来应该是这样的:

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

To specify different style for the header something like this will do:

要为标题指定不同的样式,请执行以下操作:

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

For the summary part, you can simply have that in the declaration of the GridView control.

对于摘要部分,您可以在GridView控件的声明中使用它。

<asp:GridView id="theGrid" runat="server" summary="The Summary" >
...
</asp:GridView>

Depending on your validation setup Visual Studio might beef at you, but it will render.

根据您的验证设置,Visual Studio可能会对您产生影响,但它会呈现。