考察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的每个列定制外观格式


« 
» 
快速导航

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