GridView控件数据行响应鼠标的单击和双击事件

为了让GridView的数据行可以响应鼠标的单击和双击事件，一般我们会在GridView的RowDataBound事件中给<tr>加上客户端代码，为了简化这个步骤，我们来扩展一下它。


控件开发
1、新建一个继承自GridView的类。

/**////<summary>
///继承自GridView
///</summary>
[ToolboxData(@"<{0}:SmartGridViewrunat='server'></{0}:SmartGridView>")]
publicclassSmartGridView:GridView
{
}

2、加两个属性，分别是单击行事件所对应的按钮的ID和双击行事件所对应的按钮的ID

privatestring_rowClickButtonID;
/**////<summary>
///单击行事件所对应的按钮的ID
///</summary>
[Description("单击行事件所对应的按钮的ID"),DefaultValue(""),Category("扩展")]
publicvirtualstringRowClickButtonID
{
get{return_rowClickButtonID;}
set{_rowClickButtonID=value;}
}

privatestring_rowDoubleClickButtonID;
/**////<summary>
///双击行事件所对应的按钮的ID
///</summary>
[Description("双击行事件所对应的按钮的ID"),DefaultValue(""),Category("扩展")]
publicvirtualstringRowDoubleClickButtonID
{
get{return_rowDoubleClickButtonID;}
set{_rowDoubleClickButtonID=value;}
}

3、新建一个JavaScriptConstant类，把我们要用到的javascript存在一个常量里

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Text;

namespaceYYControls.SmartGridView
{
/**////<summary>
///javascript
///</summary>
publicclassJavaScriptConstant
{
internalconststringjsClickAndDoubleClick=@"<scripttype=""text/javascript"">
//<![CDATA[
varisDoubleClick=false;
functionyy_RowClick(id)
{
setTimeout(""yy_RowClickTimeout('""+id+""')"",300);
}
functionyy_RowClickTimeout(id)
{
if(isDoubleClick==false)
{
//执行ID所指按钮的click事件
document.getElementById(id).click();
}
isDoubleClick=true;
}
functionyy_RowDoubleClick(id)
{
if(isDoubleClick==true)
{
//执行ID所指按钮的click事件
document.getElementById(id).click();
}
isDoubleClick=true;
}
//]]>
</script>";
}
}

4、重写OnPreRender方法，注册上面那段客户端脚本

/**////<summary>
///OnPreRender
///</summary>
///<paramname="e"></param>
protectedoverridevoidOnPreRender(EventArgse)
{
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>
///<paramname="e"></param>
protectedoverridevoidOnRowDataBound(GridViewRowEventArgse)
{
if(e.Row.RowType==DataControlRowType.DataRow)
{
if(!String.IsNullOrEmpty(RowClickButtonID)||!String.IsNullOrEmpty(RowDoubleClickButtonID))
{
//GridViewRow的每个TableCell
foreach(TableCelltcine.Row.Cells)
{
//TableCell里的每个Control
foreach(Controlcintc.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

usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;

usingSystem.ComponentModel;

/**////<summary>
///OjbData的摘要说明
///</summary>
publicclassOjbData
{
publicOjbData()
{
//
//TODO:在此处添加构造函数逻辑
//
}

[DataObjectMethod(DataObjectMethodType.Select,true)]
publicDataTableSelect()
{
DataTabledt=newDataTable();
dt.Columns.Add("no",typeof(string));
dt.Columns.Add("name",typeof(string));

for(inti=0;i<30;i++)
{
DataRowdr=dt.NewRow();
dr[0]="no"+i.ToString().PadLeft(2,'0');
dr[1]="name"+i.ToString().PadLeft(2,'0');

dt.Rows.Add(dr);
}

returndt;
}
}

Default.aspx

<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>SmartGridView测试</title>
http://www.vs2005.com/DownloadPictur

分享到：

GridView控件每行复选框的全选与取消全选 | GridView控件改变CheckBox选中的行的样式

• 2007-09-27 09:07
• 浏览 3381
• 评论(0)
• 查看更多