天天看點

GridView資料庫分頁+自定義分頁導航(三):編輯和删除

完成後的圖:

GridView資料庫分頁+自定義分頁導航(三):編輯和删除

首先我們之前的完成的模闆是這樣子的:

GridView資料庫分頁+自定義分頁導航(三):編輯和删除

還沒有綁定任何功能,隻是設定了CommandName,這裡在做簡單做一下那個步驟。右擊GridView右上角的小三角,進入編輯模闆,選中這兩個按鈕,然後設定CommandName的值為Edit和Delete,這個值是預設的,

再選中【删除】按鈕,做下面操作。

GridView資料庫分頁+自定義分頁導航(三):編輯和删除

自定義綁定表達式:<%# Eval("id")%>,我用的是2015版本,隻需要輸入Eval("id")就行了。這樣綁定id後,在後面的方法可以擷取到這個id。

然後選擇【EditItemTemplate】

GridView資料庫分頁+自定義分頁導航(三):編輯和删除
GridView資料庫分頁+自定義分頁導航(三):編輯和删除

在裡面在再放兩個Button,并設定儲存按鈕的CommandName為Save,取消的為Cancel,然後結束編輯模闆。

選中GridView,在

選擇GridView,在右下角屬性欄中,輕按兩下這四個屬性,讓它自動生成方法,

GridView資料庫分頁+自定義分頁導航(三):編輯和删除

編輯方法:

protected void codeTable_RowEditing(object sender, GridViewEditEventArgs e)
        {
            codeTable.EditIndex = e.NewEditIndex;
            viewData();
        }           

複制

這時,測試,

GridView資料庫分頁+自定義分頁導航(三):編輯和删除

你會發現,編輯那一行都是可編輯的,怎麼辦?而且它生成的輸入框很長,都把你的表格樣式給破壞了。

解決辦法就是設定它的表格頭,把表頭的寬度固定就可以了。

設定的方式有兩種,

第一種:

選中GridView,在右上角的小三角,【編輯列】

GridView資料庫分頁+自定義分頁導航(三):編輯和删除

進入到這個界面,找到【HeaderStyle】在裡面找到【width】設定它的寬度為10%,其他列同樣方法設定。

GridView資料庫分頁+自定義分頁導航(三):編輯和删除
GridView資料庫分頁+自定義分頁導航(三):編輯和删除

第二種:

<HeaderStyle Width="10%" />           

複制

将這句放在表頭下面,如:

GridView資料庫分頁+自定義分頁導航(三):編輯和删除

這,它是在<asp:BoundField></asp:BoundField>裡的。

然後是指定列的編輯,基本上我們隻想編輯其中的一兩列,是以。

隻要在不想編輯的列的表頭加上ReadOnly=“true”就可以了

<asp:BoundField DataField="pname"   HeaderText="省"  ReadOnly="True">           

複制

GridView資料庫分頁+自定義分頁導航(三):編輯和删除

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屬性中輕按兩下生成方法

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()");
                }
            }
        }           

複制

這裡編輯、删除、儲存、和取消完成。