开发者社区> 老朱教授> 正文

DataGrid 完全攻略之八 (选择DataGrid中的CheckBox控件后该行背景变色)

简介:
+关注继续查看

在网络开发中,经常遇到需要使用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控件,选择该控件,该行背景颜色变蓝色,取消选择,该行颜色恢复初始状态。



本文转自高海东博客园博客,原文链接:http://www.cnblogs.com/ghd258/archive/2005/10/12/253236.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
按钮实现鼠标悬停背景色渐变的动画特效
Title input { position: absolute; top: 50%; ...
1081 0
wpf datagrid设置右键菜单打开时选中项的背景色
原文:wpf datagrid设置右键菜单打开时选中项的背景色 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/huangli321456/article/details/53929433 ...
955 0
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
10165 0
Unity 之 关于UnityHub无法打开项目的问题(弹出Unity启动界面有退回到Hub选择工程界面)
弹出Unity启动界面有退回到Hub选择工程界面方案一:万能的重启大法;方案二:未开启许可证;方案三:终极奥义 -- 弃用Hub
371 0
理解C语言——从小菜到大神的晋级之路(2)——开发环境的选择和HelloWorld程序
视频观看:点击这里 一、常用系统及IDE简介        常言道,工欲善其事必先利其器。除了少数奇葩之外,大部分人应不会去使用记事本或者Word文档去编程吧?几乎所有编程语言都需要一个高效易用的开发环境,C语言也不例外。
1505 0
+关注
3546
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
JS零基础入门教程(上册)
立即下载
性能优化方法论
立即下载
手把手学习日志服务SLS,云启实验室实战指南
立即下载