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 相关文章推荐
模拟用户操作Input元素,不会触发相应事件
May 11 Javascript
Prototype Function对象 学习
Jul 12 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
Jun 01 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
vue-quill-editor富文本编辑器简单使用方法
Sep 21 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 Javascript
微信小程序实现下拉加载更多商品
Dec 29 Javascript
javascript实现拼图游戏
Jan 29 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操作mysqli(示例代码)
2013/10/28 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
CentOS6.5 编译安装lnmp环境
2014/12/21 PHP
JavaScript中常见陷阱小结
2010/04/27 Javascript
jquery获取tr中控件值并操作tr实现思路
2013/03/27 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
jQuery中offset()方法用法实例
2015/01/16 Javascript
你所不了解的javascript操作DOM的细节知识点(一)
2015/06/17 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
nodeJs内存泄漏问题详解
2016/09/05 NodeJs
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
一个例子轻松学会Vue.js
2017/01/02 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
详解vue组件化开发-vuex状态管理库
2017/04/10 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
Bootstrap table使用方法汇总
2017/11/17 Javascript
vue项目实战总结篇
2018/02/11 Javascript
js实现html滑动图片拼图验证
2020/06/24 Javascript
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
Python 爬虫之Beautiful Soup模块使用指南
2018/07/05 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
Python装饰器实现方法及应用场景详解
2020/03/26 Python
Python基于paramunittest模块实现excl参数化
2020/04/26 Python
Python logging模块原理解析及应用
2020/08/13 Python
完美解决IE8下不兼容rgba()的问题
2017/03/31 HTML / CSS
英国领先的野生鸟类食品供应商:GardenBird
2018/08/09 全球购物
中学教师实习自我鉴定
2013/09/28 职场文书
日语专业推荐信
2013/11/12 职场文书
个人职业生涯规划书1500字
2013/12/31 职场文书
事业单位绩效考核实施方案
2014/03/27 职场文书
学习型班组申报材料
2014/05/31 职场文书
家庭困难证明
2014/10/12 职场文书
先进个人主要事迹怎么写
2015/11/04 职场文书