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

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