[jqGrid] Show/Hide Columns 설명

 [ jqGrid 한글 API 문서 링크 ]

실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트


PS.

 아래의 Document 번역내용은 공식적으로 폐지된 기능이며, submit 버튼을 눌러도 알맹이 기능이 빠져버려 함수만 호출될 뿐 아무런 동작을 하지 않는다.
 - https://1004lucifer.blogspot.com/2019/06/jqgrid-upgrade-from-38x-to-400.html
 - https://semidex37.blog.me/120209824344
 afterSubmitForm 과 같은 이벤트함수를 구현하거나 신규 기능을 사용해야 한다.
 제일 하단의 예제 jsfiddle 확인바람.

Show/Hide Columns
1004lucifer
 - 사용자가 표시하거나 숨길 열을 선택할 수 있는 모달창을 표시한다.
 - src 디렉토리의 grid.setcolumns.js 파일이 로드 되어야 사용 가능하다.



호출 방법

 - 일반적으로 버튼에 클릭 이벤트를 추가할 수 있으며, navigator 에서 navButtonAdd 메소드를 사용하는 방법도 가능하다.

jQuery("#mybutton").click(function() {
   jQuery("#grid_id").setColumns(options);
   return false;
});

mybutton - 버튼 요소의 id (다른 유효한 HTML요소일 수 있다.)
grid_id - 생성된 그리드의 id
options - name:value 쌍의 배열이며, 아래의 옵션 참고

1004lucifer
이 방법은 언어파일에서 다음 옵션을 사용한다.

$.jgrid = {
...
 col : {
  caption: "Show/Hide Columns",
  bSubmit: "Submit",
  bCancel: "Cancel"
 },
...

Option	Description	Default
top	모달 대화상자 상단 위치의 초기값. 0값은 좌표가 그리드의 왼쪽 상단에 위치하며, jqModel 옵션이 false인경우 효과가 없다.	0
left	모달 대화상자 왼쪽 위치의 초기값. 0값은 좌표가 그리드의 왼쪽 상단에 위치하며, jqModel 옵션이 false인경우 효과가 없다.	0
width	모달 대화상자의 가로길이	200
height	모달 대화상자의 높이	auto
dataheight	이 파라메터는 콘텐츠의 스크롤을 제어한다. height 파라메터는 모달의 높이를 제어하고, dataheight 파라메터는 콘텐츠의 스크롤 높이를 제어하여 footer의 버튼을 볼수 있게한다.	auto
modal	모달모드의 대화상자를 설정한다. jqModal 옵션이 false인경우 효과가 없다.	false
drag	대화상자는 드래그가 가능하다. 이 작업을 하려면 jQuery UI에서 드래그 가능한 구성요소를 사용해야 할 때 jqDnR.js 플러그인을 포함해야 한다.	true
beforeShowForm	모달 대화상자를 표시하기전에 실행되는 함수 (form의 id가 파라메터로 전달된다)	null
afterShowForm	모달 대화상자를 표시한 후에 실행되는 함수 (form의 id가 파라메터로 전달된다)	null
afterSubmitForm	submit 버튼을 클릭한 후 실행되는 함수 (form의 id가 파라메터로 전달된다)	null
closeOnEscape	사용자가 ESC키를 누르면 모달을 닫을 수 있는지 여부를 결정	true
ShrinkToFit	true 설정 시 그리드의 가로길이에 따라 보여지는 컬럼의 사이즈가 리사이즈 된다.	false
jqModal	true 설정 시 모달 대화상자에 jqModal 플러그인을 사용하도록 한다.	false
colnameview	false 설정 시 colModal의 이름이 표시되지 않는다.	true
closeAfterSubmit	false 설정 시 사용자가 submit 버튼 클릭 시 대화상자가 닫히지 않는다.	true
onClose	(이 옵션이 활성화 된경우) 닫기아이콘/취소버튼/ESC키 누르면 이벤트가 발생한다. 이 함수는 true나 false를 반환할 수 있으며, false 반환 시 대화상자가 닫히지 않는다.	null
saveicon	[true,“left”,“ui-icon-disk”] 기본값을 가지는 배열요소이다. 이 항목은 submit 버튼에 대한 다양한 설정을 한다. 첫번째 항목 - 아이콘 활성화 여부 두번째 항목 - 아이콘 위치 (left | right) 세번째 항목 - UI테마 roller의 유효한 아이콘
closeicon	[true,“left”,“ui-icon-close”] 기본값을 가지는 배열요소이다. 이 항목은 닫기 버튼에 대한 다양한 설정을 한다. 첫번째 항목 - 아이콘 활성화 여부 두번째 항목 - 아이콘 위치 (left | right) 세번째 항목 - UI테마 roller의 유효한 아이콘
updateAfterCheck	true 설정 시 체크박스를 클릭 시 즉시 보여지거나 숨겨진다. 이 옵션을 선택하면 submit 버튼이 숨겨진다.	false
recreateForm	true 설정 시 대화상자가 colModel의 새 옵션(변경된경우)으로 활성화될 때마다 다시 생성된다.	false

 개발자가 모든 항목을 표시하길 원하지 않을 때 보이기/숨기기 방지를 위한 'colModel: hidedlg' (기본값 false) 옵션이 추가되었다. true 설정 시 컬럼이 모달 대화상자에 표시되지 않는다.

참고
 - http://www.trirand.com/jqgridwiki/doku.php?id=wiki:show_hide_columns