在GridView里使用CheckBox2007年03月30日 星期五 20:02在GridView的第一列使用CheckBox控制每一行数据,是经常使用的,这里面我要记录的是全选、全消、选中行的底色更改,还有就是在提交数据的时候,取选中的行的编号等功能
aspx页面定义:
< 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脚本是这个:
function changecolor(obj,color)
... {
e = event.srcElement
if(e.checked==true)
...{
e = e.parentElement
e.style.background = "#C0C0FF"
}
else
...{
e = e.parentElement
e.style.background = color
}
}
function CheckSelect(del)
... {
var rt=true;
var num=0;
var boxorder=0;
var objCheckBox;
for(var i=0;i<aspnetForm.length;i++)
...{
///alert(aspnetForm.elements[i].type);
if(aspnetForm.elements[i].type=="checkbox")
...{
boxorder++;
objCheckBox=aspnetForm.elements[i];
///alert(objCheckBox.checked);
if(objCheckBox.checked)
...{
if(boxorder>1)
...{
//如果是第一个CheckBox,是用来全选全消的,这个不算,不用自加
num++;
}
}
}
}
///alert(num);
if(!del)
...{
if(num>1)
...{
alert("此操作不允许选择多个事件");
rt=false;
}
}
if(num==0)
...{
alert("此操作要求先选择一个事件");
rt=false
}
///alert(rt);
return rt;
}
function SelectAll(sa)
... {
///全选/全消
var objCheckBox;
for(var i=0;i<aspnetForm.length;i++)
...{
if(aspnetForm.elements[i].type=="checkbox")
...{
objCheckBox=aspnetForm.elements[i];
objCheckBox.checked=sa;
}
}
}
</ script >
第一个函数changecolor用来控制被选择的行的颜色突出,第二个函数CheckSelect用来判断现在有几个行被选中,第三个函数SelectAll用来控制全选全消
在cs页面里,为每一行的CheckBox绑定客户端事件:
... {
if (e.Row.RowType == DataControlRowType.Header || e.Row.RowType == DataControlRowType.DataRow)
...{
CheckBox mycb = new CheckBox();
mycb = (CheckBox)e.Row.FindControl("CheckBox1");
if (mycb != null)
...{
if (e.Row.RowType == DataControlRowType.DataRow)
...{
if (e.Row.RowIndex % 2 == 0)
...{
mycb.Attributes.Add("onclick", "changecolor(this.name,'#FFFFFF')");
}
else
...{
mycb.Attributes.Add("onclick", "changecolor(this.name,'#EEEEEE')");
}
}
else if (e.Row.RowType == DataControlRowType.Header)
...{
mycb.Attributes.Add("onclick", "SelectAll(this.checked)");
}
}
}
}
这里,对不同的DataControlRowType,我绑定了不同的客户端事件,因为定义在HeaderTemplate和ItemTemplate里的CheckBox是要执行不同的客户端事件的
上面的东西都很简单,分清楚客户端和服务器端就可以了,我一开始的时候在服务器端和客户端跳来跳去,自己都乱了,好烦啊
我在这里还要记录这样的情况:
在页面里,有一个自定义用户控件,有一个GridView控件,在自定义用户控件里,有Button用来控制GridView里的记录
我要记录的是,怎么在这个Button里,判断有哪些记录被选中
1、上面的aspx代码里,我加了TextBox,记录编号
2、在自定义用户控件里,用下面的事件,就返回选中行的编号了
... {
//取选中的事件编号
string streid = "";
GridView mygv = new GridView();
mygv = (GridView)Parent.FindControl("GridView1");
if (mygv != null)
...{
int i, row;
i = 0;
row = mygv.Rows.Count;
CheckBox mycb = new CheckBox();
for (i = 0; i < row; i++)
...{
mycb = (CheckBox)mygv.Rows[i].FindControl("CheckBox1");
if (mycb != null)
...{
if (mycb.Checked)
...{
TextBox mytb = new TextBox();
mytb = (TextBox)mygv.Rows[i].FindControl("TextBox1");
if (mytb != null)
...{
streid = streid + mytb.Text.Trim() + ",";
}
}
}
}
}
if (streid.Length > 0)
...{
streid = streid.Remove(streid.Length - 1);
}
return streid;
}
就是Parent和FindControl的使用,用Parent可以引用包含自定义用户控件的页面,对这个页面里的GridView的每一行扫描,就可以取到每一行的CheckBox了
对自定义控件里,如果有的Button需要先选择一个 or 多个记录才允许操作的,可以在自定义控件里给Button加上客户端事件
... {
Button1.Attributes["onclick"] = "return CheckSelect(false);";
Button4.Attributes["onclick"] = "return CheckSelect(false);";
Button2.Attributes["onclick"] = "return CheckSelect(true);";
}
这里我给Button1和Button4加了不允许多个选择的事件,给Button2加了允许多个选择的事件