菜鸟学堂:
在网络开发中,经常遇到需要使用asp.net与javascript联合进行控制的情况。在本篇中,将使用datagrid进行数据绑定,使用javascript控制当选中其中的checkbox时,该行颜色改变。
首先,在页面中创建一个datagrid控件,并设置其模板。
<asp:datagrid 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:datagrid>
第二,在页面中的<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("体育");
datagrid1.datasource=arr;
datagrid1.databind();
int i;
for(i=0;i<datagrid1.items.count;i++){
checkbox cb;
cb=(checkbox)datagrid1.items[i].findcontrol("checkbox1");
datagrid1.items[i].attributes.add("id","tr" + i.tostring());
cb.attributes.add("onclick","checkme(this,tr" + i.tostring() + ");");
}
}
第四,完成之后运行程序。程序运行后,会在datagrid控件的每行前显示一个checkbox控件,选择该控件,该行背景颜色变蓝色,取消选择,该行颜色恢复初始状态。