创建完全可编辑的 DataGrid

在论坛中我看到过许多相同或相似的问题：我怎样在我的DataGrid的每一行中放置检查框、文本框等等？怎样更新它们的值？答案相当简单，在这篇文章中，我将向你展示如何完成它。

我们都知道，DataGrid是一个功能非常强大的工具。根据我的经验，在90%以上的时间中，DataGrid都被用来显示数据，并可能一次编辑一行数据。而某些时候，可能需要一次编辑多行，甚至是所有数据。一个实际的例子就是在网上销售物品的应用程序中，顾客可能一次要变更他们篮子中的一种或多种物品，单击检查框移去他们不想要的商品。

构想

在这个例子中，我写了一个简单的WebForm来管理存储在XML中的联系人列表。这个需求是非常简单的：具有添加新联系人，编辑/删除现有联系人的能力。用户可以一次修改或删除多个联系人，我也允许用户按他们选定的列来对数据网格进行排序。

我的例子是用C#编写的。如果你更喜欢这些代码的VB版本，在下载文件中有这两种格式的代码。

Contacts.xml

这个例子中的XML数据文件非常简单直观。由于它非常简单，所以我没有创建规划。

<?xmlversion="1.0"standalone="yes"?>
<Contacts>
<Contact>
<Email>myaddress@mycompany.com</Email>
<FirstName>John</FirstName>
<LastName>Doe</LastName>
</Contact>
<Contact>
<Email>youraddress@yourcompany.com</Email>
<FirstName>Jane</FirstName>
<LastName>Doe</LastName>
</Contact>
</Contacts>

ContactList.aspx

设置WebForm非常简单。我放置了一个新的DataGrid到我的窗体中，并且设置它为4列，第一列都包含了用来删除联系人的检查框。你会注意到我在这里做的主要工作就是以模板列(TemplateColumn)的形式创建了每一列。这允许我放置文本框和检查框对象到数据模板(ItemTemplate)中.这是一个在网格每一行中显示文本以外的其它东西的技巧。除此以外，你还会注意到我使用FooterTemplate来使新建联系人变得简单而直观。

我也包含了一个链接按钮(LinkButton)，用来保存用户所做的修改及删除操作。但它并不用来添加新联系人。添加新联系人的操作由最后一列的页脚模板中链接按钮(LinkButton)来完成。

<asp:datagridid="dgContacts"runat="server"ShowFooter="True"AllowSorting="True"Forefontcolor="Black"GridLines="None"CellPadding="2"Backfontcolor="LightGoldenrodYellow"BorderWidth="1px"Borderfontcolor="Tan"Width="499px"AutoGenerateColumns="False"DataKeyField="Email">
<SelectedItemStyleForefontcolor="GhostWhite"Backfontcolor="DarkSlateBlue"></SelectedItemStyle>
<AlternatingItemStyleBackfontcolor="PaleGoldenrod"></AlternatingItemStyle>
<HeaderStyleFont-Bold="True"Backfontcolor="Tan"></HeaderStyle>
<FooterStyleBackfontcolor="Tan"></FooterStyle>
<Columns>
<asp:TemplateColumnSortExpression="FirstName"HeaderText="FirstName">
<ItemTemplate>
<asp:TextBoxid=Firstrunat="server"Width="109px"Text='<%#DataBinder.Eval(Container,"DataItem.FirstName")%>'>
</asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:TextBoxid="NewFirst"runat="server"Width="109px"></asp:TextBox>
</FooterTemplate>
</asp:TemplateColumn>
<asp:TemplateColumnSortExpression="LastName"HeaderText="LastName">
<ItemTemplate>
<asp:TextBoxid=Lastrunat="server"Width="109px"Text='<%#DataBinder.Eval(Container,"DataItem.LastName")%>'>
</asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:TextBoxid="NewLast"runat="server"Width="109px"></asp:TextBox>
</FooterTemplate>
</asp:TemplateColumn>
<asp:TemplateColumnSortExpression="Email"HeaderText="Email">
<ItemTemplate>
<asp:TextBoxid=Emailrunat="server"Text='<%#DataBinder.Eval(Container,"DataItem.Email")%>'>
</asp:TextBox>
</ItemTemplate>
<FooterTemplate>
<asp:TextBoxid="NewEmail"runat="server"></asp:TextBox>
</FooterTemplate>
</asp:TemplateColumn>
<asp:TemplateColumnHeaderText="DeleteContact">
<ItemStyleHorizontalAlign="Center"></ItemStyle>
<ItemTemplate>
<asp:CheckBoxRunat="server"ID="chkDelete"></asp:CheckBox>
</ItemTemplate>
<FooterStyleHorizontalAlign="Center"></FooterStyle>
<FooterTemplate>
<asp:LinkButtonRunat="server"Text="Add"CommandName="Add"ID="Linkbutton1"NAME="Linkbutton1"></asp:LinkButton>
</FooterTemplate>
</asp:TemplateColumn>
</Columns>
</asp:datagrid>

ContactList.cs

当我选择用XML文件来存取数据后，我就决定要使用DataSet来存取它。因为DataSet对象有ReadXml和WriteXml方法，所以这是非常合理的选择。第一步是在XML中读取数据。正如你从代码中所看到的，我创建了一个成员用来处理数据排序。

privateDataSet_dsContacts;
privatestring_sSort;

privatevoidPage_Load(objectsender,System.EventArgse)
{
//装载XML文件.
_dsContacts=newDataSet();
_dsContacts.ReadXml(Server.MapPath("Contacts.xml"));
DataColumn[]dcPk={_dsContacts.Tables["Contact"].Columns["Email"]};
_dsContacts.Tables["Contact"].PrimaryKey=dcPk;

if(!Page.IsPostBack)
{
//如果是第一次装载的话，绑定数据。
BindContacts();
_sSort="FirstName";
}
else
{
//否则，从视图状态中读取排序状态.
_sSort=(string)ViewState["Sort"];
}
}

第二步，我创建了一个用来绑定数据到网格的方法，它包含了数据排序逻辑以及从磁盘读取数据的方法。

privatevoidBindContacts()
{
//保存排序状态到视图状态中.
ViewState["Sort"]=_sSort;

//绑定网格到已排序的数据视图中.
DataViewdv=newDataView(_dsContacts.Tables["Contact"]);
dv.Sort=_sSort;
dgContacts.DataSource=dv;
dgContacts.DataBind();
}

privatevoidSaveContacts()
{
_dsContacts.WriteXml(Server.MapPath("Contacts.xml"));
}

ItemCommand事件用来处理向列表中添加新联系人。注意：我检查了CommandName参数是否为Add.它是来处理ASPX页中网格最后一列的页脚模板（FooterTemplate）中的链接按钮（LinkButton）的返回值。

privatevoiddgContacts_ItemCommand(objectsource,System.Web.UI.WebControls.DataGridCommandEventArgse)
{
//添加新数据到dataset.这里我使用了数组以提高处理效率.
if(e.CommandName=="Add")
{
string[]sContact={"","",""};
sContact[0]=((TextBox)e.Item.FindControl("NewEmail")).Text;
sContact[1]=((TextBox)e.Item.FindControl("NewFirst")).Text;
sContact[2]=((TextBox)e.Item.FindControl("NewLast")).Text;

_dsContacts.Tables["Contact"].Rows.Add(sContact);

SaveContacts();
}

BindContacts();
}

我跳过了SortCommand代码，因为有许多其它文档已经非常详细地讨论过如何排序了。如果你下载了这个例子的源代码，它就包含在里面。

最后，我将窗体上链接按钮(LinkButton)的单击事件(onClick)移到了这里。这里我通过循环检测DataGrid中的数据项来执行任何必需的删除及更新操作。

privatevoidbtnUpdate_Click(objectsender,System.EventArgse)
{
//循环处理每个数据项.
foreach(DataGridItemdiindgContacts.Items)
{
//确信是数据项而不是页首或页尾.
if(di.ItemType==ListItemType.Item||di.ItemType==ListItemType.AlternatingItem)
{
//取得更新或删除操作执行以后的当前行.
DataRowdr=_dsContacts.Tables["Contact"].Rows.Find(dgContacts.DataKeys[di.ItemIndex]);

//检查是否需要删除某行.
if(((CheckBox)di.FindControl("chkDelete")).Checked)
{
_dsContacts.Tables["Contact"].Rows.Remove(dr);//删除指定行
}
else
{
//更新数据行.
dr["Email"]=((TextBox)di.FindControl("Email")).Text;
dr["FirstName"]=((TextBox)di.FindControl("First")).Text;
dr["LastName"]=((TextBox)di.FindControl("Last")).Text;
}
}
}

//如果有变化则保存它.
if(_dsContacts.HasChanges())
{
SaveContacts();
}

BindContacts();//绑定
}

结束语

我可以很容易地通过控件的位置找到控件中每一个DataGridItem的单元（Cells）。有多种方法可以实现它，我确信你可以找到完成这项任务的更好的方法。正如你所看到的，一次编辑整个数据网格是非常简单的。同样的方法经过轻微的修改也可用于分页网格

以上所分享的是关于创建完全可编辑的 DataGrid，下面是编辑为你推荐的有价值的用户互动：

　　相关问题：怎么在easyui的datagrid的最后一行添加一个“编辑”...

　　答：用formatter属性进行格式化单元格 columns : [ [ //...... {title : '操作', field : 'opt', width : getWidth(0.1), align : 'center', formatter : function(value, row, index) { var str = ""; str += ''; str += ''; return str; } } ] ], ... >>详细

　　相关问题：winform 中 对DataGrid 简单操作

　　答：一、WinForm下DataGrid的结构 想要使用自定义的列样式，首先必须了解DataGrid的结构。在我们将一个DataGrid控件拖到窗体上的时候，我们可以马上在属性中设置它的样式，改变它数据行的交替色等。这不同于ASP.NET下的样式设置。在ASP.NET中，最终... >>详细

　　相关问题：jquery中有datagrid怎么设置编辑和删除按钮

　　答：今天说下批量删除，双击表单修改、选中行修改，增加行修改，再有就是扩展editor的方法，无需废话，直接上代码，代码中的注释写的很详细： 复制代码 代码如下: var editFlag = undefined;//设置一个编辑标记 //因为layout框架指向href时，只取htm... >>详细