[翻译]在GridView中针对鼠标单击的某一独立单元格进行编辑

Posted on 2007-04-22 20:45 webabcd 阅读(11290) 评论(97) 编辑收藏所属分类: Translation翻译、Control控件

原文地址：http://www.codeproject.com/KB/webforms/EditGridviewCells.aspx
[原文源码下载]
[译者改后源码下载]

原文发布日期：2007.04.07
作者：Declan Bright
翻译：webabcd

介绍
ASP.NET的GridView控件允许你通过设置它的EditIndex属性来编辑数据行，此时整个数据行都处于编辑模式。如果你在EditItemTemplate的一些列中使用了DropDownList控件，那么你也许不希望整个数据行都处于编辑模式。因为，如果每一个DropDownList控件都有很多选项的话，那么一次加载所有DropDownList控件的所有选项就会导致页面执行缓慢。

另外，如果你的数据行的编辑模式需要占用更多的空间的话，那么针对每一个独立的单元格进行编辑要优于针对整个数据行进行编辑。这里，我将示范如何实现这样的功能，又如何去处理事件验证（event validation）。

背景
本文基于我之前写的一篇文章：GridView和DataList响应单击数据行和双击数据行事件。如果你不知道如何让GridView响应单击数据行事件，那么你可以在阅读本文之前先看看这篇文章。

编辑某一个独立的GridView单元格。

我所演示的这个GridView有一个不可见的asp:ButtonField控件，它处于GridView的第一列，名为“SingleClick”。它用于给GridView的数据行增加单击事件。

<asp:ButtonField Text="SingleClick" CommandName="SingleClick" Visible="False" />

</Columns>

其它每一列的ItemTemplate中有一个可见的Label控件和一个不可见的TextBox或DropDownList控件。为了方便，我们称Label为显示控件，TextBox或DropDownList为编辑控件。

<asp:TemplateField HeaderText="Task">

<asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("Description") %>'></asp:Label>

<asp:TextBox ID="Description" runat="server" Text='<%# Eval("Description") %>' Width="175px" visible="false"></asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

这里的办法就是用显示控件来显示数据，当单元格所包含的显示控件被单击的时候，则把显示控件的Visible属性设置为false并且把编辑控件的Visible属性设置为true。这里不用使用EditItemTemplat。

在RowDataBound事件内循环为每一数据行的每一单元格增加单击事件。使用单元格在数据行中的索引作为事件参数，这样在单元格触发了单击事件后我们就可以知道到底是哪个单元格被单击了。

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)

{

if (e.Row.RowType == DataControlRowType.DataRow)

{

// 从第一个单元格内获得LinkButton控件

LinkButton _singleClickButton = (LinkButton)e.Row.Cells[0].Controls[0];

// 返回一个字符串，表示对包含目标控件的 ID 和事件参数的回发函数的 JavaScript 调用

string _jsSingle = ClientScript.GetPostBackClientHyperlink(_singleClickButton, "");

// 给每一个可编辑的单元格增加事件

for (int columnIndex = _firstEditCellIndex; columnIndex < e.Row.Cells.Count; columnIndex++)

{

// 增加列索引作为事件参数

string js = _jsSingle.Insert(_jsSingle.Length - 2, columnIndex.ToString());

// 给单元格增加onclick事件

e.Row.Cells[columnIndex].Attributes["onclick"] = js;

// 给单元格增加鼠标经过时指针样式

e.Row.Cells[columnIndex].Attributes["style"] += "cursor:pointer;cursor:hand;";

}

在RowCommand事件内读出命令参数和事件参数。这会告诉我们被选中的行和列的索引。

int _rowIndex = int.Parse(e.CommandArgument.ToString());

int _columnIndex = int.Parse(Request.Form["__EVENTARGUMENT"]);

因为知道了被选中的行和列的索引，所以可以通过把显示控件的Visible设置为false，编辑控件的Visible设置为true来把某个独立的单元格设置为编辑模式。然后通过清除单元格的属性来删除被选中单元格的单击事件。

// 获得被选中单元格的显示控件并设置其不可见

Control _displayControl = _gridView.Rows[_rowIndex].Cells[_columnIndex].Controls[1];

_displayControl.Visible = false;

// 获得被选中单元格的编辑控件并设置其可见

Control _editControl = _gridView.Rows[_rowIndex].Cells[_columnIndex].Controls[3];

_editControl.Visible = true;

// 清除被选中单元格属性以删除click事件

_gridView.Rows[_rowIndex].Cells[_columnIndex].Attributes.Clear();

下面有一些代码用于回发服务器后设置焦点到编辑控件，如果编辑控件是DropDownList的话，那么它的SelectedValue要设置为显示控件的值，如果编辑控件是TextBox的话，那么为了做好编辑的准备就要使它的文本被选中。

// 设置焦点到被选中的编辑控件

ClientScript.RegisterStartupScript(GetType(), "SetFocus",

"<script>document.getElementById('" + _editControl.ClientID + "').focus();</script>");

// 如果编辑控件是DropDownList的话

// SelectedValue设置为显示控件的值

if (_editControl is DropDownList && _displayControl is Label)

{

((DropDownList)_editControl).SelectedValue = ((Label)_displayControl).Text;

}

// 如果编辑控件是TextBox的话则选中文本框内文本

if (_editControl is TextBox)

{

((TextBox)_editControl).Attributes.Add("onfocus", "this.select()");

}

在这个Demo中，我把事件被触发的历史记录也写到了页里。

如果GridView处于编辑模式的话，那么要在RowUpdating事件里去查找被选中行的每一个单元格。如果发现单元格处于编辑模式的话，那么就调用“更新”代码。在这个Demo中，数据保存在DataTable里，而这个DataTable则储存在session中。

// 循环每一列以找到处于编辑模式下的单元格

for (int i = 1; i < _gridView.Columns.Count; i++)

{

// 获得单元格的编辑控件

Control _editControl = _gridView.Rows[e.RowIndex].Cells[i].Controls[3];

if (_editControl.Visible)

{

. update the data

}

为了确保RowUpdating事件在编辑单元格后被激发，要在Page_Load中来触发这个事件。编辑了TextBox后，通过按回车键或者单击另一单元格来使页面做回发处理，下面的这段代码就是用于确保任何数据的改变都会被更新。

if (this.GridView1.SelectedIndex > -1)

{

this.GridView1.UpdateRow(this.GridView1.SelectedIndex, false);

}

为了验证而注册回发和回调数据
在RowDataBound中创建的自定义事件必须要在页中注册。通过重写Render方法来调用ClientScriptManager.RegisterForEventValidation。通过GridViewRow.UniqueID返回行的唯一ID，按纽的唯一ID通过在行的唯一ID后附加“$ct100”而生成。

protected override void Render(HtmlTextWriter writer)

{

foreach (GridViewRow r in GridView1.Rows)

{

if (r.RowType == DataControlRowType.DataRow)

{

for (int columnIndex = _firstEditCellIndex; columnIndex < r.Cells.Count; columnIndex++)

{

Page.ClientScript.RegisterForEventValidation(r.UniqueID + "$ctl00", columnIndex.ToString());

}

base.Render(writer);

}

这将防止任何“回发或回调参数无效”的错误。

这个Demo中的其它示例
使用SQL数据源控件编辑某一独立的GridView单元格
用SqlDataSouce控件实现这个技术需要对GridView的RowUpdating事件做一些修改。当更新GridView的行的时候，SqlDataSource控件一般要把值（values）从EditItemTemplate转移到NewValues集合里。因为我们没有使用EditItemTemplate，所以这种情况下值（values）不会自动地转移到NewValues集合里。

e.NewValues.Add(key, value);

我在App_Data文件夹下使用了一个简单的SQL Server Express数据库。（要使用你自己的数据库的话，你可以修改web.config里的连接字符串）

使用对象数据源控件编辑某一独立的GridView单元格
本示例使用了App_Code文件夹内的两个类：
·Task.cs – 任务对象
·TaskDataAccess.cs – 管理任务对象

Aspx页的后置代码与SQL Data Source示例是一样的。 ObjectDataSource通过TaskDataAccess.cs类里的GetTasks和UpdateTask方法来管理数据。

有着电子数据表样式的GridView
这里有一个与电子数据表的样式很像的GridView。（虽然它看起来像一个电子数据表，但是并不是真的有像电子数据表一样的功能，它仍然是一个GridView。）

这里虽然有一些单击后改变单元格样式的附加代码，但是主要的代码还是与上面所述是相同的。

用SQL数据源控件实现有着电子数据表样式的GridView
本示例与上面的基本相同，但是它修改了GridView的RowUpdating事件以使其允许用SqlDataSource控件来工作。

参考
·GridView和DataList响应单击数据行和双击数据行事件
·ASP.NET 2.0数据教程

结论
如果你想在GridView中一次只针对一个单元格进行编辑，那么这个方法将会对你有所帮助。

译者注：事件验证（EventValidation）。出于安全目的，此功能验证回发或回调事件的参数是否来源于最初呈现这些事件的服务器控件。如果数据有效并且是预期的，则使用ClientScriptManager.RegisterForEventValidation方法来注册回发或回调数据以进行验证。

Feedback

#1楼  回复 引用 查看

2007-04-23 08:26 by 高海东

很好的方法，如果能有方向键的上下左右移动就更好

#2楼 [楼主] 回复 引用 查看

2007-04-23 08:55 by webabcd

@高海东
嗯，什么都是可以做到的

#3楼  回复 引用 查看

2007-04-23 10:06 by 哈密瓜牌牛奶

不错哦！！

#4楼 [楼主] 回复 引用 查看

2007-04-23 10:45 by webabcd

@哈密瓜牌牛奶
:)
同感，正准备应用到一些项目中

#5楼  回复 引用 查看

2007-04-23 11:01 by 想吃老虎的猪

不错谢谢

#6楼  回复 引用 查看

2007-04-23 11:02 by haitian

学习了谢谢！

#7楼  回复 引用

2007-04-23 11:02 by ivw [未注册用户]

终于出来了，呵呵。支持

#8楼 [楼主] 回复 引用 查看

2007-04-23 11:29 by webabcd

@想吃老虎的猪
@haitian
@ivw
:)

#9楼  回复 引用

2007-04-23 11:37 by ivw [未注册用户]

不知道有没有想过把这个功能结合你之前扩展的那个gridview控件那里呢？

#10楼 [楼主] 回复 引用 查看

2007-04-23 11:53 by webabcd

@ivw
可以，没问题的

#11楼  回复 引用

2007-04-23 13:02 by WinKen [未注册用户]

效果不错.
不过一般的项目赶时间不敢用...

学习了.....

谢谢,,

#12楼 [楼主] 回复 引用 查看

2007-04-23 13:38 by webabcd

@WinKen
:)
不谢

#13楼  回复 引用

2007-04-23 14:54 by ivw [未注册用户]

让我试试（呵呵），他这个编辑的原理好像就是用一个button模拟出编辑更新按钮，是吗？如果加上判断，数据没有更新时不回发，那可能性能上会有很大的改进。

#14楼  回复 引用

2007-04-23 15:14 by ivw [未注册用户]

能不能做到点击后整行处于编辑状态啊？这样要改一行数据的时候就方便多了

#15楼  回复 引用

2007-04-23 15:24 by ivw [未注册用户]

楼主试试在ＳＱＬ里跟踪一下，一点击他做了9次的select操作，如果数据量大的话这可不简单啊。你那里是这样吗？

#16楼 [楼主] 回复 引用 查看

2007-04-23 17:06 by webabcd

@ivw
是，更新就是用GridView.UpdateRow方法
没有更新时也要会回发的，比如要把TextBox变成Label

点击后整行处于编辑状态其实就是响应一下行的单击事件，让鼠标单击行后相当于单击了行的CommandName="Edit"的按钮就ok

跟踪了一下，一次select操作

#17楼  回复 引用

2007-04-23 17:31 by ivw [未注册用户]

改成这个我这里试不成功。CommandName="Edit"；

我改用了ＳＱＬ2000,跟踪的确发生了9次select操作，你那就没有，真的奇怪了，代码我没有改过。

把这功能放到你那扩展的gridview控件里基本成功，不过如果还有一些问题没解决。

#18楼  回复 引用

2007-04-23 18:16 by ivw [未注册用户]

想请问你，得到了行号，怎样可以得到这行的列值啊？

#19楼 [楼主] 回复 引用 查看

2007-04-23 21:29 by webabcd

@ivw
没问题的，当然要有EditItemTemplate

列索引是事件的参数，读取的时候这么读Request.Form["__EVENTARGUMENT"]
列索引知道了，列的值就能读出来了

#20楼  回复 引用

2007-04-24 12:01 by ivw [未注册用户]

为什么去掉Render这个过程他也没问题啊？

#21楼  回复 引用

2007-04-24 12:15 by ivw [未注册用户]

请问EditItemTemplate这里是添加一个编辑、更新、取消那个按钮吗？

#22楼 [楼主] 回复 引用 查看

2007-04-24 12:36 by webabcd

@ivw
Render那段是为了实现事件验证（EventValidation），是出于安全目的的，所以去掉也没问题

可以用CommandField
或者自己写按钮然后设置CommandName

#23楼  回复 引用

2007-04-24 15:31 by ivw [未注册用户]

我用了edit后他只能编辑第１列，其它不能编辑啊。

#24楼  回复 引用

2007-04-24 15:49 by ivw [未注册用户]

如果把 private const int _firstEditCellIndex = 1;设成１下面这两句就会提示超出范围。你有试过吗／

Control _displayControl = _gridView.Rows[e.RowIndex].Cells[i].Controls[1];
Control _editControl = _gridView.Rows[e.RowIndex].Cells[i].Controls[3];