考察DataGrid Web控件 Part 2 (下)


在本节的第一部分,我们考察了如何设置DataGrid控件的显示属性以及如何使用styles来定制诸如表头、页脚、交替行等的外观.然而这些技术都是针对DataGrid的整体或行进行设置.如果我们向对列进行设置呢?其实也不难.

  指定显示哪些列

  默认情况下,DataGrid控件将把从SQL查询返回的所有列显示出来.某些时候,我们可能只希望将部分列显示在DataGrid控件里.比如,就我们当前的演示案例而言,为展示ASPFAQs.com网站上的最常见的问题解答,我们调用存储过程sp_Popularity,该存储过程包含列FAQID.我们不希望在DataGrid里将该列显示出来.

  如果你不希望将所有的列显示出来,你必须明白的指出需要显示哪些列.首先,你必须将DataGrid控件的AutoGenerateColumns属性设为False.完成后,你需要使用BoundColumn控件来指定要显示的列.

<asp:DataGrid runat="server" AutoGenerateColumns="False">
 <Columns>
  <asp:BoundColumn DataField="DatabaseColumnName1" ... />
  <asp:BoundColumn DataField="DatabaseColumnName2" ... />
  ...
  <asp:BoundColumn DataField="DatabaseColumnNameN" ... />
 </Columns>
</asp:datagrid>

  一个列对应一个BoundColumn控件,并将该控件的DataField属性设置为要显示的列,这些BoundColumn标签都应该置于Column标签内。(也可以通过编程来指定这些bound columns,但需要写很多的代码!) 注意,只有那些BoundColumn标签指定的列才会出现在DataGrid控件里,并且按照你定义的方式显示!

  这些BoundColumn控件包含了某些格式化属性,比如:
.HeaderText——指定出现在列表头的text

  .FooterText——指定列的页脚的text(如果希望DataGrid显出页脚,记得将ShowFooter属性设置为True)

  .HeaderStyle / FooterStyle / ItemStyle——包含了DataGrid的styles的所有属性,指定列的背景色/ 前景色等

  .DataFormatString——指定格式命令

  让我们看如何用BoundColumn标签来更进一步优化演示示例.正如前面所述,我们不希望将FAQID 或 FAQCategoryID列显示出来;且对ViewCount列和DateEntered列进行格式化;此外,我们将“数字列”的数据居中.可以用下面的代码实现,这些格式代码易读易懂:

<asp:DataGrid runat="server" id="dgPopularFAQs"
        BackColor="#eeeeee" Width="85%"
        HorizontalAlign="Center"
        Font-Name="Verdana" CellPadding="4"
        Font-Size="10pt" AutoGenerateColumns="False">
 <HeaderStyle BackColor="Black" ForeColor="White"
       Font-Bold="True" HorizontalAlign="Center" />
 <AlternatingItemStyle BackColor="White" />
 
 <Columns>
  <asp:BoundColumn DataField="CatName" HeaderText="Category Name" />
  <asp:BoundColumn DataField="Description" HeaderText="FAQ Description" />
  <asp:BoundColumn DataField="ViewCount" DataFormatString="{0:#,###}"
      HeaderText="Views" ItemStyle-HorizontalAlign="Center" />
  <asp:BoundColumn DataField="SubmittedByName" HeaderText="Author" />
  <asp:BoundColumn DataField="SubmittedByEmail" HeaderText="Author's Email" />
  <asp:BoundColumn DataField="DateEntered" HeaderText="Date Added"
 DataFormatString="{0:MM-dd-yyyy}" />  
 </Columns>
</asp:datagrid>


  (演示页面:http://aspnet.4guysfromrolla.com/demos/dgExample4.aspx)

  正如你在演示示例看到的,上述代码只创建了指定的列并对其格式化.我们注意到DataFormatString属性开起来有点搞笑。通常情况下其格式为{0:format string}.其中{0:...}意味者对(从DataReader返回的对应列的值)以....的形式进行格式化.我喜欢用 格式字符串“#,###”来格式化数字,每3个数字一个逗号“,”;用“MM-dd-yyyy”来对date/time列进行格式化显示月,日,年。

  结语:

  将前后演示示例对比,你会发现界面明显地改观!请注意,我们并没有写一行代码,我们只是在控件标签里对某些属性进行了设置而已!实际上,如果你使用类似于Visual Studio .NET这样的编辑器的话,你仅仅需要点一些按钮就可以设置这些属性.设想一下,在经典ASP里要实现同样的外观的话我们要写多少代码!

  祝编程快乐!


« 
» 
快速导航

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