`

考察DataGrid Web控件 Part 2 (下)

阅读更多


本文英文原版:
http://aspnet.4guysfromrolla.com/articles/041702-1.2.aspx


考察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里要实现同样的外观的话我们要写多少代码!

祝编程快乐!

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics