<個人網站,歡迎交流: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控件,選擇該控件,該行背景顏色變藍色,取消選擇,該行顏色恢復初始狀態。