DataGrid 完全攻略之八 (选择DataGrid中的CheckBox控件后该行背景变色)-阿里云开发者社区

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

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,如需转载请自行联系原作者

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

相关文章
怎么设置阿里云服务器安全组?阿里云安全组规则详细解说
阿里云服务器安全组设置规则分享,阿里云服务器安全组如何放行端口设置教程
8431 0
使用OpenApi弹性释放和设置云服务器ECS释放
云服务器ECS的一个重要特性就是按需创建资源。您可以在业务高峰期按需弹性的自定义规则进行资源创建,在完成业务计算的时候释放资源。本篇将提供几个Tips帮助您更加容易和自动化的完成云服务器的释放和弹性设置。
12069 0
[DevExpress]设置RepositoryItemComboBox只可下拉选择不可编辑
原文:[DevExpress]设置RepositoryItemComboBox只可下拉选择不可编辑 将TextEditStyle属性设置如下即可: 希望有所帮助!
1211 0
按钮实现鼠标悬停背景色渐变的动画特效
Title input { position: absolute; top: 50%; ...
1053 0
+关注
3546
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
《2021云上架构与运维峰会演讲合集》
立即下载
《零基础CSS入门教程》
立即下载
《零基础HTML入门教程》
立即下载