考察DataGrid Web控件 Part 2 (上)

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

考察DataGrid Web控件 Part 2 (上)

导言：

在Part 1我们考察了DataGrid的基本要素，同时阐明了将数据绑定到DataGrid控件是多么的容易：我们需要做的是创建一个DataReader对象，指定一个SQL查询，将DataGrid的DataSource属性设置为DataReader，然后调用DataGrid的DataBind()方法.剩下的是将DataGrid放置在HTML容器里（HTML content），代码应该像如下这样：

<asp:datagrid runat="server" />

相当简单吧，不过这样呈现出来的界面不是太好看，就像我们在示例页面看到的那样.我们怎样才能仅仅显示DataReader包含的某些列，并指定这些列的格式呢？另外，我们可以设置诸如表宽、背景色、前景色等格式，甚至为每列定制一个表头，为表头使用不同的背景色或粗体显示.这些正是本节的内容，（我们能做的还远不止这些，我们可以在DataGrid里进行排序、分页等，当然这些将在后面的文章里介绍）

指定DataGrid的格式化选项

我们有2种方法来指定DataGrid的格式化选项，第一种是在服务器脚本里通过编程来设置.比如要将DataGrid的背景色设置为red，你可以使用如下的服务器端代码：

<%@ Import Namespace="System.Drawing" %>

<script runat="server">
sub Page_Load(sender as Object, e as EventArgs)
...
DataGridID.BackColor = Color.Red
...
end sub
</script>

另一个方法是在DataGrid的标签里设置，如下：

<asp:datagrid runat="server" BackColor="Red" />

我个人比较喜欢后者，在控件标签里指定格式与使用服务器端代码相比较，代码要少些（如使用服务器端代码，我们将导入命名空间System.Drawing，并使用Color.Red;如果直接在控件标签指定，我们只需要使用BackColor="Red"，且代码的可读性强）

如下是一些常用的属性设置：

.BackColor—指定背景色
.Font—指定字体信息
.CellPadding —指定HTML表格的cellpadding
.CellSpacing—指定HTML表格的CellSpacing
.Width—指定HTML表格的宽度（可以是像素，百分比等值）
.HorizontalAlign—指定如何放置表格（左，右，中间，未设置）

如下的代码便运用了这些属性.注意Font属性，它引用的是FontInfo class类，其包含了Size, Name, Bold, Italic等属性.我们用连字符“-”来具体设置某个属性，其用法类似于在VB.NET和C#里引用某个对象属性所使用的点号“.”

<asp:DataGrid runat="server" id="dgFAQs"
BackColor="#eeeeee" Width="85%"
HorizontalAlign="Center"
Font-Bold="True" Font-Name="Verdana"
Font-Size="10pt" />

（演示页面：http://aspnet.4guysfromrolla.com/demos/dgExample2.aspx）

印象深刻吧？我们仅仅用寥寥几行代码就极大的改观了DataGrid的用户界面，将其呈现为灰色背景和好看的字体.

运用Styles

DataGrid控件包含了很多"styles"，我们可以用来定制DataGrid控件的外观.这些styles支持这些属性：BackColor, ForeColor, Font, HorizontalAlign以及Width.在DataGrid控件里可以用到如下4种styles：

.HeaderStyle——指定标题行的格式（即表格里显示列名的最顶行；另外必须确保DataGrid控件的ShowHeader属性设置为true (默认值)）

.FooterStyle——指定页脚的格式（即表格里显示列名的最底行；另外必须确保DataGrid控件的ShowFooter属性设置为true (默认为false)））

.ItemStyle——指定表中每一行的格式

.AlternatingItemStyle——指定表中交替行的格式.你可以将ItemStyle和AlternatingItemStyle设置为不同的值，以方便阅读（如下面的示例所示）

同DataGrid的其它格式化选项一样，我们可以通过编程或直接在DataGrid的控件标签里设置. 如前所述，我比较喜欢控件标签的方式，本例亦然.有2种方式可以在控件标签代码里设置，第一种我们在前面介绍过，直接使用对象（也就是说，要设置HeaderStyle的BackColor属性，使用这种方式：HeaderStyle.BackColor="Red"）

第2种方式如下：

<asp:DataGrid runat="server">
<HeaderStyle BackColor="Red" />
</asp:DataGrid>

2种方法都可以正常运行，不过当需要为多个styles设置多个属性时，用第2种方法有助于提高可读性.下面的代码展示了怎样美化开始的那个例子：

<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>

（示例页面为http://aspnet.4guysfromrolla.com/demos/dgExample3.aspx）

到目前为止，我们考察了如何整合格式属性以及如何设置显示属性，我们将在下半部分考察如何对DataGrid的每个列定制外观格式.