定制表格的显示方式

在设计一个网站时,我们常需要在一个页面上用表格显示一个数据库中的数据。在传统的ASP中,你必须创建一个HTML表,在一个记录集(recordset)中循环来得到每个记录,并为每个记录创建一个

 1<tr>标签。在每个记录中,你必须循环来得到每个字段并为它创建一个<td>标签。你不得不手动地处理许多细节,比如创建列标题、设置每个字段的大小以及设置颜色。另外,如果你只想显示记录集的某些字段,你必须用IF语句来查看每个字段,看看你是否想显示它。ASP.NET不仅使所有这些工作变得简单了,而且它也可以让你全面控制表格的显示方式。 
 2
 3首先,将一个DataGrid拖放到一个Web窗体上。然后写一些数据访问代码来从一个数据库得到数据。运用下面的代码我们就可以把名为mdtUsers的DataTable中的数据绑定到dgdUsers这个DataGrid中了: 
 4    
 5    
 6    dgdUsers.DataSource = mdtUsers
 7    dgdUsers.DataBind()
 8      
 9  
10---  
11  
12![
13				图1. ](http://www.fawcette.com/china/VS/2002_12/TabularDisplay/Image/fig1sm.gif)  
14---  
15图1. 运用一个DataGrid来显示数据   
16我们将DataGrid的DataSource设置成载有数据的DataTable,然后调用DataBind方法来绑定数据。这样ASP.NET就为DataTable中所有的数据自动创建了一个表格。它排列了每一列,并将DataTable中的字段名称显示为列标题。 
17
18你也可以修改代码使DataGrid按你需要的方式显示(见 图1 )。例如,你可以在Web窗体上只显示DataTable的某些字段,或者你可以用一个不同的列标题来代替DataTable运用的字段名。.NET可以让你全面控制DataGrid的显示方式。 
19
20选择页面底部的HTML TAB键来显示页面的HTML代码。找到<asp:datagrid>标签。你需要在<asp:datagrid>和</asp:datagrid>标签之间添加一些代码。例如,下面的代码就以交替形式改变了每行的背景颜色: 
21    
22    
23    <alternatingitemstyle backcolor="Coral"></alternatingitemstyle>
24      
25  
26---  
27  
28添加下面这行代码可以设置标题的背景颜色: 
29    
30    
31    <headerstyle backcolor="Crimson"></headerstyle>
32      
33  
34---  
35  
36现在,假设你不想显示DataTable中的所有的字段。首先,你需要给<asp:datagrid>标签添加一个AutoGenerateColumns属性,并将它设置成False: 
37    
38    
39    <asp:datagrid autogeneratecolumns="False" id="dgdUsers" runat="server" style="Z-INDEX: 101; 
40       LEFT: 43px; POSITION: absolute; TOP: 43px">
41      
42  
43---  
44  
45缺省情况下,AutoGenerateColumns设置成True,这就是告诉.NET,让它自动生成所有的列。如果你想控制生成哪些列,就将这个属性设置成False。然后,你需要添加一个<columns>代码块,来告诉.NET你想显示哪些列。例如,下面的代码只显示Last Name、First Name和Email地址字段: 
46    
47    
48    <columns>
49<asp:boundcolumn datafield="vcLastName" headertext="Last Name"></asp:boundcolumn>
50<asp:boundcolumn datafield="vcFirstName" headertext="First Name"></asp:boundcolumn>
51<asp:boundcolumn "headertext="Email" datafield="vcEmail"></asp:boundcolumn>
52</columns>
53      
54  
55---  
56  
57你对每个想显示的列都用了一个<asp:boundcolumn>标签。DataField属性是DataTable中的字段名,HeaderText这个属性可以让你控制用于该列的标题名。 
58
59你的DataGrid的完整的HTML代码应该如下所示: 
60    
61    
62    <asp:datagrid autogeneratecolumns="False" id="dgdUsers" runat="server" style="Z-INDEX: 101; 
63       LEFT: 43px; POSITION: absolute; TOP: 43px">
64<alternatingitemstyle backcolor="Coral"></alternatingitemstyle>
65<headerstyle backcolor="Crimson"></headerstyle>
66<columns>
67<asp:boundcolumn datafield="vcLastName" headertext="Last 
68             Name"></asp:boundcolumn>
69<asp:boundcolumn datafield="vcFirstName" headertext="First 
70             Name"></asp:boundcolumn>
71<asp:boundcolumn datafield="vcEmail" headertext="Email"></asp:boundcolumn>
72</columns>
73</asp:datagrid>
74      
75  
76---  
77  
78ASP.NET简化了许多普通的网站设计工作。通过运用很少几行的代码你就可以显示整个表的数据,而且它还可以按你想要的方式来显示数据。</asp:boundcolumn></columns></asp:datagrid></asp:datagrid></asp:datagrid></td></tr>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus