스트럿츠 2 jquery 그리드 플러그인은 단 하나의 열 헤더 스타일 만 변경합니다.

Question

그리드에서 들리는 하나의 열 스타일 만 변경할 수 있습니까?

sjg:gridColumn에는 cssClass 속성이 있지만이 설정은 열 머리글이 아닌 열 아래 행에만 적용됩니다. HTML 페이지에

:

는 JQGRID - Is it possible to change the background color of HTML header text in JavaScript?에 나는 같은 코드를 얻었다. 당신은 하나 개의 컬럼에 대한 변경을 원하는 경우에만 당신이 이때 setLabel 방법을 사용할 수 있습니다

$("#myGrid").jqGrid('setLabel','Price', '', {'background':'red'});

또는

$("#myGrid").jqGrid('setLabel','Price', '', 'myColorClass');

하지만 그것은 일을 만들 수 없습니다. 열 헤더는 고유 한 ID를해야합니다으로

마지막으로, 나는 아래에 사용할 수 있습니다

document.getElementById("gridtable_sampleColumn").style.backgroundColor = "#FF0000"; 

그럼 어떻게 당신은 더 좋은 방법이 생각합니다.

<sjg:gridColumn name="sampleColumn" 
      cssClass="makeThisSmall" /> 

을 그리고 내 CSS 작업 만 변경하지 않은

.makeThisSmall{ 
    font-size : smaller; 
} 

의 행 열 헤더를 CSS하지 :이 같은 어떤 것을 찾고 있었다.

또한 gridColumn은 formatoptions입니다. 내가 찾고있는 것을 할 수 있습니다.

Answer 1

특정 열에 대해 열 머리글의 스타일/클래스를 설정하는 선언적 방법이 없습니다 (ID 또는 열 이름이 명시 적으로 설정된 CSS 규칙의 정의 제외). 따라서 setLabel을 설정해야합니다.

배경색을 변경해야 할 경우 background-image도 none으로 설정해야한다는 점을 고려해야합니다. 또한 기타 CSS 규칙이 적용되고 규칙이 적용된다는 것을 잊지 말아야합니다. CSS 선택기가 이깁니다. 예를 들어 열 헤더에서 font-size는 ui.jqgrid.css로 인해 다음과 같은 규칙을 적용한다 : 룰에 두 클래스이

.ui-jqgrid .ui-jqgrid-view { 
    font-size: 11px 
} 

. 당신은 makeThisSmall 클래스는 다음는 CSS 적어도 너무 복잡하거나 더 복잡한해야 어떤 방법으로

.ui-jqgrid .ui-jqgrid-view .makeThisSmall { 
    font-size: 8px 
} 

또는

.ui-jqgrid-view .makeThisSmall { 
    font-size: 8px 
} 

같은 CSS 규칙을 정의해야합니다 가진 열에 대한 값을 변경하려면 겹쳐 쓰려는 규칙같은 식으로 background에서

때문에 두 개의 클래스가 포함되어 CSS 규칙의 적용이 너무 그래서

.ui-widget-content .ui-state-default { 
    background: ... 
} 

당신을 통해 그것을 ovewrite 할 수도 해당 깊이 (또는 깊이) CSS의 역할을 정의해야합니다 class 속성