ASP.NET的GridView新手问题关于TFOOT和TH [英] ASP.NET GridView Newbie Questions About TFOOT and 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(" ");
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> <a href="#">Top Posters</a>
</div>
</td>
</tr>
</tfoot>
</table>
这篇关于ASP.NET的GridView新手问题关于TFOOT和TH的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!