ASP.NET DEMO 15: 同时支持行单击和双击事件的 GridView/DataGrid

原创 2007年09月27日 17:14:00

功能:

  • 单击行弹出当前行详细页面
  • 双击行进入编辑状态(GridView/DataGrid内置 Edit)

    说明:

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


    原始需求:既有单击又有双击的GridView是否存在(问了许多人都说不能,郁闷)

    可直接运行源码(单页 .aspx): 

    <%@ 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();
        }


        
    sample data    
          
        
    protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
        
    {
            GridView1.EditIndex 
    = e.NewEditIndex;
            LoadGridViewProductData();
        }


        
    protected void DataGrid1_EditCommand(object source, DataGridCommandEventArgs e)
        
    {
            DataGrid1.EditItemIndex 
    = e.Item.ItemIndex;
            LoadDataGridProductData();
        }


        
    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) {
                    
    //单击事件,为了响应双击事件,延迟 1 s,根据需要可能需要增加延迟
                    row.Attributes["onclick"= String.Format("javascript:setTimeout(/"window.open('DummyProductDetail.aspx?productid={0}')/", 1000*1);event.cancelBubble=true;", GridView1.DataKeys[row.RowIndex].Value.ToString());
                    
    // 获取ASP.NET内置回发脚本函数,返回 __doPostBack(<<EventTarget>>, <<EventArgument>>)
                    
    // 可直接硬编码写入脚本,不推荐
                    row.Attributes["ondblclick"= ClientScript.GetPostBackEventReference(GridView1, "Edit$" + row.RowIndex.ToString(), true);
                    
    //
                    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,根据需要可能需要增加延迟
                    item.Attributes["onclick"= String.Format("javascript:setTimeout(/"window.open('DummyProductDetail.aspx?productid={0}')/", 1000*1);event.cancelBubble=true;", DataGrid1.DataKeys[item.ItemIndex].ToString());
                    
    // 双击
                    
    // 获取辅助的支持回发按钮
                    
    // 相对而言, GridView 支持直接将 CommandName 作为 <<EventArgument>> 故不需要辅助按钮
                    Button btnHiddenPostButton = item.FindControl("btnHiddenPostButton"as Button;
                    
    // 获取ASP.NET内置回发脚本函数,返回 __doPostBack(<<EventTarget>>, <<EventArgument>>)
                    
    // 可直接硬编码写入脚本,不推荐
                    item.Attributes["ondblclick"= ClientScript.GetPostBackEventReference(btnHiddenPostButton, "");
                    
    //
                    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 行单击与双击事件</title>
    </head>
    <body>
        
    <form id="form1" runat="server">
        
    <div>        
            
    <h3>功能:</h3>
                
    <li>单击弹出当前详细页面</li>
                
    <li>双击进入编辑状态(GridView/DataGrid内置 Edit)</li>        
            
    <h3>说明:</h3>
                
    <li>单击事件(onclick)使用了 setTimeout 延迟,根据实际需要修改延迟时间</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>
            
    <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" OnRowEditing="GridView1_RowEditing" OnRowDataBound="GridView1_RowDataBound">
                
    <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" OnEditCommand="DataGrid1_EditCommand" OnItemDataBound="DataGrid1_ItemDataBound">
                
    <Columns> 
                    
    <asp:TemplateColumn>
                        
    <ItemTemplate>
                            
    <asp:Button ID="btnHiddenPostButton" CommandName="Edit" 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

    ASP.NET DEMO15_1: GridView 行单击与双击事件2 功能:单击选中行 双击打开详细页面 说明:这是 ASP.NET DEMO 15: 同时支持行单击和双击事件的的改进版本 单击事...

    GridView/DataGrid行单击和双击事件实现代码_.Net教程

    功能: 单击选中行,双击打开详细页面

    asp.net JQuery Ajax WebService Gridview 任意 双击 某一列 编辑修改

    写一个WebService方法GetAuto,xiang

    ASP.NET GridView鼠标停留变色,行单击显示详细记录的事件处理

    最近在使用C#写MIS系统时实现一个功能,GridView绑定了数据后,我想在鼠标停留到GridView数据行时,行变色突出显示该行,并且鼠标点击该行时,将该行对应的数据显示在GridView下面的控...

    asp.net中为Calendar日历控件添加双击日期事件

    最近一直在做日历控件,希望能直接在上面双击具体某一天就能弹窗添加事件,刚开始是想在网上找找人家做好的日历控件来用的,后面发现由于公司加密软件的原因,那些插件基本上都用不了,最后没法子了,只好自己来慢慢...

    Datagrid实现双击行事件

    • 2006-02-23 09:05
    • 18KB
    • 下载

    Datagrid实现双击行事件

    • 2013-05-19 19:23
    • 18KB
    • 下载

    ASP.NET的GridView与DataGrid控件比较浅析

    ASP.NET的GridView与DataGrid 控件比较都有哪些方面呢?那么下面就开始我们的讲解:GridView 控件是 DataGrid 控件的后继控件。与 DataGrid 控件相似,Gri...

    asp.net中GridView、DataGrid、DataList、Repeater、ListView、DetailsView、FormView 的区别

    列表类 GridView 控件 GridView 控件以表的形式显示数据,并提供对列进行排序、分页、翻阅数据以及编辑或删除单个记录的功能。 特征:一行一条记录,就像新闻列表一样;带分页功能。 Data...

    ASP.NET ZERO 学习 —— (15) 应用开发Demo之授权

    此时,任何人都可以进入电话簿页面,因为没有进行权限验证。我们将定义两个权限: 进入电话薄页面的权限 新建用户的权限 查看权限定义权限在AppAuthorizationProvider 类里面添加一个新...
    内容举报
    返回顶部
    收藏助手
    不良信息举报
    您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
    举报原因:
    原因补充:

    (最多只允许输入30个字)