Asp.net GridView隔行变色和光棒效果2种方法实现

发布时间:2022-04-16 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了Asp.net GridView隔行变色和光棒效果2种方法实现脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
方法一:前台和后台配合使用
1.aspx 隔行变色属性(<AlternatingRowStyle BackColor="#f5f5f5" />)
复制代码 代码如下:

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

1.aspx.cs 后台事件中设置鼠标至于某行上的变色效果
复制代码 代码如下:

protected void gvProjectList_RowCreated(object sender, GridViewRowEventargs e)
{
e.Row.Attributes.Add("onmouseover", "currentcolor=this.style.backgroundColor;this.style.backgroundColor='#eaeaea';");//这是鼠标移到某行时改变某行的背景
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=currentcolor;");//鼠标移走时恢复
}

方法二:jquery方式
1.aspx
首先引用 jQuery 函数库,在http://jquery.COM/ 下载,然后写css样式,再加入js代码。
复制代码 代码如下:

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

复制代码 代码如下:

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

复制代码 代码如下:

<script type="text/javascript">
$(document).ready(function(){
$(".gridview tr:odd").addClass("odd"); //奇数行设定为 "odd" 样式
$(".gridview tr:even").addClass("even"); //偶数行设定为 "even" 样式
$(".gridview tr").mouseover(function(){$(this).addClass("over");}) //当 mouseover 时加入 "over" 样式
.mouseout(function(){$(this).removeClass("over");}) //当 mouseout 时移除 "over" 样式
.click(function(){$(this).toggleClass("tr_chouse");}) //当 click 加入或移除 "tr_chouse" 样式,实现数据列选取
});
</script>

2013年2月18日 13:57:30更新
复制代码 代码如下:

<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>

脚本宝典总结

以上是脚本宝典为你收集整理的Asp.net GridView隔行变色和光棒效果2种方法实现全部内容,希望文章能够帮你解决Asp.net GridView隔行变色和光棒效果2种方法实现所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。