ASP.NET GridView 新手关于 TFOOT 和 TH 的问题 [英] ASP.NET GridView Newbie Questions About TFOOT and TH

查看:15
本文介绍了ASP.NET GridView 新手关于 TFOOT 和 TH 的问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

您好!

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

<asp:GridView ID="ourGrid" runat="server" DataSourceID="ourDataSource" onrowdatabound="ourGrid_RowDataBound"HeaderStyle-CssClass="header_style" AlternatingRowStyle-CssClass="altrow_style"ShowFooter="true"><列><asp:BoundField DataField="名称" HeaderText="全名"/><asp:BoundField DataField="性别" HeaderText="性别"/><asp:BoundField DataField="BirthYear" HeaderText="出生年份"/><asp:BoundField DataField="JoinDate" HeaderText="加入日期" HtmlEncode="false" DataFormatString="{0:d}"/></列></asp:GridView><asp:ObjectDataSource ID="ourDataSource" runat="server" SelectMethod="GetTopUsers" TypeName="Acme.Model.OurNewObject"></asp:ObjectDataSource>

它目前生成以下标记:

<头><tr style="header_style"><th scope="col">全名</th><th scope="col">性别</th><th scope="col">出生年份</th><th scope="col">加入日期</th></tr></thead><脚><tr><td></td><td></td><td></td><td></td></tr></tfoot><tr><td>约翰·史密斯</td><td>男</td><td>1967</td><td>17-6-2007</td></tr><tr class="AspNet-GridView-Alternate altrow_style"><td>玫琳凯</td><td>女性</td><td>1972</td><td>15-11-2007</td></tr><tr><td>比尔·琼斯</td><td>男</td><td>1970</td><td>23-2-2007</td></tr></tbody>

还有一些 HTML 元素我想添加到此 GridView 控件将生成的表格标记中.首先,我需要 TFOOT 看起来像这样:

<tr><td colspan="4"><div><a class="footerlink_style" title="最新会员" href="#">最新会员</a><a class="footerlink_style" title="Top Posters" href="#">Top Posters</a>

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

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

另外,对于 THEAD,是否可以在 GridView 中为每个列标题指定单独的样式?

<tr style="header_style"><th scope="col" style="col1_style">全名</th><th scope="col" style="col2_style">性别</th><th scope="col" style="col3_style">出生年份</th><th scope="col" style="col4_style">加入日期</th></tr></thead>

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

提前致谢.

解决方案

TFOOT 定制:

页脚将始终默认创建与网格视图的其余部分相同数量的单元格.您可以通过添加以下代码在代码中覆盖它:

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 = "最新成员";HtmlAnchor link2 = new HtmlAnchor();link2.HRef = "#";link2.InnerText = "热门海报";//添加一个不间断的空格...删除 & 之间的空格和 nbsp;//我似乎无法让它渲染LiteralControl space = new LiteralControl("& nbsp;");面板 p = 新面板();p.Controls.Add(link1);p.Controls.Add(space);p.Controls.Add(link2);e.Row.Cells[0].Controls.Add(p);}}

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

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

THEAD 样式:

您可以为每个绑定字段的headerstyle-cssclass"中的每一列指定标题 css 类.例如:

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

表格摘要:

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

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

综合起来:

<%@ Page Language="C#" %><%@导入命名空间="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){数据集 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(对象发送者,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 = "最新成员";HtmlAnchor link2 = new HtmlAnchor();link2.HRef = "#";link2.InnerText = "热门海报";LiteralControl l = new LiteralControl("&nbsp;");面板 p = 新面板();p.Controls.Add(link1);p.Controls.Add(l);p.Controls.Add(link2);e.Row.Cells[0].Controls.Add(p);}}私有数据集 CreateDataSet(){DataTable table = new DataTable("tblLinks");数据列列;数据行;col = 新数据列();col.DataType = Type.GetType("System.Int32");col.ColumnName = "ID";col.ReadOnly = true;col.Unique = true;table.Columns.Add(col);col = 新数据列();col.DataType = Type.GetType("System.DateTime");col.ColumnName = "日期";col.ReadOnly = true;col.Unique = false;table.Columns.Add(col);col = 新数据列();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;数据集 ds = 新数据集();ds.Tables.Add(table);row = table.NewRow();行[ID"] = 1;row["Date"] = new DateTime(2008, 11, 1);row["Url"] = "www.bbc.co.uk/newsitem1.html";table.Rows.Add(row);row = table.NewRow();行[ID"] = 2;row["Date"] = new DateTime(2008, 11, 1);row["Url"] = "www.bbc.co.uk/newsitem2.html";table.Rows.Add(row);返回 ds;}<html xmlns="http://www.w3.org/1999/xhtml"><head runat="服务器"><title></title><style type="text/css">.红色的{红色;}.橄榄{颜色:橄榄色;}.青色{颜色:青色;}</风格><身体><form id="form1" runat="server"><div><asp:gridviewid="gv"自动生成列=假"显示头=真"显示脚注=真"摘要="这是新闻!标题=标题"标题对齐=顶部"alterrowstyle-cssclass="alt_row"useaccessibleheader="true"onrowcreated="OurGrid_RowCreated"runat="服务器"><列><asp:界域标题文本=ID"headerstyle-cssclass="橄榄"数据字段=id"/><asp:超链接字段标题文本=链接"headerstyle-cssclass="红色"datanavigateurlfields="网址"datanavigateurlformatstring="http://{0}"数据文本字段=网址"datatextformatstring="http://{0}"/><asp:界域标题文本=日期"headerstyle-cssclass="青色"数据字段=日期"/></列></asp:gridview>

</表单>

以上生成以下 HTML:

链接<th class="teal" scope="col">Date</th></tr></thead><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><脚><tr><td colspan="3"><div><a href="#">最新成员</a>&nbsp;<a href="#">热门海报</a>

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

Greetings!

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

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

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

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

Thanks in advance.

解决方案

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:

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:

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

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

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

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

这篇关于ASP.NET GridView 新手关于 TFOOT 和 TH 的问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆