快捷導(dǎo)航

js實(shí)現(xiàn)GridView單選效果自動設(shè)置交替行、選中行、鼠標(biāo)移動行背景色

更新時(shí)間：2010年05月27日 03:14:44 作者：

使用js實(shí)現(xiàn)GridView單選效果自動設(shè)置交替行、選中行、鼠標(biāo)移動行背景色

后臺代碼

 
/// <summary> 
/// 數(shù)據(jù)行綁定事件 
/// </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; 
//當(dāng)鼠標(biāo)停留時(shí)更改背景色 
row.Attributes.Add("onmouseover", "this.style.backgroundColor='#00A9FF'"); 
//當(dāng)鼠標(biāo)移開時(shí)還原背景色 
row.Attributes.Add("onmouseout", "gvProducts_onmouseout('" + gvProducts.ClientID + "','" + ckb.ClientID + "',this) "); 
//當(dāng)鼠標(biāo)移開時(shí)還原背景色 
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) 
{ 
} 
} 

前臺代碼

復(fù)制代碼代碼如下:

 
/****************************************************/ 
//功能：鼠標(biāo)移出時(shí)設(shè)置行顏色 
//說明：onmouseout事件時(shí)使用 
//作者：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并都變?yōu)閒alse 
for (var i = 0; i < objs.length; i++) { 
if (objs[i].type.toLowerCase() == "checkbox" && objs[i] == SelectRadio) { 
if (SelectRadio.checked) { 
//設(shè)置選中行的顏色 
row.style.backgroundColor = '#33A922' 
} 
else { 
//設(shè)置交替行的顏色 
if (i % 2 == 0) { 
row.style.backgroundColor = '#FFFFFF' 
} 
else { 
row.style.backgroundColor = '#F4FAFD' 
} 
} 
} 
} 
} 
/****************************************************/ 
//功能：鼠標(biāo)單擊時(shí)使用 
//說明：onmouseout事件時(shí)使用 
//作者：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并都變?yōu)閒alse 
for (var i = 0; i < objs.length; i++) { 
//設(shè)置除當(dāng)前選擇行外其它行的背景色 
if (objs[i].type.toLowerCase() == "checkbox" && objs[i] != SelectRadio) { 
objs[i].checked = false; 
//設(shè)置交替行的背景色 
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 
//設(shè)置當(dāng)前選擇行的背景色和返回選擇行的主鍵 
if (SelectRadio.checked) { 
row.style.backgroundColor = '#33A922' 
window.returnValue = rv; 
} 
else { 
window.returnValue = "" 
} 
} 