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下面的控...
  • dxd0128
  • dxd0128
  • 2012年05月12日 15:10
  • 5514

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 类里面添加一个新...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:ASP.NET DEMO 15: 同时支持行单击和双击事件的 GridView/DataGrid
举报原因:
原因补充:

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