Asp.net GridView隔行变色和光棒效果2种方法实现
更新时间:2021年9月22日 10:16 点击:1385
方法一:前台和后台配合使用
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>
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>
相关文章
- 这篇文章主要介绍了C#实现3步手动建DataGridView的方法,实例分析了C#实现手动创建DataGridView的原理与技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了C#中DataGridView动态添加行及添加列的方法,涉及C#中DataGridView针对行与列动态操作的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
C#中datagridview使用tooltip控件显示单元格内容的方法
这篇文章主要介绍了C#中datagridview使用tooltip控件显示单元格内容的方法,实例分析了C#控件的相关使用技巧,需要的朋友可以参考下...2020-06-25- 这篇文章主要介绍了C#中GridView动态添加列的实现方法,涉及C#中GridView的相关使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- 下面小编就为大家带来一篇浅析GridView中显示时间日期格式的问题。小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2021-09-22
- 这篇文章主要介绍了C#中DataGridView常用操作,以实例形式总结了DataGridView绑定下拉列表、设置默认值、判断复选框是否选中等技巧,具有一定参考借鉴价值,需要的朋友可以参考下...2020-06-25
- Gridview的链接和删除点击提示有利于提醒用户确认下操作是否正确,以免造成不必要的损失,感兴趣的朋友可以参考下,希望对你有所帮助...2021-09-22
- 这个例子的功能是c#读取excel文件,大家可以参考使用...2020-06-25
实现DataGridView控件中CheckBox列的使用实例
最近做WindowsForms程序,使用DataGridView控件时,加了一列做选择用,发现CheckBox不能选中。搜索后,要实现DataGridView的CellContentClick事件,将代码贴一下...2021-09-22- 这篇文章主要介绍了c#中datagridview处理非绑定列的方法,实例分析了C#中datagridview的使用技巧,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了C#中改变DataGridView控件边框颜色的方法,默认的DataGridView边框颜色很丑,本文用编程方法实现修改DataGridView边框颜色,需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了C#中DataGridView的样式设置方法,包括交替行颜色、单元格内容有效性检查、单元格的选择模式等,需要的朋友可以参考下...2020-06-25
在ASP.NET 2.0中操作数据之六十四:GridView批量添加数据
前面介绍了批量更新,批量删除数据,这篇文章主要介绍如何实现批量添加数据,当然为了保证数据的完整性,我们在做这些批量操作的时候,都使用了事务来实现。...2021-09-22.Net语言Smobiler开发利用Gridview控件设计较复杂的表单
这篇文章主要为大家详细介绍了.Net语言Smobiler开发利用Gridview控件设计较复杂的表单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-22- 这篇文章主要是关于GridView使用的学习总结,需要的朋友可以参考下...2021-09-22
DevExpress实现GridView当无数据行时提示消息
这篇文章主要介绍了DevExpress实现GridView当无数据行时提示消息,需要的朋友可以参考下...2020-06-25Asp.net简单代码设置GridView自适应列宽不变形实现思路与代码
动态绑定的GridView由于列数不固定,而列又太多(博主做的这个项目有150个左右的字段),这样设置GridView固定宽度就不能满足需求了...2021-09-22C# 实现dataGridView选中一行右键出现菜单的示例代码
这篇文章主要介绍了C# 实现dataGridView选中一行右键出现菜单,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-11-03GridView导出Excel常见的5种文本格式 <font color=red>原创</font>
本文主要介绍GridView导出Excel常见的文本格式,以帮助开发人员做导出的Excel时避免出现文本格式不一致的问题。...2021-09-22- confirm用户确认删除是一个很实用的功能,比如可以防止用户误操作删除等等,感兴趣的朋友可以了解下,希望本文对你有所帮助,就当巩固知识了...2021-09-22