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

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

问题描述

您好!

我还在学习有关GridView控件和我有一个绑定到一个ObjectDataSource。我的Web表单看起来是这样的:

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>

有,我想添加到表中的标记,这GridView控件会产生一些更多的HTML元素。首先,我需要的TFOOT看起来是这样的:

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?

另外,对于THEAD,是有可能在GridView的每个列标题像这样指定单独的样式?

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>

最后,是有可能specifiy表这样总结属性?

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

先谢谢了。

推荐答案

TFOOT客户化:

页脚将始终默认为创建相同数量的细胞作为GridView控件的其余部分。您可以通过添加在code重写此:

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

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

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

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

THEAD风格:

您可以在headerstyle-的CssClass每个绑定字段指定每个列的标题CSS类。例如:

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

表摘要:

就在总结属性添加到griview:

Just add the summary attribute to the griview:

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

全部放在一起:

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

以上产生以下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天全站免登陆