完成后的图:
首先我们之前的完成的模板是这样子的:
还没有绑定任何功能,只是设置了CommandName,这里在做简单做一下那个步骤。右击GridView右上角的小三角,进入编辑模板,选中这两个按钮,然后设置CommandName的值为Edit和Delete,这个值是默认的,
再选中【删除】按钮,做下面操作。
自定义绑定表达式:<%# Eval("id")%>,我用的是2015版本,只需要输入Eval("id")就行了。这样绑定id后,在后面的方法可以获取到这个id。
然后选择【EditItemTemplate】
在里面在再放两个Button,并设置保存按钮的CommandName为Save,取消的为Cancel,然后结束编辑模板。
选中GridView,在
选择GridView,在右下角属性栏中,双击这四个属性,让它自动生成方法,
编辑方法:
代码语言:javascript复制 protected void codeTable_RowEditing(object sender, GridViewEditEventArgs e)
{
codeTable.EditIndex = e.NewEditIndex;
viewData();
}
这时,测试,
你会发现,编辑那一行都是可编辑的,怎么办?而且它生成的输入框很长,都把你的表格样式给破坏了。
解决办法就是设置它的表格头,把表头的宽度固定就可以了。
设置的方式有两种,
第一种:
选中GridView,在右上角的小三角,【编辑列】
进入到这个界面,找到【HeaderStyle】在里面找到【width】设置它的宽度为10%,其他列同样方法设置。
第二种:
代码语言:javascript复制 <HeaderStyle Width="10%" />
将这句放在表头下面,如:
这,它是在<asp:BoundField></asp:BoundField>里的。
然后是指定列的编辑,基本上我们只想编辑其中的一两列,所以。
只要在不想编辑的列的表头加上ReadOnly=“true”就可以了
代码语言:javascript复制 <asp:BoundField DataField="pname" HeaderText="省" ReadOnly="True">
OK , 然后是取消编辑和保存,底层方法你们自己实现,这里是我已经完成的代码。
代码语言:javascript复制 protected void codeTable_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
codeTable.EditIndex = -1;
viewData();
}
protected void codeTable_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
int rId = e.RowIndex;
//验证输入内容
string ps = ((TextBox)(codeTable.Rows[rId].Cells[3].Controls[0])).Text;
string area = ((TextBox)(codeTable.Rows[rId].Cells[4].Controls[0])).Text;
string sid = codeTable.DataKeys[e.RowIndex].Value.ToString();//获取绑定的id
if (!(MyUtil.MatcherDouble(ps) || MyUtil.MatcherDouble(area)))
{
Response.Write("<script>confirm('请输入正确的数字');</script>");
return;
}
county c = new county();
countyB.save(double.Parse(ps),double.Parse(area),int.Parse(sid));
codeTable.EditIndex = -1;//保存后退出编辑
viewData();
}
删除:这里DATAKeys[]获取的就是我们之前绑定的id,
代码语言:javascript复制 protected void codeTable_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
int id = Convert.ToInt32(codeTable.DataKeys[e.RowIndex].Value);//获取绑定的id
countyB.delte(id);
viewData();
}
删除要加一个提醒,告诉用户是否删除,在RowDataBound方法里做这件事,这个方法是每绑定一行,触发一次这个事件。
相应的在GridView属性中双击生成方法
代码语言:javascript复制 protected void codeTable_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
if (e.Row.RowState == DataControlRowState.Normal || e.Row.RowState == DataControlRowState.Alternate)
{
((Button)e.Row.Cells[8].Controls[3]).Attributes.Add("onclick", "javascript:return confirmDelete()");
}
}
}
这里编辑、删除、保存、和取消完成。