欢迎光临
我们一直在努力

DataGrid Web控件深度历险(2) Part1-.NET教程,组件控件开发

建站超值云服务器,限时71元/月

导言

在第一部分我们研究了datagrid的基本功能,它可在html表格中显示数据。在第一部分我么说明了将数据库内容绑定至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格式的有用的属性:

l backcolor — 设定背景颜色。

l font — 设定datagrid的字体信息。字体信息包括使用何种字体、字号,是否粗体,斜体等。

l cellpadding — 设定html表格中单元格内的边距。

l cellspacing — 设定html表格中单元格之间的间距。

l width — 设定html表格的宽度(可以以像素、百分比等为单位)

l 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" />

faqid

description



dateentered

catname

144

where can i host my asp web site for free (similar to geocities or tripod or any of the many other free web site sites)?

3/20/2001 2:53:45 am

getting started

181

how can i format numbers and date/times using asp.net? for example, i want to format a number as a currency.

1/19/2002 3:12:07 pm

asp.net

databases, errors

是否印象深刻?通过几行文本,我们改变了datagrid的外观,生成了一个居中、具有灰色和漂亮字体的html表格。

通过样式发挥你的想象力

datagrid web控件包含一些样式,你将发现通过样式改变datagrid的外观非常有效。这些样式支持很多属性,包括backcolor、forecolor、horizontalalign和 width。(参考文档可获得更多信息)。datagrid包括四类样式:

l headerstyle — 设定页眉的样式。(页眉指表格的最上面一行,它列出了每列的名称。要显示页眉,需将datagrid的showheader属性设为true(缺省为true) )

l footerstyle —设定页脚的样式。(页脚指表格的最下面一行。要显示页脚,需将datagrid的showfooter属性true(缺省为false))

l itemstyle — 设定表格中每一行的样式。

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

赞(0)
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com 特别注意:本站所有转载文章言论不代表本站观点! 本站所提供的图片等素材,版权归原作者所有,如需使用,请与原作者联系。未经允许不得转载:IDC资讯中心 » DataGrid Web控件深度历险(2) Part1-.NET教程,组件控件开发
分享到: 更多 (0)