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

简介:

这个需求来自于论坛一位坛友提出的问题,他希望能够自定义编辑、取消按钮,而不是用GridView自带的编辑和取消。这里只当抛砖引玉,提出一些解决方案。

首先在页面前台设置一个GridView。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
< 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的行号。

然后我在首页加载的时候绑定数据源。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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绑定上。

接下来两个按钮事件:

1
2
3
4
5
6
7
8
9
10
11
12
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的内容
}

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


最后看下执行的效果。

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

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

Center



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

相关文章
|
Android开发
Android 常见对话框的简单使用(提示信息对话框、单选多选对话框、自定义对话框)
Android 常见对话框的简单使用(提示信息对话框、单选多选对话框、自定义对话框)
413 0
Android 常见对话框的简单使用(提示信息对话框、单选多选对话框、自定义对话框)
|
前端开发
uniapp checkbox样式失效,选中框选中按钮不显示
uniapp checkbox样式失效,选中框选中按钮不显示
352 0
|
JavaScript 前端开发
49EasyUI 窗口- 自定义带有工具条和按钮的对话框
49EasyUI 窗口- 自定义带有工具条和按钮的对话框
56 0
|
XML Java API
按钮和复选框控件
按钮和复选框控件
100 0
|
存储 关系型数据库 MySQL
Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
Easyui datagrid combobox输入框下拉(取消)选值和编辑已选值处理
434 0
|
XML JSON Java
Android RecyclerVIew 列表实现 编辑、单选、全选、删除、动画效果(附源码)
Android RecyclerVIew 列表实现 编辑、单选、全选、删除、动画效果(附源码)
530 0
QT应用编程: QTableWidget删除选中的多行与全选、取消全选
QT应用编程: QTableWidget删除选中的多行与全选、取消全选
1122 0
QT应用编程: QTableWidget删除选中的多行与全选、取消全选
|
C#
wpf datagrid设置右键菜单打开时选中项的背景色
原文:wpf datagrid设置右键菜单打开时选中项的背景色 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huangli321456/article/details/53929433 ...
1478 0
|
C#
C# DataGridview控件自动下拉到最后一行
有时候使用DataGridView难免会在最后插入一条数据,如果插入的数据超过滚动条显示的行数,那么默认情况下不会显示到最后一行。增加以下代码一直将滚动条拉倒最低。 this.dataGridView1.
2755 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等