实训练习2 双击GridView 任何一条数据后，页面没有刷新，并将该行的数据显示在对应的字段中

添加信息

 

双击GridView 任何一条数据后，页面没有刷新，并将该行的数据显示在对应的字段中 进行编辑

 

修改信息

------------------

1.使用js进行数据的绑定

2.保存数据

 

//不刷新绑定数据 function bindtxt(va){ var name = document.getElementById("<%=txtname.ClientID%>"); //获得姓名文本框 var age = document.getElementById("<%=DropDownList1.ClientID%>");//获得年龄下拉列表框 var woman = document.getElementById("<%=rbtwoman.ClientID%>"); //获得单选按钮 男 var man = document.getElementById("<%=rbtman.ClientID%>");//获得单选按钮女 var view = document.getElementById("<%=GridView1.ClientID%>");//获得表格 //根据表格中列的文本值进行赋值 name.value = view.rows[va].cells[0].innerText; //姓名 age.value=view.rows[va].cells[1].innerText;//年龄 var sexval = view.rows[va].cells[2].innerText; //性别 //根据性别进行单选按钮选择的设置 if(sexval!="男"){ man.checked=false; woman.checked = true; }else{ man.checked=true; woman.checked = false; } var lbl = document.getElementById("<%=hedid.ClientID%>"); //存储用户所在的行数 lbl.value=va; return false; } 

页面显示：

<div> <asp:HiddenField ID="hedid" runat="server" Value="0" /> 姓名：<asp:TextBox ID="txtname" runat="server" MaxLength="50" ></asp:TextBox><br /> 年龄： <asp:DropDownList ID="DropDownList1" runat="server" Height="16px" Width="126px"> </asp:DropDownList> <br /> 性别：<asp:RadioButton ID="rbtman" GroupName="sex" runat="server" Text="男" Checked="True" /> <asp:RadioButton ID="rbtwoman" GroupName="sex" runat="server" Text="女" /><br /> <asp:Button ID="btnSave" runat="server" Text="保存" onclick="btnSave_Click" OnClientClick="return ckall();"/> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" onrowdatabound="GridView1_RowDataBound" DataKeyNames="UID" Height="200px" Width="300px"> <Columns> <asp:BoundField DataField="UID" HeaderText="id" Visible="False" /> <asp:BoundField DataField="Name" HeaderText="姓名" /> <asp:BoundField DataField="Age" HeaderText="年龄" /> <asp:BoundField DataField="Sex" HeaderText="性别" /> </Columns> </asp:GridView> </div> 

后台：

/// <summary> /// 保存事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void btnSave_Click(object sender, EventArgs e) { //收集数据 UsesInfo us = new UsesInfo { Name = this.txtname.Text, Age = Convert.ToInt32(this.DropDownList1.SelectedValue), Sex = this.rbtman.Checked ? "男" : "女" }; bool bn = false; if (this.hedid.Value=="0") //判断是否是修改 { bn = useManager.AddUses(us); //添加用户 } else { //根据行号获得id 行号需要减一 传值的时候为了去掉表头加一 us.UID = Convert.ToInt32(this.GridView1.DataKeys[Convert.ToInt32(this.hedid.Value)-1].Value); bn = useManager.UpUse(us); //更新 } if (bn) //恢复初始状态 { this.DropDownList1.SelectedIndex = 9 ; this.txtname.Text = string.Empty; this.rbtman.Checked = true; this.rbtwoman.Checked = false; this.hedid.Value = "0"; } gvBind(); } /// <summary> /// 数据行绑定事件 /// </summary> /// <param name="sender"></param> /// <param name="e"></param> protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { if (e.Row.RowType== DataControlRowType.DataRow) { //添加光棒效果 e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='skyblue';this.style.cursor='hand';"); e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c;;this.style.cursor='hand';"); //添加双击事件 e.Row.Attributes.Add("ondblclick", "return bindtxt('" + (e.Row.RowIndex+1) + "');"); } }