Asp.net中如何實(shí)現(xiàn)GridView隔行變色和光棒效果

這篇文章主要介紹了Asp.net中如何實(shí)現(xiàn)GridView隔行變色和光棒效果，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

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

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

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

1.aspx.cs 后臺(tái)事件中設(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)移到某行時(shí)改變某行的背景
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor;");//鼠標(biāo)移走時(shí)恢復(fù)
}

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

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

<script src="jquery-1.5.2.min.js" type="text/javascript"></script>

復(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 時(shí)加入 "over" 樣式
.mouseout(function(){$(this).removeClass("over");}) //當(dāng) mouseout 時(shí)移除 "over" 樣式
.click(function(){$(this).toggleClass("tr_chouse");}) //當(dāng) click 加入或移除 "tr_chouse" 樣式，實(shí)現(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>

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Asp.net中如何實(shí)現(xiàn)GridView隔行變色和光棒效果”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!