js實現(xiàn)GridView單選效果自動設置交替行、選中行、鼠標移動行背景色
更新時間:2010年05月27日 03:14:44 作者:
使用js實現(xiàn)GridView單選效果自動設置交替行、選中行、鼠標移動行背景色
后臺代碼
/// <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;
//當鼠標停留時更改背景色
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并都變?yōu)閒alse
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并都變?yōu)閒alse
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 = ""
}
}
復制代碼 代碼如下:
/// <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;
//當鼠標停留時更改背景色
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并都變?yōu)閒alse
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并都變?yōu)閒alse
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 選中文字并響應獲取的實現(xiàn)代碼
當鼠標選擇一段文字時,對這個事件產(chǎn)生響應,并且將選中的文字傳遞出去。2011-08-08
解決layui數(shù)據(jù)表格Date日期格式的回顯Object的問題
今天小編就為大家分享一篇解決layui數(shù)據(jù)表格Date日期格式的回顯Object的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
Ajax+FormData+javascript實現(xiàn)無刷新表單信息提交
在前端開發(fā)中ajax,formdata和js實現(xiàn)無刷新表單信息提交非常棒,接下來通過本文給大家介紹Ajax+FormData+javascript實現(xiàn)無刷新表單信息提交的相關資料,需要的朋友可以參考下2016-10-10

