Asp.net GridView隔行變色和光棒效果2種方法實現(xiàn)

更新時間：2013年04月07日 16:42:07 作者：

兩種方法實現(xiàn)GridView隔行變色和光棒效果:前臺和后臺配合使用及JQuery方式，感興趣的朋友可以參考下哈，希望可以幫助到你

方法一：前臺和后臺配合使用
1.aspx 隔行變色屬性（<AlternatingRowStyle BackColor="#f5f5f5" />）

 
<asp:GridView ID="gvProjectList" runat="server" 
OnRowCreated="gvProjectList_RowCreated"> 
<AlternatingRowStyle BackColor="#f5f5f5" /> 
</asp:GridView> 

1.aspx.cs 后臺事件中設(shè)置鼠標(biāo)至于某行上的變色效果

復(fù)制代碼代碼如下:

 
protected void gvProjectList_RowCreated(object sender, GridViewRowEventArgs e) 
{ 
e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='#eaeaea';");//這是鼠標(biāo)移到某行時改變某行的背景 
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor;");//鼠標(biāo)移走時恢復(fù) 
} 

方法二：JQuery方式
1.aspx
首先引用 jQuery 函數(shù)庫,在http://jquery.com/ 下載，然后寫css樣式，再加入js代碼。

復(fù)制代碼代碼如下:

復(fù)制代碼代碼如下:

 
<style type="text/css"> 
.even { 
background:#F5F5F5; 
} 
.odd { 
background:#FFFFFF; 
} 
.over{ 
background:#CDE6FF; 
} 
.tr_chouse { 
background:#6AB1FF; 
} 
</style> 

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(document).ready(function(){ 
$(".gridview tr:odd").addClass("odd"); //奇數(shù)行設(shè)定為 "odd" 樣式 
$(".gridview tr:even").addClass("even"); //偶數(shù)行設(shè)定為 "even" 樣式 
$(".gridview tr").mouseover(function(){$(this).addClass("over");}) //當(dāng) mouseover 時加入 "over" 樣式 
.mouseout(function(){$(this).removeClass("over");}) //當(dāng) mouseout 時移除 "over" 樣式 
.click(function(){$(this).toggleClass("tr_chouse");}) //當(dāng) click 加入或移除 "tr_chouse" 樣式，實現(xiàn)數(shù)據(jù)列選取 
}); 
</script> 

【2013年2月18日 13:57:30更新】

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(function(){ $(".maingrid_text tr:even").addClass("even"); $(".maingrid_text tr:odd").addClass("odd"); 
$(".maingrid_text tr").hover(function(){$(this).addClass("table_hover")},function(){$(this).removeClass("table_hover")}); 
}); 
function EndRequestHandler(){ 
$(function(){ $(".maingrid_text tr:even").addClass("even"); $(".maingrid_text tr:odd").addClass("odd"); 
$(".maingrid_text tr").hover(function(){$(this).addClass("table_hover")},function(){$(this).removeClass("table_hover")}); 
}); 
} 
function reload(){Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);} 
$(document).ready(function() { reload(); }) 
</script> 

您可能感興趣的文章: