代码改变世界

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

2008-09-06 18:58 by 晓风残月, ... 阅读, ... 评论, 收藏, 编辑

功能:

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

    说明:

    • 这是 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"181);
            tbl.Rows.Add(
    2"Chang"191);
            tbl.Rows.Add(
    3"Aniseed Syrup"102);
            tbl.Rows.Add(
    4"Chef Anton's Cajun Seasoning"222);
            tbl.Rows.Add(
    5"Chef Anton's Gumbo Mix"21.352);
            tbl.Rows.Add(
    47"Zaanse koeken"9.53);
            tbl.Rows.Add(
    48"Chocolade"12.753);
            tbl.Rows.Add(
    49"Maxilaku"203);        

            
    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>

     

    源码