posts - 615, comments - 10492, trackbacks - 594, articles - 0
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
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
[源码下载]