考察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的外观.

  祝编程愉快!


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3