Вопросы новичков ASP.NET GridView о TFOOT и TH
Привет!
Я все еще изучаю элемент управления GridView, и у меня один привязан к ObjectDataSource. Моя веб-форма выглядит так:
<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>
В настоящее время он генерирует следующую разметку:
<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>
Есть еще несколько HTML-элементов, которые я хотел бы добавить в разметку таблицы, которую будет генерировать этот элемент управления GridView. Для начала мне нужно, чтобы 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>
Ссылки не будут содержать информацию о привязке к данным, но, скорее всего, будут элементами управления гиперссылками. Есть ли способ указать это во время разработки?
Кроме того, для 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>
Наконец, можно ли указать сводный атрибут таблицы таким образом?
<table cellpadding = "0" cellspacing = "0" summary = "Here is a list of users">
Заранее спасибо.
Спасибо за pastebins, я посмотрю позже сегодня, когда у меня будет приличный блок свободного времени.
Ответы 3
Содержимое нижнего колонтитула необходимо будет создать в привязке данных. Установите обработчик для RowDataBound. Логика должна выглядеть примерно так:
if (e.Row.Type == DataControlRowType.Footer)
{
// Do Work
}
Чтобы указать другой стиль для заголовка, можно сделать что-то вроде этого:
<Columns>
<asp:BoundField DataField = "PrimaryKey" HeaderText = "TheKey">
<headerstyle cssclass = "Header1" />
</asp:BoundField>
<asp:BoundField DataField = "Value" HeaderText = "AValue">
<HeaderStyle cssclass = "Header2" />
</asp:BoundField>
<%-- ... --%>
</Columns>
Что касается сводной части, вы можете просто указать это в объявлении элемента управления GridView.
<asp:GridView id = "theGrid" runat = "server" summary = "The Summary" >
...
</asp:GridView>
В зависимости от ваших настроек проверки Visual Studio может на вас напасть, но будет отображаться.
Я пробовал: <asp: BoundField DataField = "VirusName" HeaderText = "Name"> <headerstyle cssclass = "col1_style" /> </ asp: BoundField> и <asp: BoundField DataField = "VirusName" HeaderText = "Name" HeaderStyle- CssClass = "col1_style" /> Но мне кажется, что ни один из них не работает.
Добавление текста сводки по-прежнему приводит к появлению <table cellspacing = "0" cellpadding = "0" summary = "">
Настройка 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 = "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 в серверный элемент управления:
<asp:GridView ID = "ourGrid" onrowcreated = "OurGrid_RowCreated" ...
Стили THEAD:
Вы можете указать класс css заголовка для каждого столбца в 'headerstyle-cssclass' для каждого связанного поля. Например:
<asp:BoundField headerstyle-cssclass = "col1_style1" DataField = "Name" HeaderText = "Full Name" />
<asp:BoundField headerstyle-cssclass = "col1_style2" DataField = "Gender" HeaderText = "Gender" />
Сводка таблицы:
Просто добавьте сводный атрибут в 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-код:
<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>
Кев, добавление к нижнему колонтитулу в событии RowCreated работает как шарм :) Однако я не могу заставить класс, установленный в THEAD, или Summary появиться в теге TABLE.
Странно ... Я прекрасно вижу оба в исходном виде. Можете ли вы опубликовать GridView, чтобы я мог видеть, что вы делаете?
Я разместил свой код в качестве ответа здесь: stackoverflow.com/questions/315178/…
tfoot должен иметь th not td (рабочий jQuery dataTable, так что я знаю: P)
Похоже, у вас может быть больше успеха в том, что вы пытаетесь сделать, используя элемент управления ListView. Таким образом вы определяете разметку вместо того, чтобы полагаться на то, что GridView все сделает правильно.
Я добавил готовый рабочий пример, что все на одной странице. HTH.