天天看点

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>

具体代码的含义,上面已经注释明了,这里不重复。

最后看下执行的效果。

当点击编辑按钮的时候,显示取消按钮。

GridView编辑、取消按钮自定义控件

当点击取消按钮的时候,弹出10001。

GridView编辑、取消按钮自定义控件

本文转自 guwei4037  51CTO博客,原文链接:http://blog.51cto.com/csharper/1345989

继续阅读