在GridView的第一列使用CheckBox控制每一行数据,是经常使用的,这里面我要记录的是全选、全消、选中行的底色更改,还有就是在提交数据的时候,取选中的行的编号等功能
aspx页面定义:
<
asp:GridView
ID
="GridView1"
runat
="server"
>
<
Columns
>
<
asp:TemplateField
ShowHeader
="False"
HeaderText
="选择"
>
<
ItemStyle
Width
="60px"
Wrap
="False"
/>
<
HeaderTemplate
>
<
asp:CheckBox
ID
="CheckBox1"
runat
="server"
></
asp:CheckBox
>
</
HeaderTemplate
>
<
ItemTemplate
>
<
asp:CheckBox
ID
="CheckBox1"
runat
="server"
></
asp:CheckBox
>
<
asp:TextBox
ID
="TextBox1"
runat
="server"
Text
='<%#
Eval("EventID") %
>
' Visible="false">
</
asp:TextBox
>
</
ItemTemplate
>
</
asp:TemplateField
>
</
Columns
>
<
HeaderStyle
Font-Bold
="False"
BackColor
="#EEEEEE"
/>
<
AlternatingRowStyle
BackColor
="#EEEEEE"
/>
</
asp:GridView
>
这样在GridView的第一列,是CheckBox控件,在HeaderTemplate里的是用来控制全选全消的,在TemplateField里的,用来控制当前行是不是选中行
js脚本是这个:
<
script type
=
"
text/javascript
"
language
=
"
javascript
"
>
function
changecolor(obj,color)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
e = event.srcElement
if(e.checked==true)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
e = e.parentElement
e.style.background = "#C0C0FF"
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
e = e.parentElement
e.style.background = color
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
function
CheckSelect(del)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
var rt=true;
var num=0;
var boxorder=0;
var objCheckBox;
for(var i=0;i<aspnetForm.length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
///alert(aspnetForm.elements[i].type);
if(aspnetForm.elements[i].type=="checkbox")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
boxorder++;
objCheckBox=aspnetForm.elements[i];
///alert(objCheckBox.checked);
if(objCheckBox.checked)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(boxorder>1)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
//如果是第一个CheckBox,是用来全选全消的,这个不算,不用自加
num++;
}
}
}
}
///alert(num);
if(!del)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(num>1)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
alert("此操作不允许选择多个事件");
rt=false;
}
}
if(num==0)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
alert("此操作要求先选择一个事件");
rt=false
}
///alert(rt);
return rt;
}
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
function
SelectAll(sa)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
///全选/全消
var objCheckBox;
for(var i=0;i<aspnetForm.length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if(aspnetForm.elements[i].type=="checkbox")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
objCheckBox=aspnetForm.elements[i];
objCheckBox.checked=sa;
}
}
}
</
script
>
第一个函数changecolor用来控制被选择的行的颜色突出,第二个函数CheckSelect用来判断现在有几个行被选中,第三个函数SelectAll用来控制全选全消
在cs页面里,为每一行的CheckBox绑定客户端事件:
protected
void
GridView1_RowDataBound(
object
sender, GridViewRowEventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
if (e.Row.RowType == DataControlRowType.Header || e.Row.RowType == DataControlRowType.DataRow)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
CheckBox mycb = new CheckBox();
mycb = (CheckBox)e.Row.FindControl("CheckBox1");
if (mycb != null)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if (e.Row.RowType == DataControlRowType.DataRow)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if (e.Row.RowIndex % 2 == 0)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
mycb.Attributes.Add("onclick", "changecolor(this.name,'#FFFFFF')");
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
mycb.Attributes.Add("onclick", "changecolor(this.name,'#EEEEEE')");
}
}
else if (e.Row.RowType == DataControlRowType.Header)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
mycb.Attributes.Add("onclick", "SelectAll(this.checked)");
}
}
}
}
这里,对不同的DataControlRowType,我绑定了不同的客户端事件,因为定义在HeaderTemplate和ItemTemplate里的CheckBox是要执行不同的客户端事件的
上面的东西都很简单,分清楚客户端和服务器端就可以了,我一开始的时候在服务器端和客户端跳来跳去,自己都乱了,好烦啊
我在这里还要记录这样的情况:
在页面里,有一个自定义用户控件,有一个GridView控件,在自定义用户控件里,有Button用来控制GridView里的记录
我要记录的是,怎么在这个Button里,判断有哪些记录被选中
1、上面的aspx代码里,我加了TextBox,记录编号
2、在自定义用户控件里,用下面的事件,就返回选中行的编号了
public
string
GetEid()
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
//取选中的事件编号
string streid = "";
GridView mygv = new GridView();
mygv = (GridView)Parent.FindControl("GridView1");
if (mygv != null)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
int i, row;
i = 0;
row = mygv.Rows.Count;
CheckBox mycb = new CheckBox();
for (i = 0; i < row; i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
mycb = (CheckBox)mygv.Rows[i].FindControl("CheckBox1");
if (mycb != null)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if (mycb.Checked)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
TextBox mytb = new TextBox();
mytb = (TextBox)mygv.Rows[i].FindControl("TextBox1");
if (mytb != null)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
streid = streid + mytb.Text.Trim() + ",";
}
}
}
}
}
if (streid.Length > 0)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
streid = streid.Remove(streid.Length - 1);
}
return streid;
}
就是Parent和FindControl的使用,用Parent可以引用包含自定义用户控件的页面,对这个页面里的GridView的每一行扫描,就可以取到每一行的CheckBox了
对自定义控件里,如果有的Button需要先选择一个 or 多个记录才允许操作的,可以在自定义控件里给Button加上客户端事件
protected
void
Page_Load(
object
sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
Button1.Attributes["onclick"] = "return CheckSelect(false);";
Button4.Attributes["onclick"] = "return CheckSelect(false);";
Button2.Attributes["onclick"] = "return CheckSelect(true);";
}
这里我给Button1和Button4加了不允许多个选择的事件,给Button2加了允许多个选择的事件