GridView实现双击进行编辑,更新

原创 2007年09月24日 18:45:00

虽然标题是原创,但是其实主要的思想呢还是接见了晓风残月的思路,今天在晓风残月的博客上看到了如何利用GridView来实现双击进行编辑。我决定动手实现一下,由于还没有实现双击进行更改操作,所以顺便就把这个功能加了上去,希望对大家能有帮助,同时也谢谢晓风残月。

效果图如下:

前台代码

 

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" BackColor="White"
            BorderColor
="#CCCCCC" BorderStyle="None" BorderWidth="1px" CellPadding="3" OnRowEditing="GridView1_RowEditing" OnRowDataBound="GridView1_RowDataBound" OnRowUpdating="GridView1_RowUpdating" OnRowCommand="GridView1_RowCommand">
            
<FooterStyle BackColor="White" ForeColor="#000066" />
            
<Columns>
                
<asp:ButtonField Text="SingleClick" CommandName="SingleClick" Visible="false" ButtonType="Link"/>
                
<asp:TemplateField HeaderText="ID">
                    
<ItemTemplate>
                        
<%Eval("customerid")%>
                    
</ItemTemplate>
                    
<EditItemTemplate>
                        
<asp:TextBox ID="ID" runat ="server" Text='<%# Bind("customerid")%>'></asp:TextBox>
                    
</EditItemTemplate>
                
</asp:TemplateField>
                
<asp:TemplateField HeaderText="CompanyName">
                    
<ItemTemplate>
                        
<%Eval("CompanyName")%>
                    
</ItemTemplate>
                    
<EditItemTemplate>
                        
<asp:TextBox ID="CName" runat ="server" Text='<%# Bind("CompanyName")%>'></asp:TextBox>
                    
</EditItemTemplate>
                
</asp:TemplateField>
                
<asp:TemplateField HeaderText="ContactName">
                    
<ItemTemplate>
                        
<%Eval("ContactName")%>
                    
</ItemTemplate>
                    
<EditItemTemplate>
                         
<asp:TextBox ID="Name" runat ="server" Text='<%# Bind("ContactName")%>'></asp:TextBox>
                    
</EditItemTemplate>
                
</asp:TemplateField>
                
<asp:TemplateField HeaderText="Address">
                    
<ItemTemplate>
                        
<%Eval("Address")%>
                    
</ItemTemplate>
                    
<EditItemTemplate>
                        
<asp:TextBox ID="Address" runat ="server" Text='<%# Bind("Address")%>'></asp:TextBox>
                    
</EditItemTemplate>
                
</asp:TemplateField>
            
</Columns>
            
<RowStyle ForeColor="#000066" />
            
<SelectedRowStyle BackColor="#669999" Font-Bold="True" ForeColor="White" />
            
<PagerStyle BackColor="White" ForeColor="#000066" HorizontalAlign="Left" />
            
<HeaderStyle BackColor="#006699" Font-Bold="True" ForeColor="White" />
        
</asp:GridView>
    
    
</div>
    
</form>

 

后台代码

 

    string ConStr = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
    
protected void Page_Load(object sender, EventArgs e)
    
{
        
if (!IsPostBack)
        
{
            BindData();
        }

    }



    
private void BindData()
    
{

        SqlConnection MyCon 
= new SqlConnection(ConStr);
        
string QueryStr = "SELECT customerid,CompanyName,ContactName,Address FROM customers";
        SqlDataAdapter Da 
= new SqlDataAdapter(QueryStr, MyCon);
        DataSet Ds 
= new DataSet();
        Da.Fill(Ds, 
"Customers");
        GridView1.DataSource 
= Ds.Tables[0];
        GridView1.DataKeyNames 
= new string[] "customerid" };
        GridView1.DataBind();

    }


    
protected override void Render(HtmlTextWriter writer)
    
{
        
foreach (GridViewRow Row in GridView1.Rows)
        
{
            
if (Row.RowType == DataControlRowType.DataRow)
            
{
                
//双击进入编辑模式
                Row.Attributes["ondblclick"= ClientScript.GetPostBackEventReference(GridView1, "Edit$" + Row.RowIndex.ToString(), true);
                Row.Attributes[
"style"= "cursor:pointer";
                Row.Attributes[
"title"= "双击进入编辑";
                
if (Row.RowState == DataControlRowState.Edit)
                
{
                    Row.Attributes.Remove(
"ondblclick");
                    Row.Attributes.Remove(
"style");
                    Row.Attributes[
"title"= "编辑行";
                    
for (Int32 i = 1; i < GridView1.Columns.Count; i++)
                    
{
                        ((TextBox)Row.Cells[i].Controls[
1]).Attributes.Add("onmouseover""this.select()");

                    }

                    
//双击更新
                    Row.Attributes["ondblclick"= ClientScript.GetPostBackEventReference(GridView1, "Update$" + Row.RowIndex.ToString(), true);

                }

                
//
                for (int i = 1; i < Row.Cells.Count; i++)
                
{
                    Page.ClientScript.RegisterForEventValidation(Row.UniqueID 
+ "$ctl00", i.ToString());
                }

            }

        }

        
base.Render(writer);
    }



    
protected void GridView1_RowEditing(object sender, GridViewEditEventArgs e)
    
{
        GridView1.EditIndex 
= e.NewEditIndex;
        BindData();
    }



    
protected void GridView1_RowUpdating(object sender, GridViewUpdateEventArgs e)
    
{
        
string ID = GridView1.DataKeys[e.RowIndex].Value.ToString();
        
//防止非法的输入,预防脚本攻击
        string CustomerId = Server.HtmlDecode(((TextBox)GridView1.Rows[e.RowIndex].Cells[1].Controls[1]).Text.ToString());
        
string CompanyName = Server.HtmlDecode(((TextBox)GridView1.Rows[e.RowIndex].Cells[2].Controls[1]).Text.ToString());
        
string ContactName = Server.HtmlDecode(((TextBox)GridView1.Rows[e.RowIndex].Cells[3].Controls[1]).Text.ToString());
        
string Address = Server.HtmlDecode(((TextBox)GridView1.Rows[e.RowIndex].Cells[4].Controls[1]).Text.ToString());
        SqlConnection Con 
= new SqlConnection(ConStr);
        
string UpdateStr = "UPDATE customers SET companyname=@CompanyName,contactname=@ContactName,address=@Address  WHERE customerid=@ID";
        
//插入数据的时候用参数来可以预防SQL注入攻击,提高系统的安全性
        SqlCommand UpdateCmd = new SqlCommand(UpdateStr,Con);
        SqlParameter ParmID 
= new SqlParameter("@ID", SqlDbType.NVarChar,20);
        ParmID.Value 
= ID;
        SqlParameter ParmCName 
= new SqlParameter("@CompanyName", SqlDbType.NVarChar, 20);
        ParmCName.Value 
= CompanyName;
        SqlParameter ParmName 
= new SqlParameter("@ContactName",SqlDbType.NVarChar,20);
        ParmName.Value 
= ContactName;
        SqlParameter ParmAddr 
= new SqlParameter("@Address",SqlDbType.NVarChar,20);
        ParmAddr.Value 
= Address;
        
try
        
{
            UpdateCmd.Parameters.Add(ParmCName);
            UpdateCmd.Parameters.Add(ParmName);
            UpdateCmd.Parameters.Add(ParmAddr);
            UpdateCmd.Parameters.Add(ParmID);
            Con.Open();
            UpdateCmd.ExecuteNonQuery();
            Con.Close();
        }

        
catch
        
{
            ShowMessage(
"输入格式不正确,请检查");
        }

        
finally
        
{
            Con.Close();
            GridView1.EditIndex 
= -1;
            BindData();
        }

    }


    
private void ShowMessage(string Message)
    
{
        Literal TxtMsg 
= new Literal();
        TxtMsg.Text 
= "<script>alert('" + Message + "')</script>";
        Page.Controls.Add(TxtMsg);
    }



    
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    
{

    }

    
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    
{
        GridView ControlGridView 
= (GridView)sender;
        
if (e.CommandName == "SingleClick")
        
{
            
int RowIndex = int.Parse(e.CommandArgument.ToString());
            
int ColIndex = int.Parse(Request.Form["__EVENTARGUMENT"]);
            Response.Write(
"<script>alert('你点击了第"+(RowIndex+1)+"行的第"+(ColIndex)+"列');</script>");

        }

    }

}
版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

asp.net JQuery Ajax WebService Gridview 任意 双击 某一列 编辑修改

写一个WebService方法GetAuto,xiang

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

功能: 单击选中行,双击打开详细页面

<JQuery>双击编辑异步更新

刚刚看视频之后动手做的,实现比较简单,具体代码如下: 无标题文档 $(document).ready(function(){ $("tbody > tr:even").addCl...

【随记】JQuery实现表格的双击编辑功能(自动适应表格高度和宽度)

<-- $(document).ready(function(){ $("#tables td").dblclick(function(){ if($(this).children("...

用JS实现动态删除表格行、列、双击编辑的代码

jquery 双击可编辑表格 有2种方案: 1、双击事件后,隐藏表格td之间的内容,插入一个 ,然后就可以编辑了。 2、双击事件后,讲当前表格td的contentEditable属性修改为t...
  • mboby
  • mboby
  • 2014-12-31 17:39
  • 256

JS实现双击内容变为可编辑状态

JS实现双击内容可编辑状态在一些网站上我们经常看到交互性很强的功能。一些用户资料可以直接双击出现文本框,并在此输入新的资料即可修改,无需再按确定按钮等。。 我在网上查了很多资料,但都有一个小bug,...
  • srd123
  • srd123
  • 2015-12-08 17:50
  • 5487

[翻译]在GridView中针对鼠标单击的某一独立单元格进行编辑

Posted on 2007-04-22 20:45 webabcd 阅读(17302) 评论(119)编辑收藏原文地址:http://www.codeproject.com/KB/webforms/...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)