在上半部分我们阐述了如何将 Products 表的数据显示在 DataGrid 里,在本文我们考察如何允许用户编辑 DataGrid 里的某一特定行。
允许最终用户编辑 DataGrid 里的某一行
为了让用户编辑 DataGrid 里的某一行,我们需要一些途径供用户选择他想编辑的行。就像在Part 3 探讨的一样,我们可以使用 ButtonColumn 控件为 DataGrid 里的每一行提供一个可点击的按钮。诚然,这样也可以达到编辑的目的,但看起来会有一点凌乱。幸好,DataGrid 提供了EditCommandColumn控件以实现该功能。
EditCommandColumn 控件在 DataGrid 里新添一列,为每一行记录放置一个编辑按钮,当点击该按钮时,将引起页面回传并触发 EditCommand 事件。就像稍后你将看到的那样,我们需要为这个事件写代码。现在让我们看看如何用 EditCommandColumn 控件为 DataGrid 添加编辑按钮。很简单,就像添加 BoundColumn 或 ButtonColumn 控件一样:
<asp:DataGrid id="dgProducts" runat="server"
AutoGenerateColumns="False" CellPadding="4"
HeaderStyle-BackColor="Black"
HeaderStyle-ForeColor="White"
HeaderStyle-HorizontalAlign="Center"
HeaderStyle-Font-Bold="True">
<Columns>
<asp:EditCommandColumn EditText="Edit Info"
ButtonType="PushButton"
UpdateText="Update" CancelText="Cancel" />
<asp:BoundColumn HeaderText="Product ID" DataField="ProductID"
ReadOnly="True" />
<asp:BoundColumn HeaderText="Price" DataField="UnitPrice"
ItemStyle-HorizontalAlign="Right"
DataFormatString="{0:$#,###.##}" />
<asp:BoundColumn HeaderText="Name" DataField="ProductName" />
<asp:BoundColumn HeaderText="Description"
DataField="ProductDescription" />
</Columns>
</asp:DataGrid>
EditCommandColumn 控件有很多可选属性,比如:ButtonType,它指定按钮类型为超链接(默认为LinkButton)或 PushButton ;以及为Edit, Update和Cancel按钮指定text的 EditText, UpdateText 和 CancelText 属性;此外,还有其它各种的显示属性,比如 HeaderText, ItemStyle等等。
如果你仔细的阅读上述代码,你可能会很吃惊 EditCommandColumn 控件居然会有 UpdateText 和CancelText 属性。毕竟我只提及过 EditCommandColumn 控件提供编辑按钮。准确的说,除了要编辑的那一行外,每一行都包含一个编辑按钮,而要编辑的那一行却显示的是2个按钮,Update"和"Cancel"按钮。
选择一行供编辑
DataGrid 有一个名为 EditItemIndex 的属性,它指定那一行记录要编辑。DataGrid 从0开始为它包含的行记录排顺序。默认情况下,当没有哪行记录要编辑时 EditItemIndex 的值为-1.当我们点击某行记录的"Edit"时,将触发 EditCommand 事件处理器。在该事件处理器里,我们将 EditItemIndex 属性与要编辑的那一行对应起来,然后重新绑定 DataGrid 的数据(调用BindData()),代码看起来像下面的这样:
Sub dgProducts_Edit(sender As Object, e As DataGridCommandEventArgs)
dgProducts.EditItemIndex = e.Item.ItemIndex
BindData()
End Sub
将该事件处理器与 EditCommand 事件对应起来,在 DataGrid 里进行指定,如下:
<asp:DataGrid id="dgProducts" runat="server"
...
OnEditCommand="dgProducts_Edit"
... >
<Columns>
...
</Columns>
</asp:DataGrid>
有了这些代码,当用户点击"Edit"按钮时,页面发生回传,待编辑行的"Edit" 按钮替换成了"Update"和"Cancel"按钮。另外,方格里的数值由文本值(textual value)自动的转换成处于可编辑的 textbox 类型的数值了。
在某些情况下我们想让某些数据处于只读状态,好比 ProductID,它是 Products 表的关键字段。要想使 DataGrid 里的某些列不可编辑,我们只需要将其 ReadOnly 属性设置为 True。比如:
asp:DataGrid id="dgProducts" runat="server"
... >
<Columns>
<asp:BoundColumn HeaderText="Product ID" DataField="ProductID"
ReadOnly="True" />
...
</Columns>
</asp:DataGrid>
你可以为处于编辑状态的行设置各种各样的格式属性,方法是使用 DataGrid 的 EditItemStyle 属性。比如:
<asp:DataGrid id="dgProducts" runat="server"
...
EditItemStyle-BackColor="#eeeeee"
... >
<Columns>
...
</Columns>
</asp:DataGrid
自此,我们考察了如何选择一行来编辑,接下来我们考察当用户对处于编辑状态的行进行更新或取消更新时,如何添加代码应对。我们将在下一节探讨。
【注:本文由控件中国网转载】