我们在呈现数据的时候，要特别注意使用者接口的设计。一个好的使用者接口，除了美观外还可以让使用者容易使用以及阅读数据。
数据格式的润饰
我们在呈现数据的时候，不要将未经修饰过的数据呈现给使用者。例如金额一万元，如果我们直接显示「10000」，可能会导致使用者看成一千或十万，造成使用者阅读数据上的困扰。若我们将一万元润饰后输出为「NT$10,000」，不但让使比较好阅读，也会让使用者减少犯错的机会。下列画面为润饰过的结果：
上述数据除了将DataGrid Web 控件以颜色来区隔记录外，最主要将日期、单价以及小计这三个计字段的数据修饰的更容易阅读。要修饰字段的输出，只要设定字段的DataFormatString 属性即可；其使用语法如下：
DataFormatString="{0:格式字符串}"
我们知道在DataFormatString 中的{0} 表示数据本身，而在冒号后面的格式字符串代表所们希望数据显示的格式；另外在指定的格式符号后可以指定小数所要显示的位数。例如原来的数据为「12.34」，若格式设定为{0:N1}，则输出为「12.3」。其常用的数值格式如下表所示：
其常用的日期格式如下表所示：
上述画面完整程序如下所示：
<%@Import Namespace=System.Data%>
<%@Import Namespace=System.Data.ADO%>
<html>
<Form Runat="Server">
<ASP:DataGrid Id="dgA" AllowPaging="True" PageSize="5"
OnPageIndexChanged="dgA_PageChg"
Runat="Server"
PagerStyle-Mode="NumericPages"
BorderColor="#808080"
HeaderStyle-Font-Names="Courier New"
HeaderStyle-BackColor="#D1DCEB"
HeaderStyle-Font-Bold="True"
HeaderStyle-HorizontalAlign="Center"
AutoGenerateColumns="False"
OnItemCommand="dgA_ICmd"
Alternatingitemstyle-BackColor="#ffff99">
<Property Name="PagerStyle">
<ASP:DataGridPagerStyle
HorizontalAlign="Center" BackColor="Gainsboro"
PageButtonCount="4" Mode="NumericPages"/></Property>
<Property Name="AlternatingItemStyle">
<ASP:TableItemStyle ForeColor="Black"
BackColor="Gainsboro"/></Property>
<Property Name="ItemStyle">
<ASP:TableItemStyle ForeColor="#000040"/></Property>
<Property Name="HeaderStyle">
<ASP:TableItemStyle Font-Names="Courier New" Font-Bold="True"
HorizontalAlign="Center" BackColor="#D1DCEB"/></Property>
<Property Name="Columns">
<ASP:ButtonColumn DataTextField="UserName" HeaderText="姓名"/>
<ASP:BoundColumn DataField="UserTel" HeaderText="电话"/>
<ASP:BoundColumn DataField="UserAdd" HeaderText="住址"/>
<ASP:BoundColumn DataField="UserEmail" HeaderText="电邮"/>
</Property>
</ASP:DataGrid><p>
<ASP:DataGrid Id="dgB" Runat="Server"
PagerStyle-Mode="NumericPages"
BorderColor="#808080"
HeaderStyle-Font-Names="Courier New"
HeaderStyle-BackColor="#D1DCEB"
HeaderStyle-Font-Bold="True"
HeaderStyle-HorizontalAlign="Center"
AutoGenerateColumns="False"
backcolor="Transparent" >
<Property Name="PagerStyle">
<ASP:DataGridPagerStyle Mode="NumericPages"/></Property>
<Property Name="AlternatingItemStyle">
<ASP:TableItemStyle ForeColor="Black"
BackColor="Gainsboro"/></Property>
<Property Name="ItemStyle">
<ASP:TableItemStyle ForeColor="#000040"
BackColor="White"/></Property>
<Property Name="HeaderStyle">
<ASP:TableItemStyle Font-Names="新细明体" Font-Bold="True"
HorizontalAlign="Center" BackColor="#D1DCEB"/></Property>
<Property Name="Columns">
<ASP:BoundColumn DataField="OrderDate" HeaderText="日期"
DataFormatString="{0:d}"/>
<ASP:BoundColumn DataField="ProductName" HeaderText="产品名称"/>
<ASP:BoundColumn DataField="UnitPrice" HeaderText="单价"
DataFormatString="NT${0:N0}"/>
<ASP:BoundColumn DataField="Quantity" HeaderText="数量"/>
<ASP:BoundColumn DataField="Total" HeaderText="小计"
DataFormatString="NT${0:N0}"/>
</Property>
</ASP:DataGrid>
</Form>
<ASP:Label Id="Label1" Runat="Server"/>
<Script Language="VB" Runat="Server">
Dim dscA As ADODataSetCommand=New ADODataSetCommand("Select * From
Members", _
"Provider=Microsoft.Jet.OLEDB.4.0;Data
Source=C:\InetPub\wwwroot\CR\Ch08\MyWeb.Mdb")
Dim dsDataSet As DataSet=New DataSet
Sub Page_Load(Sender As Object, e As EventArgs)
If Page.IsPostBack=False Then
dscA.SelectCommand.CommandText="Select * From Members"
dscA.FillDataSet(dsDataSet, "Members")
dgA.DataSource=dsDataSet.Tables("Members").DefaultView
dgA.DataBind()
End If
Label1.Text="您目前没有点选任何记录."
End Sub
Sub dgA_PageChg(Sender As Object, e As DataGridPageChangedEventArgs)
dscA.FillDataSet(dsDataSet, "Members")
dgA.DataSource=dsDataSet.Tables("Members").DefaultView
dgA.DataBind()
dgB.Visible=False
End Sub
Sub dgA_ICmd(Sender As Object, e As DataGridCommandEventArgs)
Dim shtR As Short=(dgA.CurrentPageIndex * dgA.PageSize) +
e.Item.ItemIndex
If shtR>=0 Then
dscA.FillDataSet(dsDataSet, "Members")
dscA.SelectCommand.CommandText="Select * From Orders Where
UserId='" & _
dsDataSet.Tables("Members").Rows(shtR)("UserId") & "'"
dscA.FillDataSet(dsDataSet, "Orders")
dgB.DataSource=dsDataSet.Tables("Orders").DefaultView
dgB.DataBind()
dgB.Visible=True
Label1.Text="总共有" & dsDataSet.Tables("Orders").Rows.Count & "
笔记录"
End If
End Sub
</SCRIPT>
</html>
文章来源于领测软件测试网 https://www.ltesting.net/
