DataGrid控件使用技巧

通过样式发挥你的想象力

　　DataGrid Web控件包含一些样式，你将发现通过样式改变DataGrid的外观非常有效。这些样式支持很多属性，包括BackColor、ForeColor、HorizontalAlign和 Width。(参考文档可获得更多信息)。DataGrid包括四类样式：

　　 HeaderStyle — 设定页眉的样式。(页眉指表格的最上面一行，它列出了每列的名称。要显示页眉，需将DataGrid的ShowHeader属性设为True(缺省为True) )

　　 FooterStyle —设定页脚的样式。(页脚指表格的最下面一行。要显示页脚，需将DataGrid的ShowFooter属性True(缺省为False))

　　 ItemStyle — 设定表格中每一行的样式。

　　 AlternatingItemStyle — 设定表格中交替行的样式。通过将ItemStyle和AlternatingItemStyle设为不同的值使得DataGrid便于阅读。(可参考下面的示例)

　　和设定DataGrid的格式类似，样式可通过程序或DataGrid Web控件的标记进行设定。如上所述，我个人喜欢使用Web控件的标记并且将在示例中使用该方法。第一种方法与通过代码设置DataGrid的格式类似，通过在对象后面加一个点。即如果想设定HeaderStyle的BackColor，可在代码中通过HeaderStyle.BackColor=Color.Red实现。

　　另一个方法是通过在Web 控件的标记中使用特别的样式块，如下所示：

＜asp:DataGrid runat="server"＞ ＜HeaderStyle BackColor="Red" /＞ ＜/asp:DataGrid＞

　　两种方法均可行。我发现嵌入标记的方法便于阅读，特别是当你需要为众多样式设定众多属性时。下面的示例显示如何美化先前的示例：

＜asp:DataGrid runat="server" id="dgFAQs" BackColor="#eeeeee" Width="85%" HorizontalAlign="Center" Font-Name="Verdana" Font-Size="10pt"＞ ＜HeaderStyle BackColor="Black" ForeColor="White" Font-Bold="True" HorizontalAlign="Center" /＞ ＜AlternatingItemStyle BackColor="White" /＞ ＜/asp:datagrid＞

　　示例运行结果如下：



　　现在我们已经研究了如何使用样式以及如何设定DataGrid控件的全局显示属性(格式)，下面还需要研究一个主题：如何对每一个特定列设定样式和显示属性。

　　但是如何设定DataGrid中列的显示属性？其实并不难，接着读你就知道了。

　　设定哪些列应该显示

　　缺省情况下DataGrid在生成的HTML表格中为SQL查询返回的每一列生成一个对应的列。但是在一些情况下仅希望在DataGrid中显示这些列中的一部分列。例如，在我正在进行的示例中，通过调用sp_Popularity存储过程显示了ASPFAQs.com最受欢迎的10个问题。它包含FAQID列，或许我并不希望显示该列。

　　如果不想在DataGrid中显示数据库查询返回的所有列，必须显式地声明所有希望显示的列。第一步是将DataGrid的AutoGenerateColumns属性设为False。一旦执行完这个操作，就需要通过BoundColumn Web控件设定需显示的列，如下所示：

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

　　对于每一个希望显示的列，需要通过一个包含DataField属性的＜asp:BoundColumn ... /＞标记来指定数据库中需要显示的列。所有这些BoundColumn标记必须包含在Column标记内。(也可通过编程的方式指定这些绑定列，但是它的可读性差，并且需要很多代码!)请注意只有通过BoundColumn标记指定的列才会在DataGrid中显示，你必须指定需要显示的列!

　　BoundColumn控件的优点在于它包含一些设定格式的属性，包括：

　　 HeaderText — 设定列标题的文字。

　　 FooterText — 设定列尾的文字(记住若要在DataGrid中显示页脚，应将ShowFooter设为True)。

　　 HeaderStyle/FooterStyle/ItemStyle — 包含与DataGrid样式相同的属性。对设定列居中、前景色、背景色等很有用。

　　 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＞

　　实际运行结果如下：



　　如上例所示，上述代码指定了需要显示的特定列并且应用了特定的格式。请注意DataFormateString看上去很有趣。它的格式始终是{0:format string}。{0: …}指定通过格式化字符串(由…指定的)来格式化第一个参数(第一个参数指由DataReader返回的那个特定列的值)。在示例中我使用了格式化字符串#,###，它在每3个数字前加上一个逗号；格式化字符串MM-dd-yyyy指定通过月、日和年的格式显示日期/时间字段。

　　结论

　　花一些时间看一下第一个示例(见DataGrid Web控件深度历险(1))和现在的示例。改进确实很大!请注意所有这些样式和用户界面的改进不需要写一行代码就可实现。我们只是在Web控件的标记中设定了一些属性！事实上如果你正在使用类似Visual Studio .Net的编辑器， 你可通过点击一些按钮、选中一些复选框、选择列表框的一些项来设定格式化选项。想象一下在传统ASP中实现同样效果需要编写的那些冗长代码，那会使你爱上ASP.Net，如果你现在还没有的话。

查看本文来源