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

jqGrid에서 체크박스 상태를 기반으로 행 강조 표시

jqGrid로 작업할 때 다음을 기반으로 행을 강조 표시하려는 시나리오가 발생할 수 있습니다. 체크박스의 상태. 이 기능은 선택한 행을 명확하고 시각적으로 표현할 수 있습니다.

구현:

jQuery UI ThemeRoller

더 간단해졌습니다. 접근 방식은 jQuery UI ThemeRoller를 활용하여 체크박스 셀의 스타일을 지정하는 것입니다. 이 방법에는 선택된 상태에 따라 셀의 모양을 사용자 정의하는 작업이 포함됩니다. 코드에 다음 CSS를 추가하면 이를 달성할 수 있습니다.

.ui-jqgrid .ui-sgfcb .ui-state-checked {
  background-color: #ffff99;
}

맞춤 스타일 지정

보다 맞춤화된 접근 방식을 선호하는 경우 자신만의 스타일을 구현할 수 있습니다. rowattr 콜백을 사용합니다. 이 콜백을 사용하면 각 그리드 행에 대한 사용자 정의 속성을 정의할 수 있으므로 체크박스 값에 따라 행의 모양을 동적으로 수정할 수 있습니다. 샘플 구현은 다음과 같습니다.

rowattr: function (rd) {
  if (rd.GroupHeader === "1") {
    return {"class": "highlighted-row"};
  }
}

이 경우 강조 표시된 행 클래스에는 강조 표시된 행에 대한 사용자 정의 스타일이 포함됩니다.

기타 고려 사항:

• 다음 경우 예기치 않은 동작을 방지하기 위해 확인란 열을 정렬할 수 없는지 확인하세요. 정렬.
• 데이터를 기반으로 개별 셀의 모양을 추가로 사용자 정의하려면 셀 클래스를 사용하는 것이 좋습니다.
• 강조 표시된 셀은 시각적으로 눈에 띄기 때문에 그리드를 탐색할 때 사용자 경험이 향상됩니다.

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