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

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

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

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<code>&lt;</code><code>div</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>asp:GridView</code> <code>ID</code><code>=</code><code>"GridView1"</code> <code>runat</code><code>=</code><code>"server"</code><code>&gt;</code>

<code>        </code><code>&lt;</code><code>Columns</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>asp:TemplateField</code> <code>HeaderText</code><code>=</code><code>"操作"</code><code>&gt;</code>

<code>                </code><code>&lt;</code><code>ItemTemplate</code><code>&gt;</code>

<code>                    </code><code>&lt;</code><code>table</code><code>&gt;</code>

<code>                        </code><code>&lt;</code><code>td</code> <code>align</code><code>=</code><code>"center"</code><code>&gt;</code>

<code>                            </code><code>&lt;</code><code>asp:Button</code> <code>ID</code><code>=</code><code>"Edit"</code> <code>runat</code><code>=</code><code>"server"</code> <code>Text</code><code>=</code><code>"編輯"</code> <code>Visible</code><code>=</code><code>"true"</code> <code>OnClick</code><code>=</code><code>"Edit_Click"</code>

<code>                                </code><code>CommandArgument="&lt;%# Container.DataItemIndex %&gt;" /&gt;</code>

<code>                            </code><code>&lt;</code><code>asp:Button</code> <code>ID</code><code>=</code><code>"Cancel"</code> <code>runat</code><code>=</code><code>"server"</code> <code>Text</code><code>=</code><code>"取消"</code> <code>Visible</code><code>=</code><code>"false"</code> <code>OnClick</code><code>=</code><code>"Cancel_Click"</code> <code>/&gt;</code>

<code>                        </code><code>&lt;/</code><code>td</code><code>&gt;</code>

<code>                    </code><code>&lt;/</code><code>table</code><code>&gt;</code>

<code>                </code><code>&lt;/</code><code>ItemTemplate</code><code>&gt;</code>

<code>            </code><code>&lt;/</code><code>asp:TemplateField</code><code>&gt;</code>

<code>        </code><code>&lt;/</code><code>Columns</code><code>&gt;</code>

<code>    </code><code>&lt;/</code><code>asp:GridView</code><code>&gt;</code>

<code>&lt;/</code><code>div</code><code>&gt;</code>

這裡注意，我通過給按鈕Edit的CommandArgument屬性設定一個DataItemIndex值，這個值就是預設行的索引值。通過這個參數可以擷取GridView的行号。

然後我在首頁加載的時候綁定資料源。

<code>protected</code> <code>void</code> <code>Page_Load(</code><code>object</code> <code>sender, EventArgs e)</code>

<code>{</code>

<code>    </code><code>if</code> <code>(!Page.IsPostBack)</code>

<code>    </code><code>{</code>

<code>        </code><code>DataTable dt = </code><code>new</code> <code>DataTable();</code>

<code>        </code><code>dt.Columns.Add(</code><code>"id"</code><code>, </code><code>typeof</code><code>(</code><code>int</code><code>));</code>

<code>        </code><code>dt.Columns.Add(</code><code>"name"</code><code>, </code><code>typeof</code><code>(</code><code>string</code><code>));</code>

<code>              </code> 

<code>        </code><code>dt.Rows.Add(10001, </code><code>"guwei40371"</code><code>);</code>

<code>        </code><code>dt.Rows.Add(10002, </code><code>"guwei40372"</code><code>);</code>

<code>        </code><code>this</code><code>.GridView1.DataSource = dt.DefaultView;</code>

<code>        </code><code>this</code><code>.GridView1.DataBind();</code>

<code>    </code><code>}</code>

<code>}</code>

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

接下來兩個按鈕事件：

<code>protected</code> <code>void</code> <code>Edit_Click(</code><code>object</code> <code>sender, EventArgs e)</code>

<code>    </code><code>int</code> <code>index = Convert.ToInt32((sender </code><code>as</code> <code>Button).CommandArgument);</code><code>//擷取到行号</code>

<code>    </code><code>Button button = </code><code>this</code><code>.GridView1.Rows[index].FindControl(</code><code>"Cancel"</code><code>) </code><code>as</code> <code>Button;</code><code>//找到目前行的Cancel按鈕</code>

<code>    </code><code>button.Visible = </code><code>true</code><code>;</code><code>//設定按鈕的Visible為true</code>

<code>        </code> 

<code>protected</code> <code>void</code> <code>Cancel_Click(</code><code>object</code> <code>sender, EventArgs e)</code>

<code>    </code><code>int</code> <code>row = ((GridViewRow)((Button)sender).NamingContainer).RowIndex;</code><code>//通過按鈕直接找到命名容器（GridViewRow）的RowIndex</code>

<code>    </code><code>Response.Write(</code><code>"&lt;script&gt;alert('"</code> <code>+ </code><code>this</code><code>.GridView1.Rows[row].Cells[1].Text + </code><code>"')&lt;/script&gt;"</code><code>);</code><code>//直接彈出目前行單元格索引為1的内容</code>

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

最後看下執行的效果。

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

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

本文轉自 guwei4037  51CTO部落格，原文連結:http://blog.51cto.com/csharper/1345989