[jqGrid] 다중 선택(multiselect) 적용하기 (ft. 기능 on/off)

- 다중 선택 기능 적용하고 기능 on/off 시키기 -

jqGrid를 옵션을 통해 multiselect(다중 선택) 기능을 적용시켜 보자.

[JavaScript] jqGrid 다양한 옵션 및 사용법 모음 (colmodel, option, event, methods)

- jqGrid 다양한 옵션 모음 - 옵션에 대해 알아보기 이전에 일단 아래와 같은 기본 구조를 가지고 시작한다 치고 진행 하도록 한다. ▷ 기본 구조 var searchResultColNames = ['게시글관리번호', '번호', '제

mine-it-record.tistory.com

위 게시글을 들어가보면 알겠지만 기본적으로 제공해주는 옵션이 존재하는데 그게 multiselect이다.

하나하나 알아가 보도록 하자.

$('#data-grid').jqGrid({
  ...,
  multiselect : true, // 그리드 왼쪽부분에 체크 박스가 생겨 다중선택이 가능해진다.
  multiboxonly : false, // 다중선택을 단일 선택으로 제한
  ...
});

우선 jqgrid option을 설정해 줄때 multiselect 옵션을 true로 설정해준다.

여기서 보면 multiboxonly 를 설정해 주었는데, 이는 굳이 설정해주지않아도 기본적으로 false로 잡혀있으니 상관안해도 되나 이 옵션은 multiselect 기능을 on/off 시켜줄때 아주 큰 역할을 한다.

▷ 옵션 적용 결과

결과를 보면 알겠지만 그리드 좌측에 체크박스가 생성된다.

다중 선택한 row 데이터를 가져오는 방법은 아래 게시글을 참고하자.

[JavaScript] jqGrid 사용하기 3 - 선택한 row의 id 및 값(RowData) 가져오기 (feat. selrow, selarrrow, getRowData)

- 선택한 row의 id 및 데이터 가져오기 - jqGrid를 사용한다면 선택한 row의 id나 데이터를 가져와야만 하는 경우가 생기는데 어떻게 하는지 알아보자. 사실 가장 간단한 방법은 jqGrid event option을 설정

mine-it-record.tistory.com

사실상 multiselect 옵션을 끄는건 불가능하다.

그렇지만 이는 여러가지 옵션을 통해 없는 기능처럼 만들어 버릴수가 있다.

우선 첫번째로 multiboxonly 옵션을 실행시켜줄것인데 이는 jqGrid 메서드를 통해 제어가 가능하다.

$('#data-grid').jqGrid('setGridParam',{multiboxonly : true});

multiboxonly 옵션은 저 1번 설명글의 결과 이미지처럼 좌측에 나오는 체크박스를 하나밖에 선택할 수 없게 만들어주는 옵션이다. 다중 선택 기능때문에 체크박스가 생겼지만 이 옵션이 true라면 하나씩만 선택이 가능하다.

이제 두번째로는 체크박스 컬럼을 눈에서 지워주는 것이다. multiselect 기능으로 인해 생겨났으니 일단 눈에서 지워주자.

$('#data-grid').jqGrid('hideCol', 'cb');

자세한건 아래 게시글을 참조하자.

[JavaScript] jqGrid - 특정 컬럼 보여주고(show)/ 숨겨주기(hide)

- 특정 컬럼 숨기고 보이기 - jqGrid 표준 메서드를 사용하여 특정 컬럼을 보여주고 숨겨주는 방법에 대해 알아보자. ▷ 예제를 위한 그리드 테이블 ▷ 특정 컬럼 숨기기 (hideCol) $('#data-grid').jqGrid('h

mine-it-record.tistory.com

첫번째와 두번째 방법을 같이 실행하면 이는 multiselect 기능이 없는것과 동일하게 사용이 가능하다.

(기능을 on/off 시키고싶었지만 multiselect자체를 setGridParam으로 true/false시킬수가 없어서 찾다찾다 발견할 수가 없어서 위 방법들을 사용해서 on/off 처럼 구현해놨다.)