js は GridView ラジオ選択効果を実装し、交互の行、選択された行、およびマウスの動きの背景色を自動的に設定します。

バックエンド コード

コードをコピー コードは次のとおりです:

/ //

/// データ行バインディング イベント
///

// >/ //
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; 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 (例外例)
{
}
}

フロントエンド コード

コードをコピー コードは次のとおりです:

/***************************************************/

//機能: マウスが移動したときの行の色を設定します
//説明: onmouseout イベントのときに使用されます
//作成者: XXXXX
//日付: 2010 年 5 月 26 日
/***************************************************/
function gvUsers_onmouseout(listId, SelectRadioID, row) {
var SelectRadio = document.getElementById(SelectRadioID); >//コントロール スコープを検索します
var GridViewtableSearchList = document.getElementById(listId);
//コントロール スコープ内のすべての入力を検索します
var objs = GridViewtableSearchList.getElementsByTagName("input"); // コントロール スコープ内のすべてのチェックボックスを検索し、false になります
for (var i = 0; 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); //コントロール スコープ内のすべての入力を検索します
var objs = GridViewtableSearchList.getElementsByTagName("input");
//コントロール スコープ内のすべてのチェックボックスを検索し、それらを false に変更します
for (var i = 0) ; 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 = ""
}
}