DataGrid控件使用技巧

2024-07-21 02:24:05

字体：大中小

来源：转载

供稿：网友

国内最大的酷站演示中心!
将数据库内容绑定至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的外观，生成了一个居中、具有灰色和漂亮字体的html表格。

　　通过样式发挥你的想象力

　　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数据导出到excel文件给客户端下载的几种方法

下一篇：利用Repeater控件显示主－从关系数据表