ASP.NET DEMO 15: 同时支持行单击和双击事件的 GridView/DataGr
点击次数:20 次 发布日期:2008-11-26 09:53:26 作者:源代码网
|
源代码网推荐 单击行弹出当前行详细页面 源代码网推荐 双击行进入编辑状态(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#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 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> 源代码网推荐 源代码网推荐 源代码网推荐 效果: 源代码网推荐 源代码网推荐 做人要厚道,请注明转自酷网动力(www.ASPCOOL.COM)。 源代码网推荐 源代码网供稿. |
