ASP.NET DEMO15_1: GridView 行单击与双击事件2

最新推荐文章于 2017-11-06 03:00:00 发布

weixin_33912638

最新推荐文章于 2017-11-06 03:00:00 发布

阅读量142

点赞数

文章标签： xhtml javascript c# ViewUI

功能：

单击选中行双击打开详细页面

说明：

这是 ASP.NET DEMO 15: 同时支持行单击和双击事件的的改进版本
单击事件（onclick）使用了 setTimeout 延迟，根据实际需要修改延迟时间
当双击时，通过全局变量 dbl_click 来取消单击事件的响应
常见处理行方式会选择在 RowDataBound/ItemDataBound 中处理，这里我选择 Page.Render 中处理，至少基于以下考虑
RowDataBound 仅仅在调用 DataBind 之后才会触发，回发通过 ViewState 创建空件不触发假如需要更多的处理，你需要分开部分逻辑到 RowCreated 等事件中
并且我们希望使用 ClientScript.GetPostBackEventReference 和 ClientScript.RegisterForEventValidation 方法进行安全脚本的注册，而后者需要在页的 Render 阶段中才能处理
关于“DataGrid中采取的辅助按钮支持回发”见ASP.NET DEMO8: 为 GridView 每行添加服务器事件

<% @ Page Language = " C# " %>
<% @ Import Namespace = " System.Data " %>

<% -- http: // community.youkuaiyun.com / Expert / TopicView3.asp?id = 5767096 -- %>

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >

< script runat ="server" >

    protected void Page_Load(object sender, EventArgs e)
    {
         if ( ! IsPostBack) {
            LoadGridViewProductData();
            LoadDataGridProductData();
        }
    }

    protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
         /*
         当然可以在这里进行客户端脚本绑定，
         但是，我选择在重载页的 Render 方法中处理，因为
         1. RowDataBound 仅仅在调用 DataBind 之后才会触发，回发通过 ViewState 创建空件不触发
            假如需要更多的处理，你需要分开部分逻辑到 RowCreated 等事件中
         2. 并且我们希望使用
            ClientScript.GetPostBackEventReference 和 ClientScript.RegisterForEventValidation 方法
            进行安全脚本的注册，而后者需要在页的 Render 阶段中才能处理
         */
    }

    protected void DataGrid1_ItemDataBound(object sender, DataGridItemEventArgs e)
    {
         // 隐藏辅助按钮列
         int cellIndex = 0 ;
        e.Item.Cells[cellIndex].Attributes[ " style " ] = " display:none " ;
    }

     void LoadGridViewProductData()
    {
        DataTable dt = CreateSampleProductData();

        GridView1.DataSource = dt;
        GridView1.DataBind();
    }

     void LoadDataGridProductData()
    {
        DataTable dt = CreateSampleProductData();

        DataGrid1.DataSource = dt;
        DataGrid1.DataBind();
    }

    #region sample data

    static DataTable CreateSampleProductData()
    {
        DataTable tbl = new DataTable( " Products " );

        tbl.Columns.Add( " ProductID " , typeof ( int ));
        tbl.Columns.Add( " ProductName " , typeof (string));
        tbl.Columns.Add( " UnitPrice " , typeof (decimal));
        tbl.Columns.Add( " CategoryID " , typeof ( int ));

        tbl.Rows.Add( 1 , " Chai " , 18 , 1 );
        tbl.Rows.Add( 2 , " Chang " , 19 , 1 );
        tbl.Rows.Add( 3 , " Aniseed Syrup " , 10 , 2 );
        tbl.Rows.Add( 4 , " Chef Anton's Cajun Seasoning " , 22 , 2 );
        tbl.Rows.Add( 5 , " Chef Anton's Gumbo Mix " , 21.35 , 2 );
        tbl.Rows.Add( 47 , " Zaanse koeken " , 9.5 , 3 );
        tbl.Rows.Add( 48 , " Chocolade " , 12.75 , 3 );
        tbl.Rows.Add( 49 , " Maxilaku " , 20 , 3 );

         return tbl;
    }

    #endregion

    protected override void Render(HtmlTextWriter writer)
    {
         // GridView
        foreach (GridViewRow row in GridView1.Rows) {
             if (row.RowState == DataControlRowState.Edit) { // 编辑状态
                row.Attributes.Remove( " onclick " );
                row.Attributes.Remove( " ondblclick " );
                row.Attributes.Remove( " style " );
                row.Attributes[ " title " ] = " 编辑行 " ;
                 continue ;
            }
             if (row.RowType == DataControlRowType.DataRow) {
                 // 单击事件，为了响应双击事件，需要延迟单击响应，根据需要可能需要增加延迟
                 // 获取ASP.NET内置回发脚本函数，返回 __doPostBack(<<EventTarget>>, <<EventArgument>>)
                 // 可直接硬编码写入脚本，不推荐
                row.Attributes[ " onclick " ] = String.Format( " javascript:setTimeout(\ " if (dbl_click){{dbl_click = false ;}} else {{{ 0 }}};\ " , 1000*0.3); " , ClientScript.GetPostBackEventReference(GridView1, " Select$ " + row.RowIndex.ToString(), true ));
                 // 双击，设置 dbl_click=true，以取消单击响应
                row.Attributes[ " ondblclick " ] = String.Format( " javascript:dbl_click=true;window.open('DummyProductDetail.aspx?productid={0}'); " , GridView1.DataKeys[row.RowIndex].Value.ToString());
                 //
                row.Attributes[ " style " ] = " cursor:pointer " ;
                row.Attributes[ " title " ] = " 单击选择行，双击打开详细页面 " ;
            }
        }

         // DataGrid
        foreach (DataGridItem item in DataGrid1.Items) {
             if (item.ItemType == ListItemType.EditItem) {
                item.Attributes.Remove( " onclick " );
                item.Attributes.Remove( " ondblclick " );
                item.Attributes.Remove( " style " );
                item.Attributes[ " title " ] = " 编辑行 " ;
                 continue ;
            }
             if (item.ItemType == ListItemType.Item || item.ItemType == ListItemType.AlternatingItem) {
                 // 单击事件，为了响应双击事件，延迟 1 s，根据需要可能需要增加延迟
                 // 获取辅助的支持回发按钮
                 // 相对而言， GridView 支持直接将 CommandName 作为 <<EventArgument>> 故不需要辅助按钮
                Button btnHiddenPostButton = item.FindControl( " btnHiddenPostButton " ) as Button;
                item.Attributes[ " onclick " ] = String.Format( " javascript:setTimeout(\ " if (dbl_click){{dbl_click = false ;}} else {{{ 0 }}};\ " , 1000*0.3); " , ClientScript.GetPostBackEventReference(btnHiddenPostButton, null ));
                 // 双击
                 // 双击，设置 dbl_click=true，以取消单击响应
                item.Attributes[ " ondblclick " ] = String.Format( " javascript:dbl_click=true;window.open('DummyProductDetail.aspx?productid={0}'); " , DataGrid1.DataKeys[item.ItemIndex].ToString());

                 //
                item.Attributes[ " style " ] = " cursor:pointer " ;
                item.Attributes[ " title " ] = " 单击选择行，双击打开详细页面 " ;
            }
        }

        base.Render(writer);
    }
</ script >

< html xmlns ="http://www.w3.org/1999/xhtml" >
< head id ="Head1" runat ="server" >
     < title > ASP.NET DEMO15: GridView 行单击与双击事件2 </ title >
     < script >
     // 辅助全局变量，指示是否双击
     var dbl_click = false ;
     </ script >
</ head >
< body >
     < form id ="form1" runat ="server" >
     < div >
         < h3 > 功能： </ h3 >
             < li > 单击选中行 </ li >
             < li > 双击打开详细页面 </ li >
         < h3 > 说明： </ h3 >
         < ul >
             < li > 这是 < a href ="GridView/DataGrid http://www.cnblogs.com/Jinglecat/archive/2007/09/20/900645.html" > ASP.NET DEMO 15: 同时支持行单击和双击事件 </ a > 的改进版本 </ li >
             < li > 单击事件（onclick）使用了 setTimeout 延迟，根据实际需要修改延迟时间 </ li >
             < li > 当双击时，通过全局变量 dbl_click 来取消单击事件的响应 </ li >
             < li > 常见处理行方式会选择在 RowDataBound/ItemDataBound 中处理，这里我选择 Page.Render 中处理，至少基于以下考虑
                 < li style ="padding-left:20px; list-style-type:square" > RowDataBound 仅仅在调用 DataBind 之后才会触发，回发通过 ViewState 创建空件不触发
            假如需要更多的处理，你需要分开部分逻辑到 RowCreated 等事件中 </ li >
                 < li style ="padding-left:20px; list-style-type:square" > 并且我们希望使用
            ClientScript.GetPostBackEventReference 和 ClientScript.RegisterForEventValidation 方法
            进行安全脚本的注册，而后者需要在页的 Render 阶段中才能处理 </ li >
             </ li >
             < li > 关于“DataGrid中采取的辅助按钮支持回发”见 < a href ="http://www.cnblogs.com/Jinglecat/archive/2007/07/15/818394.html" > ASP.NET DEMO8: 为 GridView 每行添加服务器事件 </ a >
         </ ul >
         < br />
         < input type ="button" id ="Button1" value ="Rebind" onclick ="location.href=location.href;" />
         < div style ="float:left" >
         < h3 > GridView Version </ h3 >
         < asp:GridView ID ="GridView1" DataKeyNames ="ProductID" runat ="server" AutoGenerateColumns ="False" OnRowDataBound ="GridView1_RowDataBound" >
             < SelectedRowStyle BackColor ="CadetBlue" />
             < Columns >
                 < asp:TemplateField HeaderText ="ProductName" >
                     < ItemTemplate >
                         <% # Eval ( " ProductName " ) %>
                     </ ItemTemplate >
                     < EditItemTemplate >
                         < asp:TextBox ID ="txtProductName" runat ="server" Text ='<%# Bind("ProductName") % > ' />
                     </ EditItemTemplate >
                 </ asp:TemplateField >
                 < asp:BoundField DataField ="UnitPrice" HeaderText ="UnitPrice" />
             </ Columns >
         </ asp:GridView ></ div >
         < div style ="float:left;padding-left:100px;" >
         < h3 > DataGrid Version </ h3 >
         < asp:DataGrid ID ="DataGrid1" DataKeyField ="ProductID"   runat ="server" AutoGenerateColumns ="False" OnItemDataBound ="DataGrid1_ItemDataBound" >
         < SelectedItemStyle BackColor ="CadetBlue" />
             < Columns >
                 < asp:TemplateColumn >
                     < ItemTemplate >
                         < asp:Button ID ="btnHiddenPostButton" CommandName ="Select" runat ="server" Text ="HiddenPostButton" style ="display:none" />
                     </ ItemTemplate >
                 </ asp:TemplateColumn >
                 < asp:BoundColumn DataField ="ProductName" HeaderText ="ProductName" />
                 < asp:BoundColumn DataField ="UnitPrice" HeaderText ="UnitPrice" />
             </ Columns >
         </ asp:DataGrid ></ div >
         </ li >
         </ div >
     </ form >
</ body >
</ html >

源码