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

教程Tag：暂无Tag,欢迎添加,赚取U币!

缂傚倸鍊搁崐鎼佸磹妞嬪海鐭嗗ù锝堫嚉濞差亝鏅濋柛灞炬皑閸旂數绱撴担鎻掍壕闂佺浜顤獵MS闂傚倷娴囧畷鐢稿窗閹扮増鍋￠柕澶堝剻濞戞ǚ鏀介悗锝冨妷閸嬫捇宕掗悙鏌ュ敹闂佸搫娲ㄩ崑鐐烘倵椤掆偓閳规垿鎮欓崣澶樻！闂佹悶鍔庨崰鏍ь嚕婵犳碍鏅搁柨鐕傛嫹濠电姷鏁搁崑鐐哄垂鐠轰警娼栭悷娆忓閻濆爼鏌涢埄鍐槈闁绘挻锕㈤弻鈥愁吋鎼粹€崇闂佹娊鏀辩敮锟犲蓟閵娾晜鍋嗛柛灞剧☉椤忥拷缂傚倸鍊搁崐椋庣矆娓氣偓钘濋梺顒€绉寸粣妤呮煙闁箑澧鹃柤鏉挎健閺屾盯濡烽鐓庮潻缂備讲鍋撳鑸靛姈閻撳啴鏌曟径鍫濆闁绘繍浜弻锝呪攽閹炬潙顏� 闂傚倸鍊搁崐椋庢閿熺姴纾婚柛鏇ㄥ瀬閸ャ劍缍囬柍鍝勫暟椤︻垱绻濋姀锝嗙【闁哄牜鍓熷畷妤€饪伴崼鐔哄幐闂佹悶鍎崝宥夋儍閹达附鈷掑璺猴功鏁堥梺鍝勮閸婃牕岣胯箛娑樜╅柨鏃傜帛椤ユ稓绱撻崒娆戝妽闁哥偛顭烽獮蹇涙晸閿燂拷闂傚倸鍊风粈渚€骞栭锕€鐤柣妤€鐗婇崣蹇涙煙缂併垹鏋涙俊鐐扮矙閺屸€愁吋鎼粹€茬敖闂佸憡顨嗙喊宥囨崲濞戙垹骞㈡俊顖濐嚙闂夊秴鈹戦鍡欑ɑ闁告梹顨婇崺鈧い鎺戝枤濞兼劙鏌熼鑲╁煟鐎规洘娲熼弻鍡楊吋閸涱垳鍘梻浣芥硶閸ｏ箓骞忛敓锟�,闂傚倸鍊峰ù鍥儍椤愶箑绀嬫い鎰╁灩琚橀梻浣筋嚙濮橈箓锝炴径瀣濠电姴鍋嗛崵鏇㈡煕椤愶絾绀€缂佲偓閸愨斂浜滈柡鍌氱仢閹垶銇勮箛鏇炴瀾缂佺粯鐩獮瀣倷閺夋垹娈ら梻浣呵归鍡涘箲閸パ屾綎闁告繂瀚ч弸搴ㄦ煙椤栧棗瀚禍顏堟⒒娴ｅ憡鍟為柣鐔村劤閹广垹螣娓氼垰娈ㄦ繝鐢靛У绾板秹寮查幖浣圭叆闁绘洖鍊圭€氾拷!

推荐：添加GridView/DataGrid单击一行服务器事件
实现功能： asp.net 的GridView/DataGrid控件本身均支持行选择事件（通过设置Button/LinkButton.CommandName=Selected，并在SelectedIndexChanged事件中处理）。然而，有时候我们希望用户点击网页上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 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>

分享：解析2个ASP.NET小技巧
1. ASP.NET AJAX 中，如何用 JavaScript 调用服务器端的方法？这里不是指调用简单的PageMethod，因为静态方法是不能操作当前页面的控件的，所以静态的PageMethod作用就跟普通的WebService一样，比较局限。那么，调用一般的服务器端方法，其实就是发起一个

ASP.NET视频教程

北大青鸟ASP.NET编程视频教程

ASP.NET一夜速成视频教程

ASP.NET语音视频教学

21天学通ASP.NET40小时多媒体语音视频教学DVD

ASP.NET3.5从入门到精通视频

.NET教学视频免费下载

asp.net夜话教学视频【完】

来源：模板无忧/所属分类：.Net教程/更新时间：2010-05-29

[收藏][报错][返回列表]

评论加载中....

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

ASP.NET视频教程

.Net教程Rss订阅编程教程搜索

.Net教程推荐

猜你也喜欢看这些

闂傚倸鍊峰ù鍥Υ閳ь剟鏌涚€ｎ偅宕岄柡宀€鍠栭、娑樷堪閸愮偓姣夋俊鐐€戦崕濠氬箯閿燂拷&闂傚倸鍊风粈渚€骞夐敍鍕殰闁圭儤鍤﹀☉銏犵睄闁割偆鍣ュΛ鍛存⒑鐠恒劌娅愰柟鍑ゆ嫹