GridView/DataGrid行单击和双击事件实现代码

功能：单击选中行，双击打开详细页面
说明：单击事件（onclick）使用了 setTimeout 延迟，根据实际需要修改延迟时间 ;当双击时，通过全局变量 dbl_click 来取消单击事件的响应
常见处理行方式会选择在 RowDataBound/ItemDataBound 中处理，这里我选择 Page.Render 中处理，至少基于以下考虑
1、RowDataBound 仅仅在调用 DataBind 之后才会触发，回发通过 ViewState 创建空件不触发假如需要更多的处理，你需要分开部分逻辑到 RowCreated 等事件中
2、并且我们希望使用 ClientScript.GetPostBackEventReference 和 ClientScript.RegisterForEventValidation 方法进行安全脚本的注册，而后者需要在页的 Render 阶段中才能处理 .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(); }#region sample datastatic 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" οnclick="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>

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

ASPxGridView1单击，双击事件
ASPxGridView1没有自带的单击,双击事件,所以要自己写,<script language="javascript" type="text/javascri ...
禁用CMFCRibbonApplicationButton的单击和双击事件
为了禁用CMFCRibbonApplicationButton的单击和双击事件,我重载了CMFCRibbonApplicationButton如下: 1. MyRibbonApplicationBut ...
JS - 解决鼠标单击、双击事件冲突问题（原生js实现）
由于鼠标双击时每一次触发双击事件都会引起两次单击事件和一次双击事件,原生的js不提供专门的双击事件. 因为业务原因,双击和单机都绑定了不同的业务,在双击的时候又触发了单机,影响了页面的正常显示出现问 ...
javascript 鼠标单击和双击事件并存的实现方法
http://www.jbxue.com/article/8033.html 本文介绍下实现javascript鼠标单击与双击事件并存的方法,经常需要为一个链接注册双击事件,或让一个按钮或者其他元素上 ...
js中单击和双击事件的区分
js中单击和双击事件的区分 1. 首先要了解鼠标点击(单击或双击)时包含的事件. mousedown 事件: 当鼠标指针移动到元素上方,并按下鼠标按键时,会发生 mousedown 事件.与 cl ...
js(javascript) onclick与ondblclick 单击与双击事件
js 单击时间为:onclick 双击事件为:ondblclick 如下是一个演示,想必很清楚,复制代码运行一下就懂了: <meta http-equiv="Content-Type& ...
【JavaScript】jQuery 实现耦合的鼠标单击与双击事件
jq 实现单击双击事件 jq 的 dblclick 和 click 互相独立,在触发 dblclick 的基础上也会触发两次 click 这里演示一种使其互相耦合的 demo var click = ...
js区分click事件和mousedown、单击和双击事件
一.点击和拖动 1.问题对于同一个对象进行的操作涉及点击(click)和拖动(mousedown,mousemove,mouseup),而拖动中又会触发一次点击事件 2.解决:设置全局变量判断点击之 ...
[IOS]实现IOS单击或者双击事件
提供一下三种方法参考: 方法一: //单击事件 -(void)fun1 { NSLog(@"click1"); } //双击事件 -(void)fun2 { NSLog(@&quo ...

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

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

最新文章

热门文章