本文英文原版:
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的每个列定制外观格式.