> 웹 프론트엔드 > JS 튜토리얼 > 확인란 값을 기반으로 jqGrid에서 행을 강조 표시하는 방법은 무엇입니까?

확인란 값을 기반으로 jqGrid에서 행을 강조 표시하는 방법은 무엇입니까?

Susan Sarandon
풀어 주다: 2024-11-07 06:41:03
원래의
627명이 탐색했습니다.

How to Highlight Rows in jqGrid Based on Checkbox Value?

체크박스 값을 기준으로 행 강조 표시

jqGrid에서는 특정 체크박스가 true인 행을 강조 표시하여 특정할 때 시각적 피드백을 제공할 수 있습니다. 조건이 충족됩니다. 이는 콜백 및 CSS 스타일링을 통해 달성할 수 있습니다.

구현:

  1. Rowattr 콜백: rowattr 콜백을 활용하여 사용자 정의 속성 설정 행에. 귀하의 경우 강조 표시된 행에 대한 CSS 클래스를 정의할 수 있습니다.
rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // assuming your checkbox column is named "GroupHeader"
        return {"class": "myAltRowClass"};
    }
}
로그인 후 복사
  1. CSS 스타일링: 강조 표시된 행의 모양을 제어하는 ​​CSS 클래스를 정의하세요. 예를 들어 다음을 사용할 수 있습니다.
.myAltRowClass {
    background-color: #ffff00;
}
로그인 후 복사

대체 솔루션:

rowattr 콜백 외에도 jqGrid 버전 4.3.2는 다음을 제공합니다. 성능을 향상시키고 행을 더욱 깔끔하게 강조할 수 있는 방법을 제공하는 그리드뷰라는 새로운 기능.

gridview: true,
rowattr: function (rd) {
    if (rd.GroupHeader === "1") { // assuming your checkbox column is named "GroupHeader"
        return {"class": "myAltRowClass"};
    }
}
로그인 후 복사

열 템플릿:

코드를 간소화하려면 열 템플릿 사용을 고려하세요. 여러 열에 대한 공통 속성을 정의합니다. 이렇게 하면 열 정의가 단순화되고 유지 관리가 더 쉬워집니다.

cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},
...
colModel: [
    {name: 'TypeID', ...},
    {name: 'Order1', template: myTextareaTemplate},
    // ...
]
로그인 후 복사

예:

#maingrid").jqGrid({
    rowattr: function (rd) {
        if (rd.GroupHeader === "1") { // assuming your checkbox column is named "GroupHeader"
            return {"class": "myAltRowClass"};
        }
    },
    cmTemplate: {align: 'center', sortable: false, editable: true, width: 80},
    colModel: [
        {name: 'TypeID', ...},
        {name: 'Order1', template: myTextareaTemplate},
        // ...
    ]
});
로그인 후 복사

위 내용은 확인란 값을 기반으로 jqGrid에서 행을 강조 표시하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿