2010-11-29 3 views
7

jquery-ui 'smoothness'테마를 사용하여 jqgrid를 사용하고 있습니다. 불행히도이 테마에서는 선택한 행 배경색이 너무 밝아서 배경색을 변경하여 표시가 더 잘 보이도록 변경하려고합니다. 나는 CSS에서 ui-state-highlight를 변경하려고 시도했다 (중요한 오버라이드와 함께) 그러나 이것은 작동하지 않는다. 이 작업을 수행하는 CSS 방법이 있습니까? 아니면 jqgrid 사용자 정의 포매터를 사용할까요?선택한 행 배경색

답변

16

클래스 ui-state-highlightbackground CSS 속성을 사용합니다. 따라서 작은 트릭은 background-color 대신 background을 사용하여 배경 이미지를 제거하는 것입니다. 예 :

.ui-state-highlight { background: yellow !important; } 

라이브보기 here.

업데이트 : !important을 사용할 필요가 없습니다. 그것은

에서,

.ui-jqgrid-btable .ui-state-highlight { background: yellow; } 

또는

.ui-jqgrid .ui-state-highlight { background: yellow; } 
+1

고마워, 그게 내가 정확히 찾고 있었던거야! – Jeff

0

우리가 하나 개의 선택된 행의 셀의 색상과 나머지 행 세포를 가진 다른 색상을 원하는 경우 가정 같은 더 구체적인 규칙을 지정 충분 아래의 예제 강조 표시 된 행 셀 데이터는 노란색으로 표시되고 나머지 행은 셀 데이터가 파란색으로 표시됩니다.

파란색 배경에 대해 이름이 "holdRow"이고 노란색 배경에 "HighlightHoldRow"라는 이름의 클래스가있는 경우 다음 코드를 사용하여 행 선택 중에 호출되는 메소드는 "RowSelect"입니다.

다음 코드를 고려하십시오

.holdRow td { 
font-weight : bold !important; 
color: Blue !important; 
    } 

    .higLightholdRow td { 
font-weight : bold !important; 
color: Yellow !important; 

}

var LastRowId = ""; 
    function RowSelect(id) { 
if (Flag == "TRUE") { 
    var grid = $('#gvName); 
    if (LastRowId != "" && LastRowId != undefined && LastRowId != id) { 
     tr = grid[0].rows.namedItem(LastRowId); 
     $(tr).removeClass("higLightholdRow"); 
     $(tr).addClass("holdRow"); 
     LastRowId = ""; 
    } 
    tr = grid[0].rows.namedItem(id); 
    $(tr).removeClass("holdRow"); 
    $(tr).addClass("higLightholdRow"); 
    LastRowId = id; 
    } 

} Trirand 그리드 선언 동안

우리는 F를 사용하여이 클라이언트 측 이벤트를 호출 할 수 있습니다 ollowing loc.

ClientSideEvents-RowSelect="RowSelect" 

RowSelect 방법은 행의 선택시에 불려가 선택한 행 배경으로 노란색을하고 나머지 행 배경으로 파란색이있을 것이다

0
jQuery('#jqGrid').find('.ui-state-highlight').css('background', 'skyblue'); 

당신은이 같은 추가 할 수 있습니다 귀하의 jquery 파일

관련 문제