js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色


Posted in Javascript onMay 27, 2010

后台代码

/// <summary> 
/// 数据行绑定事件 
/// </summary> 
/// <param name="sender"></param> 
/// <param name="e"></param> 
protected void gvProduct_RowDataBound(object sender, GridViewRowEventArgs e) 
{ 
try 
{ 
if (e.Row.RowType == DataControlRowType.DataRow ) 
{ 
GridViewRow row = e.Row; 
CheckBox ckb = row.Cells[0].FindControl("ckb") as CheckBox; 
Label ProductID = row.Cells[0].FindControl("lblProductID") as Label; 
//当鼠标停留时更改背景色 
row.Attributes.Add("onmouseover", "this.style.backgroundColor='#00A9FF'"); 
//当鼠标移开时还原背景色 
row.Attributes.Add("onmouseout", "gvProducts_onmouseout('" + gvProducts.ClientID + "','" + ckb.ClientID + "',this) "); 
//当鼠标移开时还原背景色 
row.Attributes.Add("onclick", "SelectRadio('" + gvProducts.ClientID + "','" + ckb.ClientID + "','" + ProductID.Text + "',this) "); 
ckb.Attributes.Add("onclick", "SelectRadio('" + gvProducts.ClientID + "','" + ckb.ClientID + "','" + ProductID.Text + "',document.getElementById('" + row.ClientID + "')) "); 
} 
catch (Exception ex) 
{ 
} 
}

前台代码
/****************************************************/ 
//功能:鼠标移出时设置行颜色 
//说明:onmouseout事件时使用 
//作者:XXXXX 
//日期:2010年5月26日 
/****************************************************/ 
function gvUsers_onmouseout(listId, SelectRadioID, row) { 
var SelectRadio = document.getElementById(SelectRadioID); 
//找到控制范围 
var GridViewtableSearchList = document.getElementById(listId); 
//找到控制范围下所有input 
var objs = GridViewtableSearchList.getElementsByTagName("input"); 
//找到控制范围下所有checkbox并都变为false 
for (var i = 0; i < objs.length; i++) { 
if (objs[i].type.toLowerCase() == "checkbox" && objs[i] == SelectRadio) { 
if (SelectRadio.checked) { 
//设置选中行的颜色 
row.style.backgroundColor = '#33A922' 
} 
else { 
//设置交替行的颜色 
if (i % 2 == 0) { 
row.style.backgroundColor = '#FFFFFF' 
} 
else { 
row.style.backgroundColor = '#F4FAFD' 
} 
} 
} 
} 
} 
/****************************************************/ 
//功能:鼠标单击时使用 
//说明:onmouseout事件时使用 
//作者:XXXXXX 
//日期:2010年5月26日 
/****************************************************/ 
function SelectRadio(listId, SelectRadioID, rv, row) { 
var SelectRadio = document.getElementById(SelectRadioID); 
//找到控制范围 
var GridViewtableSearchList = document.getElementById(listId); 
//找到控制范围下所有input 
var objs = GridViewtableSearchList.getElementsByTagName("input"); 
//找到控制范围下所有checkbox并都变为false 
for (var i = 0; i < objs.length; i++) { 
//设置除当前选择行外其它行的背景色 
if (objs[i].type.toLowerCase() == "checkbox" && objs[i] != SelectRadio) { 
objs[i].checked = false; 
//设置交替行的背景色 
if (i % 2 == 0) { 
objs[i].parentElement.parentElement.style.backgroundColor = '#FFFFFF' 
} 
else { 
objs[i].parentElement.parentElement.style.backgroundColor = '#F4FAFD' 
} 
} 
} 
var SelectRadioSelectRadioID = SelectRadio.id; 
SelectRadio.checked = !SelectRadio.checked 
//设置当前选择行的背景色和返回选择行的主键 
if (SelectRadio.checked) { 
row.style.backgroundColor = '#33A922' 
window.returnValue = rv; 
} 
else { 
window.returnValue = "" 
} 
}
Javascript 相关文章推荐
jquery 学习笔记 传智博客佟老师附详细注释
Sep 12 Javascript
两个Javascript小tip资料
Nov 23 Javascript
JavaScript中获取样式的原生方法小结
Oct 08 Javascript
jQuery中大家不太了解的几个方法
Mar 04 Javascript
[原创]javascript typeof id==='string'?document.getElementById(id):id解释
Nov 02 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
JavaScript仿微信打飞机游戏
Jul 05 Javascript
详解原生js实现offset方法
Jun 15 Javascript
理解javascript async的用法
Aug 22 Javascript
vue中实现滚动加载更多的示例
Nov 08 Javascript
VUE-Table上绑定Input通过render实现双向绑定数据的示例
Aug 27 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
Javascript 设计模式(二) 闭包
May 26 #Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
May 26 #Javascript
js escape,unescape解决中文乱码问题的方法
May 26 #Javascript
javascript 异步页面查询实现代码(asp.net)
May 26 #Javascript
js 点击按钮弹出另一页,选择值后,返回到当前页
May 26 #Javascript
jquery的$(document).ready()和onload的加载顺序
May 26 #Javascript
网页前台通过js非法字符过滤代码(骂人的话等等)
May 26 #Javascript
You might like
PHP实现获取FLV文件的时间
2015/02/10 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
PHP常见的几种攻击方式实例小结
2019/04/29 PHP
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
2010/03/07 Javascript
jQuery实现统计输入文字个数的方法
2015/03/11 Javascript
javascript实现Table排序的方法
2015/05/15 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
小程序云开发获取不到数据库记录的解决方法
2019/05/18 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
2019/12/26 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[07:40]DOTA2每周TOP10 精彩击杀集锦vol.4
2014/06/25 DOTA
[01:12]快闪回顾DOTA2亚洲邀请赛(DAC) 静候2018新征程开启
2018/03/11 DOTA
Linux下Python获取IP地址的代码
2014/11/30 Python
python去掉空白行的多种实现代码
2018/03/19 Python
详解python selenium 爬取网易云音乐歌单名
2019/03/28 Python
Python利用scapy实现ARP欺骗的方法
2019/07/23 Python
python脚本之一键移动自定格式文件方法实例
2019/09/02 Python
Django项目创建到启动详解(最全最详细)
2019/09/07 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
详解Windows下PyCharm安装Numpy包及无法安装问题解决方案
2020/06/18 Python
python爬虫中抓取指数的实例讲解
2020/12/01 Python
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
HTML5 Canvas的性能提高技巧经验分享
2013/07/02 HTML / CSS
Jo Malone美国官网:祖玛珑香水
2017/03/27 全球购物
全球最大运动品牌的男装、女装和童装官方库存商:A&A Sports
2021/01/17 全球购物
社区敬老月活动实施方案
2014/02/17 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
2014大学生学生会工作总结
2014/12/19 职场文书
2015年销售工作总结范文
2015/03/30 职场文书
装饰技术负责人岗位职责
2015/04/13 职场文书
python异常中else的实例用法
2021/06/15 Python