기록하자

jqGrid 무료 버전을 사용하여 체크박스를 구현하는 방법에 대해서 알아보자.

회사에서 jqGrid에서 그리드 셀에 체크박스를 구현하여야 했다. (로우의 맨 앞에 로우선택의 체크박스가 아니다.)

DB에서 조회해온 값이 true, false냐에 따라서 체크, 미체크로 보여주어야 했다.

체크박스 템플릿을 만들어서 써도 되지만, jqGrid 무료 버전에서는 booleanCheckbox 라는 체크박스 속성을 제공해준다.

샘플 경로 ↓

https://free-jqgrid.github.io/getting-started/index.html

링크된 데모 사이트에서 스크롤을 중간까지 내리다 보면, 예제 소스가 있다. 

... 생략

  { name: "closed", label: "Closed", width: 59, template: "booleanCheckbox", firstsortorder: "desc" },

... 생략

위 이미지의 Closed 필드가 바로 체크박스로 표현한 것이다. template: "booleanCheckbox" 라고 적어주기만 하면 된다.

data는 true 또는 false 로 주면 된다.

그런데 한가지 문제가 있다.

데모 사이트의 예제는 readonly만 가능했다. 본인은 직접 마우스로 클릭해서 체크된 값을 변경하고(혹은 행추가를 해서) 다시 DB에 변경된 데이터를 저장하고 싶었던 것이다.

그래서 cellEdit 속성도 true로 주었다.

그런데 마우스로 체크박스를 클릭할 때랑, 체크박스가 영역이 아닌 해당 셀의 영역을 클릭할 때 서로 다르게 인식을 하는 것이다.

jqGrid 자체가 해당 로우(셀)을 클릭할 때 클릭한 셀이 editable이 되는 것이다.

즉, 위 그림에서 파란색 영역과 빨간색(체크박스) 영역은 같은 셀이지만, 파란색 영역을 클릭하면 해당 셀(체크박스 포함)이 활성화가 된다. 바로 체크박스를 클릭하면 체크박스가 활성화가 된 상태가 아니므로 상태값이 바뀌지가 않는다.

그리고 또 해당 셀의 포커스를 벗어나면 다시금 비활성화가 되는 상황이 벌어진다. jqGrid 라이브러리를 전부 뜯어보지 않는이상 알 수 없는 상황이기는 한데...

jqGrid.js 라이브러리 부분에서 checkbox 클래스 부분에 disabled 처리하는 부분을 제거했더니, 위와 같은 고민에 대해서 해결할 수 있었다. 물론, 이로 인한 다른 문제가 발생할 수도 있지만 현재 실무에서는 큰 문제는 발견되지 않았다.

체크박스가 원치 않게 비활성화가 되는 본인 같은 문제가 발생하는 경우 임시로 해결할 수 있는 방법인 듯 하다. 아니면 내가 jqGrid 체크박스 사용법을 이해를 못하는 건지도 모른다.

jqGrid 4.15.6-pre - free version 기준...

jquery.jqgrid.src.js 파일의 20167 라인에서 disabled 주는 부분을 주석처리했더니, 포커스가 벗어나도 해당 셀이(체크박스가) 비활성화가 되는 상황이 해결되었다.

} else {
        checkedClasses = "";
    //	title += disabled === true ? " disabled='disabled'" : ""; // 이 부분을 주석처리함
        checked = "<input type='checkbox' checked='checked'" + title + " />";
        unchecked = "<input type='checkbox'" + title + " />";
 }

jqGrid 넘 헷갈린다. 2014년 12월부터 유료화가 되면서, 사실상 지원을 받기도 힘들고, 지금 있는 곳에서는 무료 버전을 사용해야 하고.. 기존 레거시 플젝에서 사용하던가라 내 맘대로 변경도 못하고( 차라리 dataTables 가 더 낫지 않나 싶기도 한다. )

참고로 무료버전은 2014년 12월 이전 마지막 무료버전에서 무료 사용자들이 버그,기능 개선을 하면서 따로 관리해온 버전으로 알고 있다.

샘플 소스는 첨부파일로''