확인란을 선택할 때 jqGrid 행을 강조 표시하는 방법은 무엇입니까?

체크박스가 True인 경우 행 강조 표시

소개:

웹 개발에서는 사용자에게 안내할 수 있는 시각적 신호를 제공하는 것이 바람직한 경우가 많습니다. 인터페이스. 중요한 정보를 강조하는 일반적인 방법 중 하나는 색상이나 그라데이션을 사용하여 특정 요소에 주의를 집중시키는 것입니다. 데이터 그리드에서 행은 체크박스를 사용하여 자주 선택되거나 수정됩니다. 사용자 경험을 향상시키려면 선택된 상태의 확인란이 있는 행을 강조 표시하는 것이 도움이 될 수 있습니다. 이 기사에서는 jQuery와 jqGrid 플러그인을 사용하여 이 효과를 얻는 방법을 살펴봅니다.

행 강조 구현:

체크박스 값을 기준으로 행을 강조 표시하려면 jqGrid 버전 4.3에 도입된 rowattr 콜백을 활용할 수 있습니다. .2. 이 콜백을 사용하면 그리드 채우기 중에 행 속성을 조작하여 특정 데이터를 기반으로 조건부 스타일을 지정할 수 있습니다.

다음 JavaScript 코드를 고려하세요.

rowattr: function (rd) {
  if (rd.GroupHeader === "1") { // Adjust condition as per your model
    return { "class": "myAltRowClass" };
  }
}

이 예에서는 GroupHeader 속성을 확인합니다. 행(rd), 값이 "1"인 경우 해당 행에 사용자 정의 CSS 클래스(myAltRowClass)를 할당합니다. 강조 표시된 행의 배경색을 변경하도록 이 CSS 클래스를 정의할 수 있습니다.

템플릿을 사용하여 코드 최적화:

코드를 간소화하려면 열 템플릿과 변수를 활용하여 공통 속성을 정의하고 행동. 다음 최적화를 고려하십시오.

cmTemplate: { align: 'center', sortable: false, editable: true, width: 80 },
myCheckboxTemplate = {
  formatter: 'checkbox',
  edittype: 'checkbox',
  type: 'select',
  editoptions: { value: "1:0" }
},
myTextareaTemplate = {
  edittype: "textarea",
  editoptions: { size: "30", maxlength: "30" }
};

colModel: [
  { name: 'TypeID', index: 'TypeID', width: 350, hidden: true, edittype: "select", ... },
  { name: 'Order1', index: 'Order1', template: myTextareaTemplate },
  { name: 'Order2', index: 'Order2', template: myTextareaTemplate },
  // ... Additional columns omitted for brevity
  { name: 'GroupHeader', index: 'GroupHeader', width: 100, template: myCheckboxTemplate },
  { name: 'IsGroup', index: 'IsGroup', template: myCheckboxTemplate }
],

템플릿과 변수를 활용하면 코드가 더욱 간결해지고 유지 관리가 쉬워집니다.

결론:

다음을 사용하여 확인란 값을 기반으로 행 강조 표시 통합 jqGrid의 rowattr 콜백은 사용자 경험을 향상시킬 뿐만 아니라 플러그인의 유연성과 효율성을 보여줍니다. 이 기술을 열 템플릿과 결합하면 특정 요구 사항을 충족하는 우아하고 구조화된 데이터 그리드를 만들 수 있습니다.

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