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

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

[align=center]扩展GridView控件(6) - 响应行的单击事件和双击事件
[/align]

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