<个人网站,欢迎交流:www.tripbee.cn >
使用GridView进行数据绑定,使用Javascript控制当选中其中的checkbox时,该行颜色改变,取消选择,该行颜色恢复初始状态。
1,在页面中创建一个DataGrid控件,并设置其模板。
< asp:GridView id="DataGrid1" runat="server" AutoGenerateColumns="False"> < Columns>
< asp:TemplateColumn>
< ItemTemplate>
< asp:CheckBox id="checkbox1" Runat ="server">< /asp:CheckBox>
< asp:Label runat="server" Text='< %# DataBinder.Eval(Container, "DataItem") %>'>< /asp:Label>
< /ItemTemplate>
< /asp:TemplateColumn>
< /Columns>
< /asp:GridView> 第二,在页面中的< head>< /head>中编写JavaScript脚本函数,进行CheckBox的判断和颜色改变的控制。
< script> function checkme(obj,tr) { if(obj.checked) tr.style.backgroundColor='blue'; else tr.style.backgroundColor=''; } < /script> 第三,在Page_Load事件中为DataGrid绑定数据,并关联CheckBox的JavaScript脚本。
以下是引用片段:
private void Page_Load(object sender, System.EventArgs e) {
// Put user code to initialize the page here
if(!IsPostBack)
{
databind();
}
}
private void databind()
{
ArrayList arr=new ArrayList();
arr.Add("新闻综合");
arr.Add("综艺");
arr.Add("电影");
arr.Add("教育");
arr.Add("戏剧");
arr.Add("军事");
arr.Add("体育");
GridView1.DataSource=arr;
GridView1.DataBind();
int i;
for(i=0; i< GridView1.Items.Count; i++){
CheckBox cb;
cb=(CheckBox)DataGrid1.Items[i].FindControl("checkbox1");
GridView1.Items[i].Attributes.Add("id","tr" + i.ToString());
cb.Attributes.Add("onclick","checkme(this,tr" + i.ToString() + "); ");
}
}
第四,完成之后运行程序。程序运行后,会在GridView控件的每行前显示一个CheckBox控件,选择该控件,该行背景颜色变蓝色,取消选择,该行颜色恢复初始状态。