如何将整个DataGrid列设置为编辑模式
3.47/5 (8投票s)
本文介绍了如何将整个 DataGrid 列设置为编辑模式。
引言
我们都知道 DataGrid 中可用的插入、编辑和更新列。 如果您没有太多行，并且想要编辑整行，这些命令非常有用。
但是，如果您只想编辑列中的值呢？ 几天前，我就遇到了这种情况。 我想编辑整列，所以我开始寻找一些代码来解决这个问题。 我在互联网上找不到任何东西，所以我不得不自己编写一些代码。
在此处查看在线示例：here。
代码
让我们看看如何做到这一点。 首先，我们必须找到一种方法来告诉我们要编辑哪一行，一个好的解决方案是使用网格排序命令，就像这样，稍后我会向您展示其余部分
Private Sub ItemsGrid_SortCommand(ByVal source As System.Object, _
ByVal e As System.Web.UI.WebControls.DataGridSortCommandEventArgs) _
Handles DataGrid1.SortCommand
End Sub
其次，我们必须对 DataGrid 进行一些格式设置。 在 DataGrid 的属性生成器中，我们添加一些绑定列。 填写列的标题文本和数据字段，单击以转换为模板列，并填写我们要编辑的每一列的排序表达式。 最后，我们将 AllowSorting 属性设置为 True。
在设计器中，右键单击 DataGrid 并选择“编辑模板”，浏览每一列，并将文本框从 EditItemTemplate 移动到 EditTemplate，以及已有的 Label 控件。 我们将 Label 控件和 TextBox 控件的编号设置为与列的编号匹配，以便使后面的代码更容易。
此示例中网格的 HTML 代码如下所示。 将其复制到您的 <body></body> 标签之间。
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" style="Z-INDEX: 101; LEFT: 8px; POSITION: absolute; TOP: 24px"
cellSpacing="1" cellPadding="1" width="600" border="1">
<tr>
<TD>
<asp:datagrid id="DataGrid1" runat="server" AllowSorting="True"
GridLines="Vertical" CellPadding="3" BackColor="White"
BorderWidth="1px" BorderColor="#999999"
AutoGenerateColumns="False" BorderStyle="None">
<FooterStyle ForeColor="Black" BackColor="#CCCCCC"></FooterStyle>
<SelectedItemStyle Font-Bold="True" ForeColor="White"
BackColor="#008A8C"></SelectedItemStyle>
<AlternatingItemStyle BackColor="Gainsboro"></AlternatingItemStyle>
<ItemStyle ForeColor="Black" BackColor="#EEEEEE"></ItemStyle>
<HeaderStyle Font-Bold="True" ForeColor="White"
BackColor="#000084"></HeaderStyle>
<Columns>
<asp:BoundColumn DataField="IdNr" HeaderText="IdNr"></asp:BoundColumn>
<asp:TemplateColumn SortExpression="Item1" HeaderText="Item1">
<ItemTemplate>
<asp:Label id=Label1 runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Item1") %>'>
</asp:Label>
<asp:TextBox id=TextBox1 runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Item1") %>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn SortExpression="Item2" HeaderText="Item2">
<ItemTemplate>
<asp:Label id=Label2 runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Item2") %>'>
</asp:Label>
<asp:TextBox id=TextBox2 runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Item2") %>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn SortExpression="Item3" HeaderText="Item3">
<ItemTemplate>
<asp:Label id=Label3 runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Item3") %>'>
</asp:Label>
<asp:TextBox id=TextBox3 runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Item3") %>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn SortExpression="Item4" HeaderText="Item4">
<ItemTemplate>
<asp:Label id=Label4 runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Item4") %>'>
</asp:Label>
<asp:TextBox id=TextBox4 runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Item4") %>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn SortExpression="Item5" HeaderText="Item5">
<ItemTemplate>
<asp:Label id=Label5 runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Item5") %>'>
</asp:Label>
<asp:TextBox id=TextBox5 runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Item5") %>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn SortExpression="Item6" HeaderText="Item6">
<ItemTemplate>
<asp:Label id=Label6 runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Item6") %>'>
</asp:Label>
<asp:TextBox id=TextBox6 runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Item6") %>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn SortExpression="Item7" HeaderText="Item7">
<ItemTemplate>
<asp:Label id=Label7 runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Item7") %>'>
</asp:Label>
<asp:TextBox id=TextBox7 runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Item7") %>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn SortExpression="Item8" HeaderText="Item8">
<ItemTemplate>
<asp:Label id=Label8 runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Item8") %>'>
</asp:Label>
<asp:TextBox id=TextBox8 runat="server"
Text='<%# DataBinder.Eval(Container, "DataItem.Item8") %>'>
</asp:TextBox>
</ItemTemplate>
</asp:TemplateColumn>
</Columns>
<PagerStyle HorizontalAlign="Center" ForeColor="Black"
BackColor="#999999" Mode="NumericPages"></PagerStyle>
</asp:datagrid>
</TD>
</tr>
</TABLE>
</form>
然后我们必须编写一些代码，首先我们必须填充网格。 使用此代码
Private Sub Page_Load(ByVal sender As System.Object, _
ByVal e As System.EventArgs) Handles MyBase.Load
'Put user code to initialize the page here
If Not IsPostBack Then
' Populate the table the fist time the page is loaded.
'Here you can use whatever source you want. Maybe a DataBase.
Dim dt As DataTable = New DataTable
Dim i As Integer
' Define the columns in the table.
dt.Columns.Add(New DataColumn("IdNr", GetType(String)))
For i = 1 To 9
dt.Columns.Add(New DataColumn("Item" & i, _
GetType(String)))
Next
Dim dr As DataRow
'Adding some values to populate the table
For i = 1 To 10
dr = dt.NewRow()
dr(0) = i & 1
dr(1) = "Hello World " & i & 2
dr(2) = "Hello World " & i & 3
dr(3) = "Hello World " & i & 4
dr(4) = "Hello World " & i & 5
dr(5) = "Hello World " & i & 6
dr(6) = "Hello World " & i & 7
dr(7) = "Hello World " & i & 8
dr(8) = "Hello World " & i & 9
'Fill the table
dt.Rows.Add(dr)
Next
' Take care of the values between roundtrips to the server
Session("Source") = dt
Session.Timeout = 600
'Binding the values from the table to the grid and fill it.
DataGrid1.DataSource = dt
DataBind()
DataGrid1.Columns(8).Visible = False
DataGrid1.ToolTip = "Click the header text" & _
" to set the column in edit mode"
'Hide all textBoxes in the grid
Dim dgi As DataGridItem
For i = 1 To DataGrid1.Columns.Count - 1
For Each dgi In DataGrid1.Items
CType(dgi.Cells(i).FindControl("TextBox"_
& i), TextBox).Visible = False
Next
Next
End If
End Sub
接下来，我们想要在与服务器的往返过程中保留编辑后的值和所有其他值。 在这里，我们使用一个函数和一个 ICollection，如下所示
Function CreateDataSource() As ICollection
' Create a new DataTable based on values from the DataGrid
Dim i, y As Integer
Dim dt As DataTable = New DataTable
' Filling in the same headers as in the existing DataGrid
For i = 0 To DataGrid1.Columns.Count - 1
dt.Columns.Add(New _
DataColumn(DataGrid1.Columns(i).HeaderText, _
GetType(String)))
Next
Dim dr As DataRow
Dim dgi As DataGridItem
'Fill in the vaues from the DataGrid including new entries
For Each dgi In DataGrid1.Items
' Making a counter to track
' the row number for column 0
' that is not in edit mode.
y = y + 1
dr = dt.NewRow()
'Duplicate the DataGrid
dr(0) = DataGrid1.Items(y - 1).Cells(0).Text
For i = 1 To DataGrid1.Columns.Count - 1
dr(i) = _
CType(dgi.Cells(i).FindControl("TextBox" _
& i), TextBox).Text
Next
dt.Rows.Add(dr)
Next
'Bind the grid with the new values
DataGrid1.DataSource = dt
DataBind()
' Take care of the values between roundtrips to the server
Session("Source") = dt
Session.Timeout = 600
End Function
现在，您明白了为什么我们将 Label 和 TextBox 控件的编号设置为与列号匹配并按递增顺序排列。 这使得使用 For – Next 循环变得容易。
仍然缺少一些代码，即如何将列设置为编辑模式，如下所示
Private Sub ItemsGrid_SortCommand(ByVal source As System.Object, _
ByVal e As System.Web.UI.WebControls.DataGridSortCommandEventArgs) _
Handles DataGrid1.SortCommand
'Using the sort command to set the textBoxes in edit mode
CreateDataSource() 'First calling Function to rebind the Grid
'Find the column that was clicked
Dim dt As DataTable = CType(Session("Source"), DataTable)
Dim ColumnNr As Integer
ColumnNr = dt.Columns(e.SortExpression).Ordinal
'Hide the textBoxes and open a new column in edit mode
Dim dgi As DataGridItem
Dim i As Integer
For Each dgi In DataGrid1.Items
For i = 1 To DataGrid1.Columns.Count - 1
CType(dgi.Cells(ColumnNr).FindControl("TextBox" _
& ColumnNr), TextBox).Visible = True
CType(dgi.Cells(ColumnNr).FindControl("Label" & _
ColumnNr), Label).Visible = False
CType(dgi.Cells(ColumnNr).FindControl("TextBox" _
& i), TextBox).Visible = False
Next
Next
End Sub
在这里您可以看到我正在使用 DataTable，这是因为我使用它来查找被单击的列。 像这样
'Find the column that was clicked
Dim dt As DataTable = CType(Session("Source"), DataTable)
Dim ColumnNr As Integer
ColumnNr = dt.Columns(e.SortExpression).Ordinal
我这样做的原因是 .Ordinal 不是 DataGrid 集合的成员。
其余的只是隐藏 TextBoxes 并将新列设置为编辑模式。 我再次简单地使用 For – Next 循环。
以这种方式进行的另一个优点是，在编辑过程中，我们不会将任何内容发布回数据库。 我们可以简单地完成所有编辑，并在完成时，我们可以将编辑后的网格发送回数据库。 只需添加一个“更新”按钮并编写一些代码来完成此操作即可。
希望这对某人有用。