考察DataGrid控件 Part 5

本文英文原版：
http://aspnet.4guysfromrolla.com/articles/061002-1.aspx

考察DataGrid控件 Part 5

导言：
在Part 2，我们阐述了如何使用BoundColumn来定制DataGrid的界面.DataGrid的AutoGenerateColumns属性设置为False后，我们就可以指定DataGrid显示哪些列，这些列的表头信息，格式等都可以通过BoundColumn来设置.虽然这个方法功能强大，并且可以定制数据显示的样式，但给人的感觉是仅仅局限于一个TD HTML标签，让我们使用标准的的 HTML表格吧。

除了DataGrid控件外，ASP.NET还包含DataList 和 Repeater控件，这些控件都允许你使用HeaderTemplates, ItemTemplates和FooterTempaltes这3种模板来定制HTML显示效果.从本质上说，可以在模板里定制HTML及出现在相应部位的绑定数据（HeaderTemplates指定表头数据、FooterTempaltes指定页脚数据，以此类推!）DataGrid支持基于每个列的功能，换句话说，在DataGrid的<Columns>标签里，我们可以用TemplateColumns来替换BoundColumns，以更好的改善输出效果.在本节我们探讨TemplateColumn的基础知识并使用它来定制DataGrid的输出效果.

使用TemplateColumn

跟BoundColumns一样，在使用TemplateColumn前首先需要将AutoGenerateColumns属性设为False，然后在<Columns>标签里放置TemplateColumn控件.我们注意到可以在DataGrid里同时使用BoundColumns和TemplateColumns，就像下面的示例显示的那样：

<asp:datagrid id="dgPopularFAQs" runat="server"
AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="FAQID" ItemStyle-Width="10%"
ItemStyle-HorizontalAlign="Center" HeaderText="FAQ ID" />

<asp:TemplateColumn HeaderText="FAQ Information">
...
</asp:TemplateColumn>
</Columns>
</asp:datagrid>

上述代码的DataGrid控件将使每行记录包含2列，一个是BoundColumn(FAQID)，另一个是TemplateColumn，它包含哪些内容我们还没有指定.(关于BoundColumns的更多信息可参阅Part 2)，我们还注意到可以包含多个TemplateColumns以对应多个列.

那么怎么为TemplateColumn指定HTML内容呢？TemplateColumn控件自身包含了一些与用户界面相关的属性，比如HeaderText，它指定了列的表头信息；再比如Visible，它指定是否将该列显示出来.除此之外，还包括这些标签：

1.ItemTemplate——指定每个列将显示哪些内容

2.HeaderTemplate——指定列的表头信息

3.FooterTemplate——指定列的页脚信息

4.EditItemTemplate——指定处于编辑或删除状态时的界面.当对DataGrid的记录进行编辑/更新/删除时才会用到它.

这些模板同时也可以包含一个数据绑定值.比如某个TemplateColumn可能将一个数据库列的值用粗体显示出来.为了显示DataGrid的数据源的一个动态数据（dynamic data），我们可以用下面的语法：

<%# DataBinder.Eval(Container.DataItem, "ColumnName") %>

这就是所谓的“数据绑定”命令.上面的代码是将一个“ColumnName”列从DataItem里找出来（DataItem就是DataGrid的数据源的当前记录——数据源很可能是一DataReader或DataSet）

因此，DataGrid的TemplateColumn可以包含一个ItemTemplate模板，看起来像这样：

<asp:TemplateColumn HeaderText="FAQ Information">
<ItemTemplate>
<b><%# DataBinder.Eval(Container.DataItem, "ColumnName") %></b>
</ItemTemplate>
</asp:TemplateColumn>

TemplateColumn相对于BoundColumn的优点

到目前为止，你还没有完全认识到TemplateColumn带来的好处.我们上面的示例用BoundColumn也可以实现。但是如果需要在DataGrid的一列里显示2个数据库列的值又怎么办呢？用BoundColumn是行不通的，而TemplateColumn却可以办到.

让我们看更复杂点的例子.在本系列前面的演示例子，我们将ASPFAQs.com网站上最常见的10个FAQs显示出来.当然，我们始终用的是BoundColumns，所以DataGrid里的每一列包含的是某个数据库列的值.假设我们希望DataGrid总共只包含2个列，第1列是展示FAQ的ID（即FAQID），第2列展示Category Name，Description和ViewCount。如果使用TemplateColumns的话，很简单，代码如下：

<asp:datagrid id="dgPopularFAQs" runat="server"
AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="FAQID" ItemStyle-Width="10%"
ItemStyle-HorizontalAlign="Center" HeaderText="FAQ ID" />

<asp:TemplateColumn HeaderText="FAQ Information">
<ItemTemplate>
<table border="0">
<tr>
<td align="right"><b>Description:</b></td>
<td><%# DataBinder.Eval(Container.DataItem, "Description") %></td>
</tr>
<tr>
<td align="right"><b>Category Name:</b></td>
<td><%# DataBinder.Eval(Container.DataItem, "CatName") %></td>
</tr>
<tr>
<td align="right"><b>View Count:</b></td>
<td><%# DataBinder.Eval(Container.DataItem, "ViewCount", "{0:#,###}") %>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>

演示页面：http://aspnet.4guysfromrolla.com/demos/dgExample12.aspx

注意，最后一个数据绑定语句使用了DataBinder.Eval的另一种形式—它包含了一个可选参数，为该列指定一个格式字符串.该格式字符串#,###指明每隔3个数字一个逗号“,”({0:formatString}看起来有点让人糊涂—它是将格式字符串formatString运用于第0个 argument，换句话说，就是当前DataItem的ViewCount列)

结语：
本节我们考察了如何使用TemplateColumn来优化界面.毫无疑问，TemplateColumn比BoundColumn更能极大的提升HTML的输出效果.另外，我们后面的文章将会讲到，当用户选择编辑某行时，可以使用TemplateColumn来定制DataGrid row的外观.

祝编程愉快！