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

转载 2007年09月25日 09:04: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>");

        }

    }

}
 

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

原文地址:http://www.codeproject.com/KB/webforms/EditGridviewCells.aspx [原文源码下载] [译者改后源码下载] 作者:Decla...
  • judyge
  • judyge
  • 2015年11月15日 10:36
  • 1368

实现双击进入编辑,失去焦点后保存数据(Angular)

最近做一个项目,前端由Angular搭建,需要实现一个功能,就是双击进入编辑,当失去焦点的时候把数据保存。(即改变双向绑定的数据)。         先写一些简陋的HTML代码: ...
  • PigBiBiX
  • PigBiBiX
  • 2017年08月02日 11:17
  • 315

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

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

GridView中如何实现双重点击事件

GridView也是列表View,与ListView相比,他的列数不固定,与Gallery相比,他的行数大于1,所以GridView算是集成了ListView和Gallery。我们知道,如果要实现Gr...
  • liugx588
  • liugx588
  • 2015年02月14日 16:50
  • 449

dev gridview控件双击事件

使用过dev gridview控件的朋友都知道,gridview本身的
  • gedengbang
  • gedengbang
  • 2014年10月31日 13:23
  • 2770

ASP.net中的AJAX学习记录六 无刷新的数据编辑(GridView和DetailsView结合实例)(转)

本篇博客是仿照书中实例,实现GridView和DetailsView结合无刷新的数据编辑效果,页面效果:当点击GridView1的行或换页时,都会引发DetailsView1的数据绑定显示至页面,同时...
  • lonely_wm
  • lonely_wm
  • 2014年11月26日 23:42
  • 880

GridView中直接新增行、编辑和删除

.aspx "server" ID="btnAdd" Text="新增" OnClick="btnAdd_Click" />    "gv" runat="server" Al...
  • theoldfuture
  • theoldfuture
  • 2016年09月13日 01:24
  • 884

GridView 编辑 删除——TemplateField的基础用法

GridView 用法 基础使用并不难 无非写一个bind()方法查询数据并绑定到GridView中 绑定GridView的时候用到两个方法: 1)GridView.DataSource=dt;...
  • NightCharm
  • NightCharm
  • 2016年12月13日 22:19
  • 721

easyui 双击行,启动编辑 ,及 保存 和 撤销 的实现。

DataGrid 中,使用的 事件,方法,均可查看 easyui API  1、在所有需要启动编辑的列,加上 editor,可查看 API 中,列属性:editor 。其中,当 editor 的 ty...
  • u012246342
  • u012246342
  • 2017年04月17日 14:02
  • 1349

asp.net 学习之路之gridView控件之修改数据

在之前的博文中说过,通过几种方式修改gridview列名汉化显示。 先看看这次博文中,数据库里面的内容把。 这里,再接着上次的博文细说。 上次的博文说道,第一种方式是直接在数...
  • HK_5788
  • HK_5788
  • 2015年07月06日 23:18
  • 2333
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:GridView实现双击进行编辑,更新
举报原因:
原因补充:

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