js實(shí)現(xiàn)GridView單選效果自動(dòng)設(shè)置交替行、選中行、鼠標(biāo)移動(dòng)行背景色
/// <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)移開(kāi)時(shí)還原背景色
row.Attributes.Add("onmouseout", "gvProducts_onmouseout('" + gvProducts.ClientID + "','" + ckb.ClientID + "',this) ");
//當(dāng)鼠標(biāo)移開(kāi)時(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)
{
}
}
前臺(tái)代碼
/****************************************************/
//功能:鼠標(biāo)移出時(shí)設(shè)置行顏色
//說(shuō)明: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í)使用
//說(shuō)明: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 = ""
}
}
- Android利用GridView實(shí)現(xiàn)單選功能
- asp.net GridView中使用RadioButton單選按鈕的方法
- ASP.NET GridView中加入RadioButton不能單選的解決方案
- gridview中實(shí)現(xiàn)radiobutton的單選示例
- DataGridView中CheckBox實(shí)現(xiàn)某一列單選
- Gridview使用CheckBox全選與單選采用js實(shí)現(xiàn)同時(shí)高亮顯示選擇行
- asp.net 擴(kuò)展GridView 增加單選按鈕列的代碼
- Android利用GridView實(shí)現(xiàn)單選效果
相關(guān)文章
js取兩個(gè)數(shù)組的交集|差集|并集|補(bǔ)集|去重示例代碼
求兩個(gè)集合的補(bǔ)集、交集、差集、并集等等在實(shí)際應(yīng)用中經(jīng)常會(huì)使用到,下面與大家分享下具體的實(shí)現(xiàn)代碼,感興趣的朋友可以參考下,希望對(duì)大家有所幫助2013-08-08javascript實(shí)現(xiàn)繼承的簡(jiǎn)單實(shí)例
這篇文章主要介紹了javascript實(shí)現(xiàn)繼承的簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2015-07-07ElementPlus?Tag標(biāo)簽用法小結(jié)
這篇文章主要介紹了ElementPlus?Tag標(biāo)簽用法,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09JS如何將當(dāng)前日期或指定日期轉(zhuǎn)時(shí)間戳
這篇文章主要介紹了js將當(dāng)前日期或指定日期轉(zhuǎn)時(shí)間戳超詳細(xì),通過(guò)實(shí)例代碼介紹了JS時(shí)間戳轉(zhuǎn)換方式,需要的朋友可以參考下2023-05-05JavaScript實(shí)現(xiàn)日期格式化詳細(xì)實(shí)例
這篇文章主要給大家介紹了關(guān)于JavaScript實(shí)現(xiàn)日期格式化的相關(guān)資料,JavaScript中的日期對(duì)象提供了許多方法和屬性,可以通過(guò)它們來(lái)進(jìn)行日期的格式化,需要的朋友可以參考下2023-09-09Javascript與vbscript數(shù)據(jù)共享
Javascript與vbscript數(shù)據(jù)共享...2007-01-01兼容IE和Firefox的javascript獲取iframe文檔內(nèi)容的函數(shù)
兼容IE和Firefox的javascript獲取iframe文檔內(nèi)容的函數(shù),需要的朋友可以參考下。2011-08-08使用ionic(選項(xiàng)卡欄tab) icon(圖標(biāo)) ionic上拉菜單(ActionSheet) 實(shí)現(xiàn)通訊錄界面切換實(shí)例
這篇文章主要介紹了使用ionic(選項(xiàng)卡欄tab) icon(圖標(biāo)) ionic上拉菜單(ActionSheet) 實(shí)現(xiàn)通訊錄界面切換實(shí)例代碼,需要的朋友可以參考下2017-10-10