DataGrid 自定义字段内容

因为DataGrid Web 控件的AutoGenerateColumn 属性预设为True，表示会自动产生数据源中所有的字段。如果我们想自订DataGrid Web 控制所要显示的字段，只要将AutoGenerateColumn属性设为False，并设定Columns 属性即可。其设定语法如下所示：

DataGrid Web 控件允许我们定义的字段，如下表所示：

字段型态说明
BoundColumn 字段内容以Label 的方式呈现。
ButtonColumn 字段内容以超级链接或是按钮的方式呈现。
EditCommandColumn 提供数据编修的命令，不呈现字段数据。
HyperLinkColumn 字段内容以超级链接的方式呈现。
TemplateColumn 字段内容以自订样版的方式呈现。

下列程序代码片段展示了这几种字段：

<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"
AutoGenerateColumns="False">
<Property Name="Columns">
<ASP:BoundColumn
HeaderText="姓名"
DataField="UserName"/>
<ASP:ButtonColumn
HeaderText="电话"
ButtonType="PushButton"
DataTextField="UserTel"/>
<ASP:HyperlinkColumn
HeaderText="电邮"
DataNavigateUrlField="UserEmail"
DataTextField="UserEmail"/>
<ASP:TemplateColumn
HeaderText="住址">
<Template Name="ItemTemplate">
<ASP:Image ImageUrl="ico1.gif" Runat="Server"/>
<%#Container.DataItem("UserAdd")%>
</Template>
</ASP:TemplateColumn>
<ASP:EditCommandColumn
HeaderText="编辑"
ButtonType="PushButton"
CancelText="放弃"
EditText="编辑"
UpdateText="确定"/>
</Property>
</ASP:DataGrid>

其中这些字段的共同基础属性如下表所示：

属性说明
FooterText 在字段底部显示的文字。
HeaderImageUrl 用来代替字段标题的影像文件地址。
HeaderText 字段标题所要显示的文字。
Owner 传回字段所属DataGrid 的参考。
SortField 当使用者指明要以本字段来排序时，该字段在数据源的名称。
State 传回字段的状况。
Visible 设定是否要显示字段，True/False。
这些字段也支持许多样式对象，可以让我们可以灵活的自订其显示外观，如下表所示：

样式对象样式类别说明
FooterStyle TableItem 脚注所要显示的样式。
HeaderStyle TableItem 标头所要显示的样式。
ItemStyle 基础每一个项目所要显示的样式。

BoundColumn

BoundColumn 最主要的功能是利用Label 来显示数据源中的一个字段内容，其使用语法如下所示：

<ASP:BoundColumn
DataField="DataSourceField"
DataFormatString="FormatString"
FooterText="FooterText"
HeaderImageUrl="url"
HeaderText="HeaderText"
ReadOnly="True | False"
SortField="DataSourceFieldToSortBy"
Visible="True | False"
FooterStyle-Property="value"
HeaderStyle-Property="value"
ItemStyle-Property="value"
/>

其中除了共同基础属性以及样式对象外，常用的属性如下表所示：

属性说明
DataField 所要显示的资料源字段名称。
DataFormatString 所要显示的资料格式。
ReadOnly 设定字段是否为只读，True/False。

下列程序代码片段以BoundColumn 来显示字段内容：

<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"
AutoGenerateColumns="False">
<Property Name="Columns">
<ASP:BoundColumn
HeaderText="姓名"
HeaderStyle-Font-Bold="True"
HeaderStyle-HorizontalAlign="Center"
DataField="UserName"/>
<ASP:BoundColumn
HeaderText="电话"
HeaderStyle-Font-Bold="True"
HeaderStyle-HorizontalAlign="Center"
DataField="UserTel"/>
<ASP:BoundColumn
HeaderText="住址"
HeaderStyle-Font-Bold="True"
HeaderStyle-HorizontalAlign="Center"
DataField="UserAdd"/>
</Property>
</ASP:DataGrid>

ButtonColumn

BoundColumn 最主要的功能是利用LinkButton 或PushButton 来显示数据源中的一个字段内容，并且可以触发DataGrid Web 控件的事件。其使用语法如下所示：

<ASP:ButtonColumn
ButtonType="LinkButton | PushButton"
CommandName="命令名称"
DataTextField="DataSourceField"
DataTextFormatString="FormatString"
FooterText="FooterText"
HeaderImageUrl="url"
HeaderText="HeaderText"
ReadOnly="True | False"
SortField="DataSourceFieldToSortBy"
Text="ButtonCaption"
Visible="True | False"
/>

其中除了共同基础属性以及样式对象外，常用的属性如下表所示：

属性说明
ButtonType 所要使用的按钮种类，预设为LinkButton。
CommandName 命令名称。
DataTextField 设定控件上所要显示的资料源字段名称。
DataTextFormatString 所要显示的资料格式。
Text 设定控件上所要显示的文字，若指定DataTextField 属性，则本属性无效。

下列程序代码范例以BoundColumn 来显示字段内容，并且显示使用者点选了哪一笔记录：

<%@Import Namespace=System.Data.ADO%>
<%@Import Namespace=System.Data%>

<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">
<Property Name="Columns">
<ASP: ButtonColumn
HeaderText="姓名"
DataTextField="UserName"/>
<ASP:BoundColumn
HeaderText="电话"
DataField="UserTel"/>
<ASP:BoundColumn
HeaderText="住址"
DataField="UserAdd"/>
</Property>
</ASP:DataGrid>
</Form>
<ASP:Label Id="Label1" Runat="Server"/>
<Script Language="VB" Runat="Server">
Sub Page_Load(Sender As Object, e As EventArgs)
If Page.IsPostBack=False Then
Dim dtDataTable As DataTable=GetTable("CH08\MyWeb.mdb", "Members")
dgA.DataSource=dtDataTable.DefaultView
Page.DataBind()
End If
Label1.Text="您目前没有点选任何记录."
End Sub
Sub dgA_PageChg(Sender As Object, e As DataGridPageChangedEventArgs)
Dim dtDataTable As DataTable=GetTable("CH08\MyWeb.mdb", "Members")
dgA.DataSource=dtDataTable.DefaultView
Page.DataBind()
End Sub
Sub dgA_ICmd(Sender As Object, e As DataGridCommandEventArgs)
Dim shtRow As Short= e.Item.ItemIndex+1
If shtRow<>0 Then
Label1.Text="您点选了第 " & shtRow.ToString() & " 个字段的数据, 这<br>笔数据在数据源中是第 "
Label1.Text+=((dgA.CurrentPageIndex * dgA.PageSize) +shtRow).ToString & "笔记录."
End If
End Sub
</SCRIPT>
</Html>

上述范例我们指定DataGrid Web 控件的OnItemCommand 属性为dgA_ICmd，表示按下显示使用者名称的ButtonColumn 时会触发dgA_CCmd 事件，并且执行dgA_Icmd 事件程序；如下程序代码片段所示：

Sub dgA_ICmd(Sender As Object, e As DataGridCommandEventArgs)
Dim shtRow As Short= e.Item.ItemIndex+1
If shtRow<>0 Then
Label1.Text="您点选了第 " & shtRow.ToString() &" 个字段的数据, 这<br>笔数据在数据源中是第 "
Label1.Text+=((dgA.CurrentPageIndex * dgA.PageSize) +shtRow).ToString &"笔记录."
End If
End Sub

在这个事件程序中，我们利用e.Item.ItemIndex 属性取得使用者点选了第几个项目的Index 值；由于Index 由0 开始，所以我们加上1 表示点选了第几个项目。如果没有任何项目被点选，则e.Item.ItemIndex 属性传回 -1。由于变量shtRow 为e.Item.ItemIndex 加1 的结果，所以我们藉由判断变量shtRow 是否为0 来得知使用者是否有选择选项。
因为e.Item.ItemIndex 属性传回的是使用者在DataGrid Web 控件上所点选的项目，并不是记录在数据源的地址；所以我们透过计算目前的页数索引乘以每页的纪录笔数后，再加上目前所在的字段即可得到该笔数据在数据源中的实际地址。所以使用者若点选了第六页的第四个字段，表达式则为 (5*5)+4，结果29 就是记录在数据源的实际顺序。
若要取得该笔记录在数据源中的索引值，由于Index 值是由0 开始计数，所以只要再减去1 即可。

HyperlinkColumn

HyperlinkColumn 最主要的功能是以超级链接来显示资料源中的一个字段内容，并可以指定使用者点选该项目时所要开启的地址。其使用语法如下所示：

<ASP:HyperlinkColumn
DataNavigateUrlField="DataSourceField"
DataNavigateUrlFormatString="FormatExpression"
DataTextField="DataSourceField"
DataTextFormatString="FormatExpression"
FooterText="FooterText"
HeaderImageUrl="url"
HeaderText="HeaderText"
NavigateUrl="url"
ReadOnly="True | False"
SortField="DataSourceFieldToSortBy"
Target="window"
Text="HyperlinkText"
Visible="True | False"
/>

其中除了共同基础属性以及样式对象外，常用的属性如下表所示：

属性说明
DataNavigateUrlField 设定要以哪个字段值来当成超级链接的目标地址。
DataNavigateUrlFormatString 设定要开启连结的格式字符串。
DataTextField 设定控件上所要显示的资料源字段名称。
DataTextFormatString 所要显示的资料格式。
NavigateUrl 设定要连结的URL 地址。若指定了DataNavigateUrlField 属性，
则本属性无效。
Target 设定连结所要开启的目标。
Text
设定控件上所要显示的文字，若指定DataTextField 属性，则本
属性无效。

下列程序代码范例以Hyperlink Column 来显示使用者电子邮件信箱字段，若使用者点选了一笔记录，则会开启邮件编辑软件：

上述范例我们以UserEmail 字段做为显示以及欲连结的目标。由于我们希望使用者点选这个字段中的任何一个项目时，可以开启Outlook 来进行邮件的编辑；所以我们必须在使用者的电子邮件信箱地址前将上mailto:」。要达到这个目的，可以设定DataNavigateUrlFormatString 属性；

如下程序代码片段所示：

DataNavigateUrlFormatString="mailto:{0}"
其中「{0}」会被DataNavigateUrlField 的内容所取代，所以执行结果如下：
若超级链接的内容是某个网址，只要将NavigateUrlFormatString 属性的内容设定为「"http://{0}"」
即可。

EditCommandColumn

EditCommandColumn 最主要的功能是利用LinkButton 或PushButton 来下达编辑资料的命令，并且可以触发DataGrid Web 控件的事件。EditCommandColumn 进入编辑模式的时候会产生TextBox 让使用者编辑，也可以和TemplateColumn 一起配合使用，我们后面介绍TemplateColumn 的时候会说明。其使用语法如下所示：

ASP:EditCommandColumn
ButtonType="LinkButton | PushButton"
CancelText="CancelButtonCaption"
EditText="EditButtonCaption"
FooterText="FooterText"
HeaderImageUrl="url"
HeaderText="HeaderText"
ReadOnly="True | False"
SortField="DataSourceFieldToSortBy"
UpdateText="UpdateButtonCaption"
Visible="True | False"
/>

其中除了共同基础属性以及样式对象外，常用的属性如下表所示：

属性说明
ButtonType 所要使用的按钮种类，预设为LinkButton。
EditText 编辑数据所要显示给使用者看的文字。
UpdateText 更新数据所要显示给使用者看的文字。
CancelText 放弃编辑所要显示给使用者看的文字。
当使用者点选了显示EditText 的控件时，DataGrid Web 控件会自动触发OnEditCommand 事件，并执行OnEditCommand 属性所指定的事件程序；倘若点选了显示UpdateText 以及CancelText内容的控制像，也一样分别自动触发OnUpdateCommand 以及OnCancelCommand 事件。下列程序代码范例增加了一个ditCommandColumn 字段，并且显示使用者点选了哪一个按钮：

<%@Import Namespace=System.Data.ADO%>
<%@Import Namespace=System.Data%>

<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"
OnEditCommand="dgA_ECmd" OnUpdateCommand="dgA_UCmd"
OnCancelCommand="dgA_CCmd" >
<Property Name="Columns">
<ASP:BoundColumn
HeaderText="姓名"
DataField="UserName"/>
<ASP:BoundColumn
HeaderText="电话"
DataField="UserTel"/>
<ASP:EditCommandColumn
HeaderText="编辑"
ButtonType="PushButton"
EditText="编辑"
UpdateText="更新"
CancelText="放弃"/>
</Property>
</ASP:DataGrid>
</Form>
<ASP:Label Id="Label1" Runat="Server"/>
<Script Language="VB" Runat="Server">
Dim dtDataTable As DataTable=GetTable("CH08\MyWeb.mdb", "Members")
Sub Page_Load(Sender As Object, e As EventArgs)
If Page.IsPostBack=False Then
dgA.DataSource=dtDataTable.DefaultView
Page.DataBind()
End If
End Sub
Sub dgA_PageChg(Sender As Object, e As DataGridPageChangedEventArgs)
dgA.DataSource=dtDataTable.DefaultView
Page.DataBind()
End Sub
Sub dgA_ECmd(Sender As Object, e As DataGridCommandEventArgs)
Label1.Text="您点选了第 " & (e.Item.ItemIndex+1).ToString & " 个字段的编辑."
dgA.EditItemIndex=e.Item.ItemIndex
dgA.DataSource=dtDataTable.DefaultView
Page.DataBind()
End Sub
Sub dgA_UCmd(Sender As Object, e As DataGridCommandEventArgs)
Label1.Text="您点选了第 " & (e.Item.ItemIndex+1).ToString & " 个字段的更新."
dgA.EditItemIndex=-1
dgA.DataSource=dtDataTable.DefaultView
Page.DataBind()
End Sub
Sub dgA_CCmd(Sender As Object, e As DataGridCommandEventArgs)
Label1.Text="您点选了第 " & (e.Item.ItemIndex+1).ToString & " 个字段的放弃."
dgA.EditItemIndex=-1
dgA.DataSource=dtDataTable.DefaultView
Page.DataBind()
End Sub
</SCRIPT>
</Html>

上述范例中，由于DataTable 对象要让其它事件程序使用，所以我们在网页阶层的宣告区宣告。
我们也指定了OnEditCommand 事件、OnUpdateCommand 事件以及OnCancelCommand 事件；当使用者按下「编辑」按钮时会自动触发我们所指定的dgA_ECmd 事件程序，如下程序代码范例所示：

Sub dgA_ECmd(Sender As Object, e As DataGridCommandEventArgs)
Label1.Text="您点选了第 " & (e.Item.ItemIndex+1).ToString & " 个字段的编辑."
dgA.EditItemIndex=e.Item.ItemIndex
dgA.DataSource=dtDataTable.DefaultView
Page.DataBind()
End Sub

上述程序代码片段将DataGrid 的EditItemIndex 属性设定为使用者所点选记录的索引值，所以该笔记录就会进入编辑模式；此时原来字段内的「编辑」按钮就会变成「更新」以及「放弃」。
使用者若编辑完毕后再点选「更新」或「放弃」按钮时，即触发所指定的OnUpdateCommand
或是OnCancelCommand 事件；这些事件最后将DataGrid 对象的EditItemIndex 属性设为 -1，
表示没有任何项目被编辑，让数据回复到原来的显示模式。

注：以上代码为vb形式，其中System.Data.ADO 应该为 System.Data.OleDb
****摘自《asp.net程式设计基础篇》