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 相关文章推荐
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
js获取指定日期前后的日期代码
Aug 20 Javascript
jquery mobile changepage的三种传参方法介绍
Sep 13 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
jQuery实现批量判断表单中文本框非空的方法(2种方法)
Dec 09 Javascript
基于jquery实现智能提示控件intellSeach.js
Mar 17 Javascript
简单实现js倒计时功能
Feb 13 Javascript
react实现pure render时bind(this)隐患需注意!
Mar 09 Javascript
详解Vue生命周期的示例
Mar 10 Javascript
javascript基于定时器实现进度条功能实例
Oct 13 Javascript
jQuery+CSS实现的table表格行列转置功能示例
Jan 08 jQuery
layui 表单标签的校验方法
Sep 04 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
最小化数据传输――在客户端存储数据
2006/10/09 PHP
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
PHP开发中常用的字符串操作函数
2011/02/08 PHP
几种有用的变型 PHP中循环语句的用法介绍
2012/01/30 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
php实现的验证码文件类实例
2015/06/18 PHP
PHP中的函数声明与使用详解
2017/05/27 PHP
JavaScript 函数式编程的原理
2009/10/16 Javascript
js window.onload 加载多个函数的方法
2009/11/02 Javascript
尝试在让script的type属性等于text/html
2013/01/15 Javascript
JS防止用户多次提交的简单代码
2013/08/01 Javascript
jquery中animate动画积累的解决方法
2013/10/05 Javascript
jquery获取一组checkbox的值(实例代码)
2013/11/04 Javascript
一个简单的全屏图片上下打开显示网页效果示例
2014/07/08 Javascript
Jquery响应回车键直接提交表单操作代码
2014/07/25 Javascript
JavaScript学习笔记之JS函数
2015/01/22 Javascript
Angular2表单自定义验证器的实现
2016/10/19 Javascript
AngularJS全局scope与Isolate scope通信用法示例
2016/11/22 Javascript
js 文字超出长度用省略号代替,鼠标悬停并以悬浮框显示实例
2016/12/06 Javascript
微信小程序开发中的疑问解答汇总
2017/07/03 Javascript
详解最新vue-cli 2.9.1的webpack存在问题
2017/12/16 Javascript
微信小程序点餐系统开发常见问题汇总
2019/08/06 Javascript
在Python上基于Markov链生成伪随机文本的教程
2015/04/17 Python
Python实现将数据框数据写入mongodb及mysql数据库的方法
2018/04/02 Python
提升Python程序性能的7个习惯
2019/04/14 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
详解css3使用transform出现字体模糊的解决办法
2020/10/16 HTML / CSS
TCP/IP的分层模型
2013/10/27 面试题
什么是设计模式
2012/06/17 面试题
助人为乐表扬信范文
2014/01/14 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
珍惜水资源建议书
2014/03/12 职场文书
知识竞赛拉拉队口号
2014/06/16 职场文书
2014年督导工作总结
2014/11/19 职场文书
2016年社区中秋节活动总结
2016/04/05 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python