这个需求来自于论坛一位坛友提出的问题,他希望能够自定义编辑、取消按钮,而不是用GridView自带的编辑和取消。这里只当抛砖引玉,提出一些解决方案。
首先在页面前台设置一个GridView。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<code><</code><code>div</code><code>></code>
<code> </code><code><</code><code>asp:GridView</code> <code>ID</code><code>=</code><code>"GridView1"</code> <code>runat</code><code>=</code><code>"server"</code><code>></code>
<code> </code><code><</code><code>Columns</code><code>></code>
<code> </code><code><</code><code>asp:TemplateField</code> <code>HeaderText</code><code>=</code><code>"操作"</code><code>></code>
<code> </code><code><</code><code>ItemTemplate</code><code>></code>
<code> </code><code><</code><code>table</code><code>></code>
<code> </code><code><</code><code>td</code> <code>align</code><code>=</code><code>"center"</code><code>></code>
<code> </code><code><</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="<%# Container.DataItemIndex %>" /></code>
<code> </code><code><</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>/></code>
<code> </code><code></</code><code>td</code><code>></code>
<code> </code><code></</code><code>table</code><code>></code>
<code> </code><code></</code><code>ItemTemplate</code><code>></code>
<code> </code><code></</code><code>asp:TemplateField</code><code>></code>
<code> </code><code></</code><code>Columns</code><code>></code>
<code> </code><code></</code><code>asp:GridView</code><code>></code>
<code></</code><code>div</code><code>></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>"<script>alert('"</code> <code>+ </code><code>this</code><code>.GridView1.Rows[row].Cells[1].Text + </code><code>"')</script>"</code><code>);</code><code>//直接弹出当前行单元格索引为1的内容</code>
具体代码的含义,上面已经注释明了,这里不重复。
最后看下执行的效果。
当点击编辑按钮的时候,显示取消按钮。
当点击取消按钮的时候,弹出10001。
本文转自 guwei4037 51CTO博客,原文链接:http://blog.51cto.com/csharper/1345989