完成後的圖:
首先我們之前的完成的模闆是這樣子的:
還沒有綁定任何功能,隻是設定了CommandName,這裡在做簡單做一下那個步驟。右擊GridView右上角的小三角,進入編輯模闆,選中這兩個按鈕,然後設定CommandName的值為Edit和Delete,這個值是預設的,
再選中【删除】按鈕,做下面操作。
自定義綁定表達式:<%# Eval("id")%>,我用的是2015版本,隻需要輸入Eval("id")就行了。這樣綁定id後,在後面的方法可以擷取到這個id。
然後選擇【EditItemTemplate】
在裡面在再放兩個Button,并設定儲存按鈕的CommandName為Save,取消的為Cancel,然後結束編輯模闆。
選中GridView,在
選擇GridView,在右下角屬性欄中,輕按兩下這四個屬性,讓它自動生成方法,
編輯方法:
protected void codeTable_RowEditing(object sender, GridViewEditEventArgs e)
{
codeTable.EditIndex = e.NewEditIndex;
viewData();
}
複制
這時,測試,
你會發現,編輯那一行都是可編輯的,怎麼辦?而且它生成的輸入框很長,都把你的表格樣式給破壞了。
解決辦法就是設定它的表格頭,把表頭的寬度固定就可以了。
設定的方式有兩種,
第一種:
選中GridView,在右上角的小三角,【編輯列】
進入到這個界面,找到【HeaderStyle】在裡面找到【width】設定它的寬度為10%,其他列同樣方法設定。
第二種:
<HeaderStyle Width="10%" />
複制
将這句放在表頭下面,如:
這,它是在<asp:BoundField></asp:BoundField>裡的。
然後是指定列的編輯,基本上我們隻想編輯其中的一兩列,是以。
隻要在不想編輯的列的表頭加上ReadOnly=“true”就可以了
<asp:BoundField DataField="pname" HeaderText="省" ReadOnly="True">
複制
OK , 然後是取消編輯和儲存,底層方法你們自己實作,這裡是我已經完成的代碼。
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,
protected void codeTable_RowDeleting(object sender, GridViewDeleteEventArgs e)
{
int id = Convert.ToInt32(codeTable.DataKeys[e.RowIndex].Value);//擷取綁定的id
countyB.delte(id);
viewData();
}
複制
删除要加一個提醒,告訴使用者是否删除,在RowDataBound方法裡做這件事,這個方法是每綁定一行,觸發一次這個事件。
相應的在GridView屬性中輕按兩下生成方法
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()");
}
}
}
複制
這裡編輯、删除、儲存、和取消完成。