Node.js는 GridView 라디오 선택 효과를 구현하고 교대 행, 선택한 행 및 마우스 이동의 배경색을 자동으로 설정합니다.

백엔드 코드

코드 복사 코드는 다음과 같습니다.

/ // < ;summary>
/// 데이터 행 바인딩 이벤트
/// /// >/ //
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 < 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)
//컨트롤 범위에서 모든 입력 찾기
var objs = GridViewtableSearchList.getElementsByTagName("input")
//컨트롤 범위에서 모든 확인란을 찾아 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 = ""
}
}