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 缩图函数 (onDOMLoaded)……
Oct 23 Javascript
JS request函数 用来获取url参数
May 17 Javascript
zTree插件之多选下拉菜单实例代码
Nov 06 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
jQuery实现弹出带遮罩层的居中浮动窗口效果
Sep 12 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
echarts统计x轴区间的数值实例代码详解
Jul 07 Javascript
js实现烟花特效
Mar 02 Javascript
vue中的使用token的方法示例
Mar 10 Javascript
在vue中使用el-tab-pane v-show/v-if无效的解决
Aug 03 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查询域名状态whois的类
2006/11/25 PHP
php 购物车的例子
2009/05/04 PHP
php中计算未知长度的字符串哪个字符出现的次数最多的代码
2012/08/14 PHP
探讨php define()函数及defined()函数使用详解
2013/06/09 PHP
浅谈PHP正则中的捕获组与非捕获组
2016/07/18 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
php实现的三个常用加密解密功能函数示例
2017/11/06 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
TP5框架简单登录功能实现方法示例
2019/10/31 PHP
js函数的延迟加载实现代码
2012/10/11 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
动态加载dtree.js树treeview(示例代码)
2013/12/17 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
浅谈mint-ui 填坑之路
2017/11/06 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
nodejs log4js 使用详解
2019/05/31 NodeJs
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
使用Python对IP进行转换的一些操作技巧小结
2015/11/09 Python
JPype实现在python中调用JAVA的实例
2017/07/19 Python
python抓取文件夹的所有文件
2018/02/27 Python
python版百度语音识别功能
2019/07/09 Python
pyqt5数据库使用详细教程(打包解决方案)
2020/03/25 Python
Python常用数据分析模块原理解析
2020/07/20 Python
Django框架安装及项目创建过程解析
2020/09/14 Python
四风问题自查报告剖析材料
2014/02/08 职场文书
晚归检讨书
2014/02/19 职场文书
中药学专业求职信
2014/05/31 职场文书
小学先进集体事迹材料
2014/05/31 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
2015年副班长工作总结
2015/05/15 职场文书
一个家长教育孩子的心得体会
2016/01/15 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
python实现双链表
2022/05/25 Python