js实现GridView单选效果自动设置交替行、选中行、

标签:公司介绍    日期:2019-01-25 16:51    录入:美娱国际平台注册    浏览:

  

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

  后台代码  
代码如下:
  
///   
/// 数据行绑定事件  
///
  
///   
///   
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 = ""  
}  
}  

★★★小编:美娱国际 整理文章,欢迎大家转载 ★★★
上一篇:IE6图片加载的一个BUG解决方法
下一篇:没有了
相关文章阅读
点击右上角的分享按钮即可收藏美娱国际平台注册 随时随地与好友一起分享精彩内容噢
最近更新
热门排行