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

时间：2022-01-16 12:36:26

功能： 单击选中行，双击打开详细页面 
说明：单击事件（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 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 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" onclick="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>

　　

相关文章