扩展GridView控件： 响应行的单击事件和双击事件，并在服务端处理 使用方法（设置属性）： BoundRowClickCommandName - 行的单击事件需要绑定的CommandName BoundRowDoubleClickCommandName - 行的双击事件需要绑定的CommandName
GridView既强大又好用。为了让它更强大、更好用，我们来写一个继承自GridView的控件。
扩展GridView控件(6) - 响应行的单击事件和双击事件
作者：webabcd
/*正式版的实现 开始*/
介绍
扩展GridView控件：
响应行的单击事件和双击事件，并在服务端处理
使用方法（设置属性）：
BoundRowClickCommandName - 行的单击事件需要绑定的CommandName
BoundRowDoubleClickCommandName - 行的双击事件需要绑定的CommandName
关键代码
单击
using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;
using System.Web.UI;
namespace YYControls.SmartGridViewFunction
{
/**//// <summary>
/// 扩展功能：响应行的单击事件
/// </summary>
public class RowClickFunction : ExtendFunction
{
List<string> _rowClickButtonUniqueIdList = new List<string>();
/**//// <summary>
/// 构造函数
/// </summary>
public RowClickFunction()
: base()
{
}
/**//// <summary>
/// 构造函数
/// </summary>
/// <param name="sgv">SmartGridView对象</param>
public RowClickFunction(SmartGridView sgv)
: base(sgv)
{
}
/**//// <summary>
/// 扩展功能的实现
/// </summary>
protected override void Execute()
{
this._sgv.RowDataBoundCell += new SmartGridView.RowDataBoundCellHandler(_sgv_RowDataBoundCell);
this._sgv.RenderBegin += new SmartGridView.RenderBeginHandler(_sgv_RenderBegin);
}
/**//// <summary>
/// RowDataBoundCell
/// </summary>
/// <param name="sender"></param>
/// <param name="gvtc"></param>
void _sgv_RowDataBoundCell(object sender, GridViewTableCell gvtc)
{
TableCell tc = gvtc.TableCell;
foreach (Control c in tc.Controls)
{
IButtonControl ibc = c as IButtonControl;
if (ibc != null && this._sgv.BoundRowClickCommandName == ibc.CommandName)
{
// 300毫秒后响应单击事件的脚本（避免和双击事件冲突）
string js = this._sgv.Page.ClientScript.GetPostBackClientHyperlink(c, "");
js = js.Insert(11, "setTimeout(\"");
js += "\", 300)";
GridViewRow gvr = tc.Parent as GridViewRow;
Helper.Common.SetAttribute(gvr, "onclick", js, AttributeValuePosition.Last);
_rowClickButtonUniqueIdList.Add(c.UniqueID);
}
}
}
/**//// <summary>
/// RenderBegin
/// </summary>
/// <param name="sender"></param>
/// <param name="writer"></param>
void _sgv_RenderBegin(object sender, HtmlTextWriter writer)
{
foreach (string uniqueId in this._rowClickButtonUniqueIdList)
{
// 注册回发或回调数据以进行验证
this._sgv.Page.ClientScript.RegisterForEventValidation(uniqueId);
}
}
}
}
双击
using System;
using System.Collections.Generic;
using System.Text;
using System.Web.UI.WebControls;
using System.Web.UI;
namespace YYControls.SmartGridViewFunction
{
/**//// <summary>
/// 扩展功能：响应行的双击事件
/// </summary>
public class RowDoubleClickFunction : ExtendFunction
{
List<string> _rowDoubleClickButtonUniqueIdList = new List<string>();
/**//// <summary>
/// 构造函数
/// </summary>
public RowDoubleClickFunction()
: base()
{
}
/**//// <summary>
/// 构造函数
/// </summary>
/// <param name="sgv">SmartGridView对象</param>
public RowDoubleClickFunction(SmartGridView sgv)
: base(sgv)
{
}
/**//// <summary>
/// 扩展功能的实现
/// </summary>
protected override void Execute()
{
this._sgv.RowDataBoundCell += new SmartGridView.RowDataBoundCellHandler(_sgv_RowDataBoundCell);
this._sgv.RenderBegin += new SmartGridView.RenderBeginHandler(_sgv_RenderBegin);
}
/**//// <summary>
/// RowDataBoundCell
/// </summary>
/// <param name="sender"></param>
/// <param name="gvtc"></param>
void _sgv_RowDataBoundCell(object sender, GridViewTableCell gvtc)
{
TableCell tc = gvtc.TableCell;
foreach (Control c in tc.Controls)
{
IButtonControl ibc = c as IButtonControl;
if (ibc != null && this._sgv.BoundRowDoubleClickCommandName == ibc.CommandName)
{
// 响应双击事件的脚本
string js = this._sgv.Page.ClientScript.GetPostBackClientHyperlink(c, "");
GridViewRow gvr = tc.Parent as GridViewRow;
Helper.Common.SetAttribute(gvr, "ondblclick", js, AttributeValuePosition.Last);
_rowDoubleClickButtonUniqueIdList.Add(c.UniqueID);
}
}
}
/**//// <summary>
/// RenderBegin
/// </summary>
/// <param name="sender"></param>
/// <param name="writer"></param>
void _sgv_RenderBegin(object sender, HtmlTextWriter writer)
{
foreach (string uniqueId in this._rowDoubleClickButtonUniqueIdList)
{
// 注册回发或回调数据以进行验证
this._sgv.Page.ClientScript.RegisterForEventValidation(uniqueId);
}
}
}
}
/*正式版的实现 结束*/
/*测试版的实现 开始*/
介绍
为了让GridView的数据行可以响应鼠标的单击和双击事件，一般我们会在GridView的RowDataBound事件中给<tr>加上客户端代码，为了简化这个步骤，我们来扩展一下它。
控件开发
1、新建一个继承自GridView的类。
/**//// <summary>
/// 继承自GridView
/// </summary>
[ToolboxData(@"<{0}:SmartGridView runat='server'></{0}:SmartGridView>")]
public class SmartGridView : GridView
{
}
2、加两个属性，分别是单击行事件所对应的按钮的ID和双击行事件所对应的按钮的ID
private string _rowClickButtonID;
/**//// <summary>
/// 单击行事件所对应的按钮的ID
/// </summary>
[Description("单击行事件所对应的按钮的ID"), DefaultValue(""), Category("扩展")]
public virtual string RowClickButtonID
{
get { return _rowClickButtonID; }
set { _rowClickButtonID = value; }
}
private string _rowDoubleClickButtonID;
/**//// <summary>
/// 双击行事件所对应的按钮的ID
/// </summary>
[Description("双击行事件所对应的按钮的ID"), DefaultValue(""), Category("扩展")]
public virtual string RowDoubleClickButtonID
{
get { return _rowDoubleClickButtonID; }
set { _rowDoubleClickButtonID = value; }
}
3、新建一个JavaScriptConstant类，把我们要用到的javascript存在一个常量里
using System;
using System.Collections.Generic;
using System.Text;
namespace YYControls.SmartGridView
{
/**//// <summary>
/// javascript
/// </summary>
public class JavaScriptConstant
{
internal const string jsClickAndDoubleClick = @"<script type=""text/javascript"">
//<![CDATA[
var isDoubleClick = false;
function yy_RowClick(id)
{
setTimeout(""yy_RowClickTimeout('""+id+""')"", 300);
}
function yy_RowClickTimeout(id)
{
if (isDoubleClick == false)
{
// 执行ID所指按钮的click事件
document.getElementById(id).click();
}
isDoubleClick = true;
}
function yy_RowDoubleClick(id)
{
if (isDoubleClick == true)
{
// 执行ID所指按钮的click事件
document.getElementById(id).click();
}
isDoubleClick = true;
}
//]]>
</script>";
}
}
4、重写OnPreRender方法，注册上面那段客户端脚本
/**//// <summary>
/// OnPreRender
/// </summary>
/// <param name="e"></param>
protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
if (!String.IsNullOrEmpty(RowClickButtonID) || !String.IsNullOrEmpty(RowDoubleClickButtonID))
{
if (!Page.ClientScript.IsClientScriptBlockRegistered("jsClickAndDoubleClick"))
{
Page.ClientScript.RegisterClientScriptBlock(
this.GetType(),
"jsClickAndDoubleClick", JavaScriptConstant.jsClickAndDoubleClick
);
}
}
}
5、重写OnRowDataBound以实现数据行响应鼠标的单击和双击事件的功能。主要是给<tr>加上客户端代码，用来调用某个按钮的click事件
/**//// <summary>
/// OnRowDataBound
/// </summary>
/// <param name="e"></param>
protected override void OnRowDataBound(GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
if (!String.IsNullOrEmpty(RowClickButtonID) || !String.IsNullOrEmpty(RowDoubleClickButtonID))
{
// GridViewRow的每个TableCell
foreach (TableCell tc in e.Row.Cells)
{
// TableCell里的每个Control
foreach (Control c in tc.Controls)
{
// 如果控件继承自接口IButtonControl
if (c.GetType().GetInterface("IButtonControl") != null && c.GetType().GetInterface("IButtonControl").Equals(typeof(IButtonControl)))
{
if (!String.IsNullOrEmpty(RowClickButtonID))
{
// 该按钮的ID等于单击行所对应的按钮ID
if (c.ID == RowClickButtonID)
{
// 增加行的单击事件，调用客户端脚本，根据所对应按钮的ID执行所对应按钮的click事件
e.Row.Attributes.Add("onclick", "javascript:yy_RowClick('" + c.ClientID + "')");
}
}
if (!String.IsNullOrEmpty(RowDoubleClickButtonID))
{
// 该按钮的ID等于双击行所对应的按钮ID
if (c.ID == RowDoubleClickButtonID)
{
// 增加行的双击事件，调用客户端脚本，根据所对应按钮的ID执行所对应按钮的click事件
e.Row.Attributes.Add("ondblclick", "javascript:yy_RowDoubleClick('" + c.ClientID + "')");
}
}
}
}
}
}
}
base.OnRowDataBound(e);
}
控件使用
添加这个控件到工具箱里，然后拖拽到webform上，要实现行的单击事件则设置RowClickButtonID为行单击事件所对应的按钮的ID，要实现行的双击事件则设置RowDoubleClickButtonID为行双击事件所对应的按钮的ID。
ObjData.cs
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.ComponentModel;
/**//// <summary>
/// OjbData 的摘要说明
/// </summary>
public class OjbData
{
public OjbData()
{
//
// TODO: 在此处添加构造函数逻辑
//
}
[DataObjectMethod(DataObjectMethodType.Select, true)]
public DataTable Select()
{
DataTable dt = new DataTable();
dt.Columns.Add("no", typeof(string));
dt.Columns.Add("name", typeof(string));
for (int i = 0; i < 30; i++)
{
DataRow dr = dt.NewRow();
dr[0] = "no" + i.ToString().PadLeft(2, '0');
dr[1] = "name" + i.ToString().PadLeft(2, '0');
dt.Rows.Add(dr);
}
return dt;
}
}
Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>SmartGridView测试</title>
</head>
<body>
<form id="form1" runat="server">
<yyc:SmartGridView ID="SmartGridView1" runat="server" AutoGenerateColumns="False"
DataSourceID="ObjectDataSource1" RowClickButtonID="btnTestRowClick" RowDoubleClickButtonID="btnTestRowDoubleClick">
<Columns>
<asp:BoundField DataField="no" HeaderText="序号" SortExpression="no" ItemStyle-Width="100px" />
<asp:BoundField DataField="name" HeaderText="名称" SortExpression="name" ItemStyle-Width="100px" />
<asp:BoundField DataField="no" HeaderText="序号" SortExpression="no" ItemStyle-Width="100px" />
<asp:BoundField DataField="name" HeaderText="名称" SortExpression="name" ItemStyle-Width="100px" />
<asp:BoundField DataField="no" HeaderText="序号" SortExpression="no" ItemStyle-Width="100px" />
<asp:BoundField DataField="name" HeaderText="名称" SortExpression="name" ItemStyle-Width="100px" />
<asp:TemplateField>
<footerstyle cssclass="hidden" />
<headerstyle cssclass="hidden" />
<itemstyle cssclass="hidden" />
<itemtemplate>
<asp:Button id="btnTestRowClick" runat="server" CommandName="RowClick" CommandArgument='<%# Container.DataItemIndex %>' />
<asp:Button id="btnTestRowDoubleClick" runat="server" CommandName="RowDoubleClick" CommandArgument='<%# Container.DataItemIndex %>' />
</itemtemplate>
</asp:TemplateField>
</Columns>
</yyc:SmartGridView>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="Select"
TypeName="OjbData"></asp:ObjectDataSource>
</form>
</body>
</html>
/*测试版的实现 结束*/
OK
