web前端

位置:IT落伍者 >> web前端 >> 浏览文章

DataGrid Web控件深度历险(2) Part1


发布日期:2024年08月11日
 
DataGrid Web控件深度历险(2) Part1

导言

在第一部分我们研究了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=SystemDrawing %>

<script runat=server>

sub Page_Load(sender as Object e as EventArgs)

DataGridIDBackColor = ColorRed

end sub

</script>

另一种设定显示属性的方法是在DataGrid Web控件的标记中进行设定下面的代码和上面的代码效果是一样的

<asp:datagrid runat=server BackColor=Red />

我个人喜欢后一种方法我发现在Web控件的标记中设定显示属性比在服务器端代码中设定要简洁(请注意对于服务器端代码的方法需要引入SystemDrawing命名空间才能通过ColorRed对颜色进行引用对于在Web控件的标记中设定显示属性的方法仅需写上BackColor=Red我觉得后一种方法更可读)

让我们看一下用于设定DataGrid格式的有用的属性

lBackColor — 设定背景颜色

lFont — 设定DataGrid的字体信息字体信息包括使用何种字体字号是否粗体斜体等

lCellPadding — 设定HTML表格中单元格内的边距

lCellSpacing — 设定HTML表格中单元格之间的间距

lWidth — 设定HTML表格的宽度(可以以像素百分比等为单位)

lHorizontalAlign — 设定表格在页面上的对齐方式(左对齐右对齐居中未设定)

一个使用上述属性而使得表格变得漂亮的例子如下所示请注意DataGrid的Font属性是一个对象它指向了FontInfo类FontInfo类包括Size Name Bold Italic等属性为了设定Font对象所指向类的属性必须通过连字符()完成这类似于VBNet和C#语言中表示对象属性的点()

<asp:DataGrid runat=server id=dgFAQs

BackColor=#eeeeee Width=%

HorizontalAlign=Center

FontBold=True FontName=Verdana

FontSize=pt />

FAQID

Description

DateEntered

CatName

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)?

// :: AM

Getting Started

How can I format numbers and date/times using ASPNET? For example I want to format a number as a currency

// :: PM

ASPNET

Databases Errors

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

通过样式发挥你的想象力

DataGrid Web控件包含一些样式你将发现通过样式改变DataGrid的外观非常有效这些样式支持很多属性包括BackColorForeColorHorizontalAlign和 Width(参考文档可获得更多信息)DataGrid包括四类样式

lHeaderStyle — 设定页眉的样式(页眉指表格的最上面一行它列出了每列的名称要显示页眉需将DataGrid的ShowHeader属性设为True(缺省为True) )

lFooterStyle —设定页脚的样式(页脚指表格的最下面一行要显示页脚需将DataGrid的ShowFooter属性True(缺省为False))

lItemStyle — 设定表格中每一行的样式

lAlternatingItemStyle — 设定表格中交替行的样式通过将ItemStyle和AlternatingItemStyle设为不同的值使得DataGrid便于阅读(可参考下面的示例)

和设定DataGrid的格式类似样式可通过程序或DataGrid Web控件的标记进行设定如上所述我个人喜欢使用Web控件的标记并且将在示例中使用该方法第一种方法与通过代码设置DataGrid的格式类似通过在对象后面加一个点即如果想设定HeaderStyle的BackColor可在代码中通过HeaderStyleBackColor=ColorRed实现

另一个方法是通过在Web 控件的标记中使用特别的样式块如下所示

<asp:DataGrid runat=server>

<HeaderStyle BackColor=Red />

</asp:DataGrid>

两种方法均可行我发现嵌入标记的方法便于阅读特别是当你需要为众多样式设定众多属性时下面的示例显示如何美化先前的示例

<asp:DataGrid runat=server id=dgFAQs

BackColor=#eeeeee Width=%

HorizontalAlign=Center

FontName=Verdana

FontSize=pt>

<HeaderStyle BackColor=Black ForeColor=White

FontBold=True HorizontalAlign=Center />

<AlternatingItemStyle BackColor=White />

</asp:datagrid>

示例运行结果如下

FAQID

Description

ViewCount

FAQCategoryID

DateEntered

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)?

// :: AM

How can I format numbers and date/times using ASPNET? For example I want to format a number as a currency

// :: PM

I am using Access and getting a error (or a [Microsoft][ODBC Microsoft Access Driver] The Microsoft Jet database engine cannot open the file (unknown) error) when trying to open a connection! How can I fix this problem?

// :: PM

现在我们已经研究了如何使用样式以及如何设定DataGrid控件的全局显示属性(格式)下面还需要研究一个主题如何对每一个特定列设定样式和显示属性我们将在本文第二部分讨论这项技术

               

上一篇:正则表达式删除指定的HTML 标签

下一篇:使用webservice解决多系统登陆问题