js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色_Javascript教程-查字典教程网
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
js实现GridView单选效果自动设置交替行、选中行、鼠标移动行背景色
发布时间:2016-12-30 来源:查字典编辑
摘要:后台代码复制代码代码如下://////数据行绑定事件/////////protectedvoidgvProduct_RowDataBound...

后台代码

复制代码 代码如下:

/// <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教程学习
    编程开发子分类