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

功能:

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

    说明:

    • 这是 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.csdn.net / 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 > 这是 < 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中采取的辅助按钮支持回发”见 < 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 >

     

    源码

     

    你可能感兴趣的:(ASP.NET DEMO15_1: GridView 行单击与双击事件2)