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

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

Susan Sarandon
Susan Sarandon원래의
2024-11-07 06:41:03571검색

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으로 문의하세요.