GridView編輯、取消按鈕自定義控件

這個需求來自於論壇一位壇友提出的問題，他希望能夠自定義編輯、取消按鈕，而不是用GridView自帶的編輯和取消。這里只當拋磚引玉，提出一些解決方案。

首先在頁面前台設置一個GridView。

<div>  
    <asp:GridView ID="GridView1" runat="server">  
        <Columns>  
            <asp:TemplateField HeaderText="操作">  
                <ItemTemplate>  
                    <table>  
                        <td align="center">  
                            <asp:Button ID="Edit" runat="server" Text="編輯" Visible="true" OnClick="Edit_Click"  
                                CommandArgument="<%# Container.DataItemIndex %>" />  
                            <asp:Button ID="Cancel" runat="server" Text="取消" Visible="false" OnClick="Cancel_Click" />  
                        </td>  
                    </table>  
                </ItemTemplate>  
            </asp:TemplateField>  
        </Columns>  
    </asp:GridView>  
</div>  

這里注意，我通過給按鈕Edit的CommandArgument屬性設置一個DataItemIndex值，這個值就是默認行的索引值。通過這個參數可以獲取GridView的行號。

然后我在首頁加載的時候綁定數據源。

protected void Page_Load(object sender, EventArgs e)  
{  
    if (!Page.IsPostBack)  
    {  
        DataTable dt = new DataTable();  
        dt.Columns.Add("id", typeof(int));  
        dt.Columns.Add("name", typeof(string));  
  
        dt.Rows.Add(10001, "guwei40371");  
        dt.Rows.Add(10002, "guwei40372");  
  
        this.GridView1.DataSource = dt.DefaultView;  
        this.GridView1.DataBind();  
    }  
}  

這里很簡單，就是綁定了兩列，給GridView綁定上。

接下來兩個按鈕事件：

protected void Edit_Click(object sender, EventArgs e)  
{  
    int index = Convert.ToInt32((sender as Button).CommandArgument);//獲取到行號  
    Button button = this.GridView1.Rows[index].FindControl("Cancel") as Button;//找到當前行的Cancel按鈕  
    button.Visible = true;//設置按鈕的Visible為true  
}  
  
protected void Cancel_Click(object sender, EventArgs e)  
{  
    int row = ((GridViewRow)((Button)sender).NamingContainer).RowIndex;//通過按鈕直接找到命名容器（GridViewRow）的RowIndex  
    Response.Write("<script>alert('" + this.GridView1.Rows[row].Cells[1].Text + "')</script>");//直接彈出當前行單元格索引為1的內容  
}  

具體代碼的含義，上面已經注釋明了，這里不重復。

 

最后看下執行的效果。

當點擊編輯按鈕的時候，顯示取消按鈕。

當點擊取消按鈕的時候，彈出10001。