扩展GridView控件(6) - 响应行的单击事件和双击事件

GridView既强大又好用。为了让它更强大、更好用，我们来写一个继承自GridView的控件。
[索引页]
[源码下载]

作者：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">

<title>SmartGridView测试</title>

</head>

<body>

<yyc:SmartGridView ID="SmartGridView1" runat="server" AutoGenerateColumns="False"

DataSourceID="ObjectDataSource1" RowClickButtonID="btnTestRowClick" RowDoubleClickButtonID="btnTestRowDoubleClick">

<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>

<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
[源码下载]

posted @ 2007-01-22 08:42 webabcd 阅读(25806) 评论(51) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

扩展GridView控件(6) - 响应行的单击事件和双击事件

公告