none
【JS】javascript如何触发GridView 更新事件 RRS feed

  • 问题

  • 由于功能的需要,得需使用JS来触发页面GridView的更新事件(RowUpdating) 之前大都使用模板/按钮的属性CommandName="Update"后台触发更新事件,现在利用JS来触发GridView事件应该如何做呢?请高手提供点思路谢谢!

     

    我现在的思路是,在Gridview中添加一个隐藏的按钮,属性设置为CommandName="Update" 利用JS获取该按钮并触发该隐藏按钮的点击事件。不知道可不可以?

    • 已移动 肖小勇Moderator 2010年4月14日 2:19 asp.net 相关问题 (发件人:.NET Framework 一般性问题讨论区)
    • 已编辑 jinwb1982 2010年4月15日 16:11
    2010年4月13日 15:56

答案

  • 你好!

    我写了个示例,最终是调用了按钮的 click 事件,希望对你有帮助。

    <%@ Page Language="C#" AutoEventWireup="true" %>
    <%@ Import Namespace="System.Data" %>
    <script runat="server">
    
      protected void Page_Load(object sender, EventArgs e)
      {
        if (!IsPostBack)
          this.BindGrid();
      }
    
      /// <summary>
      /// 演示数据
      /// </summary>
      private DataTable SampleDataTable
      {
        get
        {
          if (Session["SampleDataTable"] == null)
          {
            DataTable dt = new DataTable();
            dt.Columns.Add("Id", typeof(int));
            dt.Columns.Add("Name", typeof(string));
    
            dt.PrimaryKey = new DataColumn[] { dt.Columns["Id"] };
    
            dt.Rows.Add(new object[] { 1, "Sam" });
            dt.Rows.Add(new object[] { 2, "XXY" });
            dt.Rows.Add(new object[] { 3, "John" });
            dt.Rows.Add(new object[] { 4, "Meliy" });
            dt.Rows.Add(new object[] { 5, "Tom" });
    
            Session["SampleDataTable"] = dt;
          }
    
          return (DataTable)Session["SampleDataTable"];
        } 
      }
    
      private void BindGrid()
      {
        this.GridView1.DataSource = this.SampleDataTable;
        this.GridView1.DataBind();
      }
    
      protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
      {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
          TextBox txtName = e.Row.FindControl("txtName") as TextBox;
          LinkButton btnUpdate = e.Row.FindControl("btnUpdate") as LinkButton;
          
          if (txtName == null || btnUpdate == null)
            return;
    
          // 隐藏按钮
          btnUpdate.Style.Add(HtmlTextWriterStyle.Display, "none"); 
          // 注册事件
          txtName.Attributes["onkeydown"] = string.Format("if(event.keyCode == 13) ClickElement('{0}');", btnUpdate.ClientID);
        }
      }
    
      protected void GridView1_DataBound(object sender, EventArgs e)
      {
        string demoJavascript = @"
    // 执行对象的 Click 事件。支持 ie, ff, chrome
    function ClickElement(elementId)
    {
      if (document.all)
      {
        document.getElementById(elementId).click(); // ie 
      }
      else 
      {
        // ff, chrome  
        var event = document.createEvent('MouseEvents'); 
        event.initEvent('click', true, true); 
        document.getElementById(elementId).dispatchEvent(event);   
      }      
    }";
        this.ClientScript.RegisterStartupScript(this.GetType(), "commonJs", demoJavascript, true);
      }
    
      protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
      {
        this.GridView1.EditIndex = e.NewEditIndex;
        this.BindGrid();
      }
    
      protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
      {
        Response.Write(string.Format("<font color='red'>引发了 RowUpdating 事件, 行索引 {0}</font>", e.RowIndex));
        
        this.GridView1.EditIndex = -1;
        this.BindGrid();
      }
    
      protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
      {
        this.GridView1.EditIndex = -1;
        this.BindGrid();
      }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
      <title>GridView 模版列中 JavaScript 提交服务端更新事件</title>
    </head>
    <body>
      <form id="form1" runat="server">
      <p>操作步骤</p>
      <p>1 点击“编辑”按钮</p>
      <p>2 在 TextBox 控件中输入信息并按“回车”</p>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        onrowdatabound="GridView1_RowDataBound" ondatabound="GridView1_DataBound" 
          onrowediting="GridView1_RowEditing" onrowupdating="GridView1_RowUpdating" 
          onrowcancelingedit="GridView1_RowCancelingEdit">
        <Columns>
          <asp:TemplateField HeaderText="Id">
            <ItemTemplate>
              <asp:Label ID="lbId1" runat="server" Text='<%# Bind("Id") %>'></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
              <asp:Label ID="Label2" runat="server" Text='<%# Bind("Id") %>'></asp:Label>
            </EditItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
              <asp:Label ID="lbName" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
              <asp:TextBox ID="txtName" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
            </EditItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
              <asp:LinkButton ID="btnEdit" runat="server" CausesValidation="False" 
                CommandName="Edit" Text="编辑"></asp:LinkButton>
            </ItemTemplate>
            <EditItemTemplate>
              <asp:LinkButton ID="btnUpdate" runat="server" CausesValidation="True" 
                CommandName="Update" Text="更新"></asp:LinkButton>
              &nbsp;<asp:LinkButton ID="btnCancel" runat="server" CausesValidation="False" 
                CommandName="Cancel" Text="取消"></asp:LinkButton>
            </EditItemTemplate>
          </asp:TemplateField>
        </Columns>
      </asp:GridView>
      </form>
    </body>
    </html>
    


    知识改变命运,奋斗成就人生!
    • 已标记为答案 jinwb1982 2010年4月16日 15:42
    2010年4月16日 6:28
    版主

全部回复

  • 你好!

    你的思路是可行的。但有一点,如果你将按钮隐藏了,这个按钮的不会被输出到前台(html 中不会包含隐藏按钮的信息)这时你的 JS 也操作不到这个按钮。


    知识改变命运,奋斗成就人生!
    2010年4月14日 2:18
    版主
  • 你好!

    你的思路是可行的。但有一点,如果你将按钮隐藏了,这个按钮的不会被输出到前台(html 中不会包含隐藏按钮的信息)这时你的 JS 也操作不到这个按钮。


    知识改变命运,奋斗成就人生!
    如果用JS操作不到该按钮的话,就说明JS触发不了该按钮的更新(点击)事件吧,那么应该如何解决呢?
    2010年4月14日 2:27
  • 通过设置 style="display:none" 实现隐藏。
    知识改变命运,奋斗成就人生!
    2010年4月14日 2:31
    版主
  • 通过设置 style="display:none" 实现隐藏。
    知识改变命运,奋斗成就人生!


    这样做的确可以去实现点击button事件,但FF浏览器下,js的click事件应该不能执行的吧。

     

    可以试下js异步请求该页面,传递点击了哪一行,服务器端触发该行隐藏button的click事件。

    • 已编辑 花雨透 2010年4月14日 6:54 补充下
    2010年4月14日 6:50
  • 你好,

    通过设置style的dispaly="none"应该是可以的。

    至于javascript应该可以直接调用asp.net生成的脚本,如:__doPostBack('GridView1$ctl04$ctl00','').

    你可以先不用脚本触发rowupdating,而是通过上面的按钮触发这个事件,这个时候你可以查看它的源码是调用哪个脚本方法实现的。

    gridview的更新基本上都是采用脚本触发更新的。


    Microsoft Online Community Support
    2010年4月15日 2:41
  • 你好,

    通过设置style的dispaly="none"应该是可以的。

    至于javascript应该可以直接调用asp.net生成的脚本,如:__doPostBack('GridView1$ctl04$ctl00','').

    你可以先不用脚本触发rowupdating,而是通过上面的按钮触发这个事件,这个时候你可以查看它的源码是调用哪个脚本方法实现的。

    gridview的更新基本上都是采用脚本触发更新的。


    Microsoft Online Community Support

    试了多种方法,还是没有触发更新按钮的点击事件、前台代码入下:

    <asp:TemplateField ShowHeader="False" FooterStyle-HorizontalAlign="Left">
                                                                       <EditItemTemplate>
                                                                            <asp:TextBox ID="input" runat="server" Text='<%# Eval("name")%>' onkeypress="KeyPress(event);"></asp:TextBox>
                                                                            <asp:LinkButton ID="lbupdate" runat="server" CausesValidation="True" CommandName="Update"
                                                                                 style="display;none"></asp:LinkButton>
                                                                        </EditItemTemplate>
                                                                        <ItemTemplate>
                                                                            <asp:LinkButton ID="lbedit" runat="server" CausesValidation="False" CommandName="Edit"
                                                                                Text='<%# Eval("name")%>' CommandArgument='<%# Eval("orderId")%>' OnClientClick='return false;'
                                                                                ondblclick='ListBox1_DoubleClick(event)'></asp:LinkButton>
                                                                        </ItemTemplate>

                                                                       
                                                                    </asp:TemplateField>

     

    JS方法如下;

    //鼠标双击GridView行的双击事件

     function ListBox1_DoubleClick(e)
        {
           var label,input; //将要获取控件的ID
           var el= e.target?e.target:e.srcElement;//这里是兼容FF和IE获取event
       
          var r=el.parentNode.parentNode.rowIndex +2;//获取元素所在的行的行号
         
           if(parseInt(r)<10) // 这里要判断r的行号,因为GridView行号自动在小于10之前加0
                {
               
                  label = 'GridView1$ctl0'+ r +'$lbedit';
                  input='GridView1_ctl0'+ r +'_input';
                }
                else
                {
                    label = 'GridView1$ctl'+ r +'$lbedit';
                    input='GridView1_ctl'+ r +'_input';
                }
               
               
    //           document.getElementById(label).style.display="none";
    //          
    //          
    //           document.getElementById(input).style.display="block";
    //           document.getElementById(input).value=document.getElementById(label).innerHTML;

                __doPostBack(label,'');
                document.getElementById(input).focus();
              
        }

     

    //编辑之后在文本框中按下回车触发的事件。

    function KeyPress(e)
        {
            var label; //将要获取控件的ID
           var el= e.target?e.target:e.srcElement;//这里是兼容FF和IE获取event
       
          var r=el.parentNode.parentNode.rowIndex +2;//获取元素所在的行的行号
         
           if(parseInt(r)<10) // 这里要判断r的行号,因为GridView行号自动在小于10之前加0
                {
               
                  label = 'GridView1$ctl0'+ r +'$lbupdate';
                 
                }
                else
                {
                    label = 'GridView1$ctl'+ r +'$lbupdate';
                   
                }
               
               


                __doPostBack(label,'');
               
        }

     

    想实现的效果就是这样的:                        

    我的思路是,双击鼠标执行ListBox1_DoubleClick鼠标双击事件,编辑文本框中按下回车,引发KeyPress事件来触发对GridView行的更新事件,并精要编辑文本框隐藏。现在双击事件可以行,文本框回车事件不好用,当按下回车时,页面刷新了,但文本框没有隐藏,请问高手我下一步的思路应该如何处理呢?谢谢!

    2010年4月15日 15:57
  • 你好!

    我写了个示例,最终是调用了按钮的 click 事件,希望对你有帮助。

    <%@ Page Language="C#" AutoEventWireup="true" %>
    <%@ Import Namespace="System.Data" %>
    <script runat="server">
    
      protected void Page_Load(object sender, EventArgs e)
      {
        if (!IsPostBack)
          this.BindGrid();
      }
    
      /// <summary>
      /// 演示数据
      /// </summary>
      private DataTable SampleDataTable
      {
        get
        {
          if (Session["SampleDataTable"] == null)
          {
            DataTable dt = new DataTable();
            dt.Columns.Add("Id", typeof(int));
            dt.Columns.Add("Name", typeof(string));
    
            dt.PrimaryKey = new DataColumn[] { dt.Columns["Id"] };
    
            dt.Rows.Add(new object[] { 1, "Sam" });
            dt.Rows.Add(new object[] { 2, "XXY" });
            dt.Rows.Add(new object[] { 3, "John" });
            dt.Rows.Add(new object[] { 4, "Meliy" });
            dt.Rows.Add(new object[] { 5, "Tom" });
    
            Session["SampleDataTable"] = dt;
          }
    
          return (DataTable)Session["SampleDataTable"];
        } 
      }
    
      private void BindGrid()
      {
        this.GridView1.DataSource = this.SampleDataTable;
        this.GridView1.DataBind();
      }
    
      protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
      {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
          TextBox txtName = e.Row.FindControl("txtName") as TextBox;
          LinkButton btnUpdate = e.Row.FindControl("btnUpdate") as LinkButton;
          
          if (txtName == null || btnUpdate == null)
            return;
    
          // 隐藏按钮
          btnUpdate.Style.Add(HtmlTextWriterStyle.Display, "none"); 
          // 注册事件
          txtName.Attributes["onkeydown"] = string.Format("if(event.keyCode == 13) ClickElement('{0}');", btnUpdate.ClientID);
        }
      }
    
      protected void GridView1_DataBound(object sender, EventArgs e)
      {
        string demoJavascript = @"
    // 执行对象的 Click 事件。支持 ie, ff, chrome
    function ClickElement(elementId)
    {
      if (document.all)
      {
        document.getElementById(elementId).click(); // ie 
      }
      else 
      {
        // ff, chrome  
        var event = document.createEvent('MouseEvents'); 
        event.initEvent('click', true, true); 
        document.getElementById(elementId).dispatchEvent(event);   
      }      
    }";
        this.ClientScript.RegisterStartupScript(this.GetType(), "commonJs", demoJavascript, true);
      }
    
      protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
      {
        this.GridView1.EditIndex = e.NewEditIndex;
        this.BindGrid();
      }
    
      protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
      {
        Response.Write(string.Format("<font color='red'>引发了 RowUpdating 事件, 行索引 {0}</font>", e.RowIndex));
        
        this.GridView1.EditIndex = -1;
        this.BindGrid();
      }
    
      protected void GridView1_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
      {
        this.GridView1.EditIndex = -1;
        this.BindGrid();
      }
    </script>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head id="Head1" runat="server">
      <title>GridView 模版列中 JavaScript 提交服务端更新事件</title>
    </head>
    <body>
      <form id="form1" runat="server">
      <p>操作步骤</p>
      <p>1 点击“编辑”按钮</p>
      <p>2 在 TextBox 控件中输入信息并按“回车”</p>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
        onrowdatabound="GridView1_RowDataBound" ondatabound="GridView1_DataBound" 
          onrowediting="GridView1_RowEditing" onrowupdating="GridView1_RowUpdating" 
          onrowcancelingedit="GridView1_RowCancelingEdit">
        <Columns>
          <asp:TemplateField HeaderText="Id">
            <ItemTemplate>
              <asp:Label ID="lbId1" runat="server" Text='<%# Bind("Id") %>'></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
              <asp:Label ID="Label2" runat="server" Text='<%# Bind("Id") %>'></asp:Label>
            </EditItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField HeaderText="Name">
            <ItemTemplate>
              <asp:Label ID="lbName" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
              <asp:TextBox ID="txtName" runat="server" Text='<%# Bind("Name") %>'></asp:TextBox>
            </EditItemTemplate>
          </asp:TemplateField>
          <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
              <asp:LinkButton ID="btnEdit" runat="server" CausesValidation="False" 
                CommandName="Edit" Text="编辑"></asp:LinkButton>
            </ItemTemplate>
            <EditItemTemplate>
              <asp:LinkButton ID="btnUpdate" runat="server" CausesValidation="True" 
                CommandName="Update" Text="更新"></asp:LinkButton>
              &nbsp;<asp:LinkButton ID="btnCancel" runat="server" CausesValidation="False" 
                CommandName="Cancel" Text="取消"></asp:LinkButton>
            </EditItemTemplate>
          </asp:TemplateField>
        </Columns>
      </asp:GridView>
      </form>
    </body>
    </html>
    


    知识改变命运,奋斗成就人生!
    • 已标记为答案 jinwb1982 2010年4月16日 15:42
    2010年4月16日 6:28
    版主
  • 你好,感谢你的实例,在IE6下运行正常,在FF下不能触发click事件。上网查了一下,都是这种情况,请问有没有办法解决啊?
    2010年4月16日 15:41
  • 你好!

    我在 ff 中测试了,的确不能引发 a 连接 click 事件。查了相关资料也未找到答案。

    但 input 对象都是可以引发的,建议你将更改与取消按钮换成 button。如下:

    <asp:Button ID="btnUpdate"  CommandName="Update" Text="更新" runat="server"/>


    知识改变命运,奋斗成就人生!
    2010年4月19日 4:37
    版主
  • 你好!

    我在 ff 中测试了,的确不能引发 a 连接 click 事件。查了相关资料也未找到答案。

    但 input 对象都是可以引发的,建议你将更改与取消按钮换成 button。如下:

    <asp:Button ID="btnUpdate"  CommandName="Update" Text="更新" runat="server"/>


    知识改变命运,奋斗成就人生!
    是啊,谢谢,就是像你所说的那样,而且如a span div 等标签在FF下都是触发不了的,感谢你的帮助
    2010年4月19日 12:40