扩展GridView（六）——数据行响应鼠标的单击和双击事件

引自http://www.cnblogs.com/webabcd/archive/2007/01/22/626484.html


为了让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 (!Page.ClientScript.IsClientScriptBlockRegistered("jsClickAndDoubleClick"))
            {
                Page.ClientScript.RegisterClientScriptBlock(
                    this.GetType(),
                    "jsClickAndDoubleClick", JavaScriptConstant.jsClickAndDoubleClick
                    );
            }
        }

5、构造函数内加一个RowDataBound事件的处理，在该事件内实现数据行响应鼠标的单击和双击事件的功能。主要是给<tr>加上客户端代码，用来调用某个按钮的click事件

        /**//// <summary>
        /// 构造函数
        /// </summary>
        public SmartGridView()
            : base()
        {
            // 新增“SmartGridView_RowDataBound”事件处理
            this.RowDataBound += new GridViewRowEventHandler(SmartGridView_RowDataBound);
        }

        /**//// <summary>
        /// RowDataBound事件
        /// </summary>
        /// <param name="sender">sender</param>
        /// <param name="e">e</param>
        protected void SmartGridView_RowDataBound(object sender, GridViewRowEventArgs e)
        {
            SmartGridView sgv = (SmartGridView)sender;

            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:isDoubleClick = false; yy_RowClick('" + c.ClientID + "')");
                                    }
                                }

                                if (!String.IsNullOrEmpty(RowDoubleClickButtonID))
                                {
                                    // 该按钮的ID等于双击行所对应的按钮ID
                                    if (c.ID == RowDoubleClickButtonID)
                                    {
                                        // 增加行的双击事件，调用客户端脚本，根据所对应按钮的ID执行所对应按钮的click事件
                                        e.Row.Attributes.Add("ondblclick", "javascript:isDoubleClick = true; yy_RowDoubleClick('" + c.ClientID + "')");
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }

控件使用
添加这个控件到工具箱里，然后拖拽到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>