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

时间:2021-05-26

后台代码
复制代码 代码如下:
/// <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 = ""
}
}

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章