DataGrid控件使用技巧

shfweji

shfweji

2016-02-19 16:23

想要天天向上,就要懂得享受学习。图老师为大家推荐DataGrid控件使用技巧,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

  将数据库内容绑定至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>

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  另一种设定显示属性的方法是在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样式相同的属性。对设定列居中、前景色、背景色等很有用。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  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,如果你现在还没有的话。

展开更多 50%)
分享

猜你喜欢

DataGrid控件使用技巧

Web开发
DataGrid控件使用技巧

DataGrid控件的使用

编程语言 网络编程
DataGrid控件的使用

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

DataGrid 控件的使用

编程语言 网络编程
DataGrid 控件的使用

DataGrid控件的使用二

编程语言 网络编程
DataGrid控件的使用二

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

DataGrid控件的使用四

编程语言 网络编程
DataGrid控件的使用四

DataGrid控件的使用五

编程语言 网络编程
DataGrid控件的使用五

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

LineDDA的一个例子

LineDDA的一个例子

MAC鼠标/触摸板反向滚动怎么办?

MAC鼠标/触摸板反向滚动怎么办?
下拉加载更多内容 ↓