|
本文实例讲解如何实现既有单击又有双击的GridView控件 功能介绍: 单击行弹出当前行详细页面 双击行进入编辑状态(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 ,根据需要自行添加即可。
可直接运行源码(单页 .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"] = "单击打开详细页面、双击进入编辑"; } }
共2页: 上一页 1 [2] 下一页
|