실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트
jqGrid 에서 많이 사용될 옵션을 정리해 보았다.
하단에 전체 옵션(API)이 정리되어 있다. (Ctrl+F를 눌러 옵션을 검색하면 된다.)
1004lucifer
| Property | Type | Description |
|---|---|---|
| url | string | 그리드를 채우는데 필요한 데이터를 반환하는 URL ex) /jqGridModel?model=Wine |
| mtype | string | 요청 메소드 정의 ex) "POST" or "GET" |
| autoencode | boolean | 서버에서 가져온 데이터 인코딩 여부 ex) '<' 표시는 '<' 로 치환이 됨 |
| datatype | string | 그리드를 채우는 데이터 형식 - xml, xmlstring - json, jsonstring, - local (array data) - javascript (javascript data) - function (retrieving data) |
| colNames | array | 그리드 Header에 보여질 텍스트 (colModel 배열의 요소갯수와 같아야 한다.) |
| colModel | array | 그리드 Body에 보여질 데이터의 속성(매개변수) 지정 |
| pager | mixed | 페이징 Element 지정 ex) <div id="page"></div> - '#page' 또는 jQuery('#page') |
| rowNum | integer | 한페이지에 보여질 데이터(레코드) 갯수 |
| rowList | array[] | 표시되는 행의 수 변경 옵션 ex) [10, 20, 30] |
| sortname | string | 데이터가 처음 로드될 때 정렬되는 열 이름 |
| sortorder | string | 데이터 로드시 정렬 순서 ex) asc or desc |
| caption | string | 그리드의 (상단)caption 정의 (정의되지 않거나 빈값이면 나타나지 않음) |
| autowidth | boolean | true 설정 시 그리드의 상위 Element의 width로 자동으로 계산됨. 그리드가 생성될때 처음에만 수행되며 상위 Element width 변경 시 setGridWidth 메소드를 이용하여 조정 가능 |
| emptyrecords | string | 데이터가 없을 시 페이저(네비게이션) 오른쪽에 보여질 문자열 (viewrecords 옵션 true 일때 사용가능) |
| height | mixed | 그리드의 높이를 설정 - 숫자 (픽셀단위) - 퍼센트 - auto |
| ignoreCase | boolean | 검색 및 정렬에서 대소문자를 구분하지 않으려면 true 설정 |
| loadtext | string | 데이터 로딩중 보여줄 문자열 (locale 파일에 기본적으로 있음.) |
| multiselect | boolean | row의 멀티 선택 가능 |
| multiboxonly | boolean | row의 체크박스 외 다른 데이터 부분 클릭 시 해당 row 만 체크가 되며 나머지는 체크 해제가 된다. 체크박스를 클릭해야만 멀티 선택이 가능하다 (multiselect 옵션 true 일때 사용가능) |
| multiselectWidth | integer | multiselect 사용할 때 checkbox 컬럼의 width 값 |
| pagerpos | string | 페이징 기본위치 ex) 'left' or 'center' or 'right' |
| postData | array | POST 요청 시 넘겨줄 데이터 지정 ex) {name1: value1 ...} |
| selarrrow | array | 읽기전용 multiselect 옵션 true인경우 선택된 row의 그리드 id를 반환 |
| sortable | boolean | 그리드 열을 마우스로 드래그앤드롭으로 이동이 가능하다. 이 옵션은 jQuery UI 기능을 사용하므로 jQuery UI의 js 파일이 로드 되어있어야 한다. |
| viewsortcols | array | default: [false,'vertical',true], 그리드 열 Header에 나타나는 정렬 아이콘에 대해서 모양과 동작을 정의한다. 첫번째 값이 true인경우 모든 열에 정렬 아이콘이 나타난다. false인경우 마지막에 정렬한 열에만 아이콘이 나타남 두번째 값은 아이콘을 배치하는 방법을 결정한다. (vertical or horizontal) 세번째 값이 true인경우 정렬아이콘이 아니어도 열 Header 어느곳에 클릭해도 정렬이 되며 false인경우 정렬아이콘을 클릭해야만 정렬이 된다. |
옵션
- jqGrid 설정 및 구성은 그리드에 대한 옵션을 설정하여 제어되며, 구성설정의 예로는 그리드의 높이와 너비, 각 열에 있어야 하는 데이터 유형 및 기타 유사항 설정이 있다.
- 이러한 옵션은 그리드 옵션 배열에 설정되며 여러 옵션이 name:value 쉼표로 구분되어 쌍으로 설정되며, jqGrid 객체의 선언에 배열을 인수로 제공한다.
- 그리드를 생성한 후에는 일부 속성은 읽기전용이므로 변경할 수 없으며, 일반적으로 이런 데이터는 서버측 데이터 가져오기와 관련되어 있다.
jqGrid의 메인 객체의 이름은 jQuery.jgrid 이며, $.jgrid 라는 짧은 이름으로도 쓰인다.
모든 (옵션)속성은 특정 메소드나 jqGrid 자체적으로 로드된다.
jqGrid에 로드된 속성은 $.jqgrid.defaults 정적객체에서 가져온다.
영어 버전의 속성은 다음과 같다.
$.jgrid = { defaults : { recordtext: "View {0} - {1} of {2}", emptyrecords: "No records to view", loadtext: "Loading...", pgtext : "Page {0} of {1}" }, ... }즉 recordtext, emptyrecords, loadtext, pgtext 는 기본값으로 그리드에 로드가 되며, 이 값을 덮어쓰는 방법은 아래에 있다.
(알파벳 순서)
| Property | Type | Description | Default |
|---|---|---|---|
| ajaxGridOptions | object | 이 옵션을 사용하면 데이터를 요청할때 그리드에 대한 전역 ajax 셋팅이 가능하다. 옵션 사용 시 error, complete, beforeSend 이벤트에 대해서 모든 현재 ajax 셋팅을 덮어쓸수 있다. | empty object |
| ajaxSelectOptions | object | editoptions나 searchoptions Object의 dataUrl 옵션을 통해 Select Element의 전역 ajax 셋팅이 가능하다. | empty object |
| altclass | string | 그리드 row의 얼룩말형식 스타일을 적용할때 사용하는 클래스이다. 이 값을 교체하거나 커스텀 클래스로 사용이 가능하다. 이 옵션은 altRows 옵션이 true 일때 작동된다. | ui-priority-secondary |
| altRows | boolean | 얼룩말 스트라이프 그리드를 설정한다. (대체행은 스타일이 다르다) | false |
| autoencode | boolean | 서버에서 가져온 데이터 인코딩 여부 ex) '<' 표시를 '<' 로 치환 | false |
| autowidth | boolean | true 설정 시 그리드의 상위 Element의 width로 자동으로 계산됨. 그리드가 생성될때 처음에만 수행되며 상위 Element width 변경 시 setGridWidth 메소드를 이용하여 조정 가능 | false |
| caption | string | 그리드의 (상단)caption 정의 (정의되지 않거나 빈값이면 나타나지 않음) | empty string |
| cellLayout | integer | 이 옵션은 셀의 padding+border의 width를 결정한다. 일반적으로 변경되면 안되지만 변경이 필요한경우 그리드 css파일에서 만든 td Element에 대해서 커스텀이 가능하다. 초기값 5는 paddingLeft(2) + paddingRight(2) + borderLeft(1) 을 의미한다. | 5 |
| cellEdit | boolean | 셀의 에디트 가능여부 결정한다. | false |
| cellsubmit | string | 셀의 컨텐츠가 저장될 위치를 지정한다. ex) remote | clientArray | 'remote' |
| cellurl | string | 셀이 저장될 url | null |
| cmTemplate | object | colModel의 기본값을 override할 properties를 정의한다. 예를들어 모든열을 정렬할 수 없도록 원하는 경우 colModel에서 모든 컬럼을 지정하는 대신 여기서 하나의 property로 가능하다. | null |
| colModel | array | 컬럼(열)의 파라메터를 설명하는 배열이며, 그리드에서 가장 중요한 부분이다. | empty array |
| colNames | array | 컬럼의 이름을 배치하는 배열. 그리드의 헤더에 나타나는 텍스트이며, 이름은 쉼표로 구분된다. (colModel배열의 요소갯수와 같아야 한다.) | empty array[] |
| data | array | 그리드에 전달할 로컬데이터 배열. 배열데이터를 로드하기 원하는경우 이 변수에 직접 가리킬 수 있다. 상대적으로 큰데이터에 대해서 속도가 느린 addRowData 메소드를 대체할 수 있다. | empty array |
| datastr | string | datatype이 xmlstring이나 jsonstring으로 설정된경우의 데이터문자열 | null |
| datatype | string | 그리드를 채우는 데이터 형식을 정의한다. - xml, xmlstring - json, jsonstring, - local (array data) - javascript (javascript data) - function (retrieving data) 또는 clientSide를 이용해 배열데이터를 통해 수동으로 로드할 수있다. | xml |
| deepempty | boolean | 이 옵션은 테이블 셀에 이벤트나 플러그인이 설정된경우 사용해야 한다. 이 옵션은 row의 모든 자식Element에 대해서 jQuery를 비워준다. 속도 오버헤드가 있지만 메모리릭을 방지해준다. 만약 row나 컬럼에 소팅을 사용한다면 true로 설정하는 것을 권장한다. | false |
| deselectAfterSort | boolean | datatype이 local인 경우에 적용된다. 소팅을 적용시키면 선택된 row가 선택해제된다. | true |
| direction | string | 그리드에서 문자의 방향을 결정한다. 기본은 ltr(Left to Right)이며, rtl(Right to Left)로 설정 시 그리드가 자동으로 텍스트 방향을 변경한다. 한페이지에 두개이상의 그리드가 있을 수 있으며 서로다른 방향의 텍스트가 나올 수 있음에 유의해야 한다. 이 옵션은 Firefox 3.x, IE6 이상에서 지원하며, 현재 Safari, Chrome, Opera에서는 rtl을 완벽히 지원하지 않는다. Firefox에서 일반적인 문제는 기본설정으로 rtl이 지원되지 않는다는 점이다. | ltr |
| editurl | string | Inline or form 편집에 사용할 url을 정의한다. 수동으로 서버에 게시할 수 있도록 clientArray를 설정할수 있다. (Inline Editing을 참고) | null |
| emptyrecords | string | 현재 또는 그리드에서 반환된 레코드 수가 0일 때 보여질 문자열. 이 옵션은 viewrecords 옵션이 true일 때 사용가능하다. | see lang file |
| ExpandColClick | boolean | true로 설정된경우 트리그리드에서 확장된 컬럼의 텍스트를 클릭하면 확장되거나 축소된다. 이경우 아이콘을 정확히 클릭해야 할 필요는 없다. | true |
| ExpandColumn | string | 트리그리드에서 확장을 사용할 열(colModel의 이름)을 나타낸다. 설정되지 않은경우 첫번째 항목이 사용된다. treeGrid옵션이 true인 경우에만 사용가능하다. | null |
| footerrow | boolean | true로 설정된경우 footer table과 함께 한개의 row가 그리드레코드와 Pager 사이에 위치한다. colModel에 정의한 열의 갯수와 같다. | false |
| forceFit | boolean | true로 설정된경우 컬럼의 width가 변경되면 근접한 컬럼(오른쪽)의 크기가 조정되어 전체 그리드의 width가 유지된다. (예: 두번째 컬럼의 width를 30px 줄이면 세번째 컬럼의 width가 30px 늘어난다.) 이경우 수평스크롤바가 없다. 이 옵션은 shrinkToFit 옵션과 호환되지 않으며, shrinkToFit이 false로 설정되면 forceFit은 무시된다. | false |
| gridstate | string | hiddengrid, hidegrid, caption 옵션이 사용될 때 그리드의 현재 상태를 결정한다. ex) visible | hidden | visible |
| gridview | boolean | 3.4.x를 포함한 이전버전의 jqGrid에서는 100개 이상의 큰 row 데이터를 읽어들이는 것에 속도에 문제가 있었다. 그 이유는 셀이 그리드에 삽입될 때 5~6개의 jQuery가 셀에 적용되었기 때문이다. 지금은 문제가 해결됐으며, row마다 jQuery가 한번만 적용된다. 결과는 인상적이었고 3~5배정도 빠르다. 모든 데이터를 한번에 삽입하면 어떤 결과가 일어날까? 그렇다. gridview옵션을 true로 설정하는걸로 도움이 된다. 결과는 5~10배정도 빠르지만, 물론 이 옵션이 설정되면 몇가지 제한이 생긴다. true로 설정한겨우 treeGrid, subGrid와 afterInsertRow이벤트를 사용할 수 없다. 그리드에서 위 세가지를 사용하지 않는다면 true로 설정해서 빠른 속도로 사용해라. | false |
| grouping | boolean | 그리드에서 grouping 기능을 사용한다. | false |
| headertitles | boolean | true로 설정된경우 컬럼 헤더에 타이틀속성이 추가된다. | false |
| height | mixed | 그리드의 높이. - 숫자 (픽셀단위) - 퍼센트 (100%만 허용) - auto | 150 |
| hiddengrid | boolean | true로 사용시 그리드는 처음에 숨겨지게 된다. request가 전송되지 않으며, 데이터가 로드되지 않으면서 캡션만 보이게 된다. 그리드를 표시하기위해 show/hide 버튼을 처음 클릭하면 request가 발생하며 데이터가 로드되고 그리드가 보여지게 된다. hidegrid가 true인경우 caption속성은 비어있을 수 없다. | false |
| hidegrid | boolean | caption Layer 오른쪽의 show/hide 그리드버튼을 활성/비활성화 한다. caption 속성이 빈문자열이 아닌경우에만 효력이 있다. | true |
| hoverrows | boolean | false로 설정 시 그리드데이터 row위에 마우스를 올리면 hover 효과가 없어진다. | true |
| idPrefix | string | row의 id에 접두사로 추가된다. | empty |
| ignoreCase | boolean | 기본적으로 로컬검색은 대소문자를 구분하며, 대소문자를 구분하지 안으려면 이 옵션을 true로 설정한다. | false |
| inlineData | empty object | 인라인편집 시 서버에 게시된 데이터에 컨텐츠를 추가하는데 사용하는 배열 | {} |
| jsonReader | array | 예상되는 json데이터의 구조를 설명하는 배열. (자세한 설명은 Data Manipulation 항목 참고) | |
| lastpage | integer | request에서 받아온 페이지의 총개수를 제공한다. datatype을 function으로 사용하는 경우 your_grid.setGridParam({lastpage: your_number})로 Pager의 최대 페이지를 지정할 수 있다. | 0 |
| lastsort | integer | 읽기전용. 0부터 시작되는 컬럼번호의 마지막 소팅된 컬럼번호를 제공한다. | 0 |
| loadonce | boolean | true로 설정된경우 그리드는 서버에서 데이터를 한번만 로드한다. 첫번째 요청 후 datatype은 자동으로 'local'로 변경되며 이후 모든 동작은 클라이언트측에서 이루어진다. pager의 함수가 있는경우 비활성화 된다. | false |
| loadtext | string | 요청 및 소팅중에 표시할 텍스트. 이 파라메터는 언어셋파일에 있다. | Loading… |
| loadui | string | ajax작업이 수행중일 때 작업을 제어하는 옵션. disable - jqGrid 기본 progress를 사용하지 않고 사용자 indicator를 사용할 수 있다. enable - 그리드 가운데 loadtext 속성에 설정된 텍스트가 보여진다. block - ajax요청이 완료될때까지 그리드내의 모든 액션이 차단되며 loadtext속성의 텍스트를 보여준다. 페이징, 소팅 및 툴바의 모든 action이 비활성화 된다는것에 유의해라. | enable |
| mtype | string | request method 타입을 설정 ex) POST | GET | GET |
| multikey | string | 이 옵션은 multiselect 옵션이 true인 경우에만 의미가 있다. 다중선택 할 때 누를 키를 지정한다. ex) shiftKey | altKey | ctrlKey | empty string |
| multiboxonly | boolean | 이 옵션은 multiselect옵션이 true일때 작동한다. multiselect옵션이 true인경우 row의 아무데나 클릭 시 row가 선택된다. multiboxonly옵션이 true인경우 checkbox를 클릭해야만 다중선택이 된다. checkbox를 제외한 row의 아무데나 클릭 시 해당 row를 제외한 모든 row의 선택이 해제된다. | false |
| multiselect | boolean | true 설정 시 row의 다중선택이 가능하다. 왼쪽에 checkbox가 들어있는 새로운 컬럼이 추가되며, 모든 datatype옵션에 사용가능하다. | false |
| multiselectWidth | integer | multiselect옵션 활성화 인경우 checkbox 컬럼이 만들어질 때 width 값을 정의한다. | 20 |
| multiSort | boolean | true 설정 시 다중정렬이 가능하다. datatype옵션이 'local'인 경우에만 작동한다. 서버로부터 데이터를 받을 때 sidx 파라메터에는 순서조항이 포함되어있다. field1 asc, field2 desc ..., fieldN 형식의 콤마로 구분된 문자열이다. 마지막 필드에는 asc|desc가 포함되지 않는것에 유의해라. 헤더필드를 처음 클릭 시 sortorder옵션이나 colModel안에있는 firstsortoption옵션에 따라 필드가 소팅된다. 두번째 클릭 시 역순으로 소팅되며, 세번째 클릭 시 소팅이 해제된다. | false |
| page | integer | request를 만들 때 생성할 초기 페이지번호를 지정한다. 이 파라메터는 데이터를 검색하는 서버 루팅에서 사용하기위해 url로 전달된다. | 1 |
| pager | mixed | Pager bar를 통해 레코드 Navigate 사용을 정의한다. 유효한 HTML Element가 존재해야 한다. 예를들어 pager라는 id를 가진 div가 있어야 하며, 이름은 상관없다. HTML내에 Body태그 이후 원하는 위치 아무곳에나 Navigation Layer('pager' div)가 위치할 수 있다. 셋팅은 pager, #pager, jQuery('#pager') 세가지 사용방법이 있는데 두번째 방법을 권장한다. | empty string. |
| pagerpos | string | 그리드의 Pager 위치를 결정한다. 기본적으로 Pager Element는 3분류로 구성되어 있으며 Pager, Navigator Buttons, Record Infomation 으로 나뉘어진다. | center |
| pgbuttons | boolean | Pager에서 버튼의 활성화 여부 결정. pager옵션이 올바르게 설정되어 있어야 하며, 버튼은 Pager bar에 나타난다. | true |
| pginput | boolean | 가능한 요청페이지의 번호를 입력하는 input box의 사용여부. input box는 pager bar에 나타난다. | true |
| pgtext | string | 현재 페이지 상태에 대한 정보를 보여준다. 첫번째값은 현재 로딩된페이지. 두번째값은 전체 페이지. | See lang file |
| prmNames | array | 속성의 기본값은 다음과 같다.{page:“page”,rows:“rows”, sort:“sidx”, order:“sord”, search:“_search”, nd:“nd”, id:“id”, oper:“oper”, editoper:“edit”, addoper:“add”, deloper:“del”, subgridid:“id”, npage:null, totalrows:“totalrows”} 이 필드의 사용자정의된 이름은 서버에 Post 요청 시 전달된다. 예를들어 소팅순서 요소를 sidx에서 mysort로 변경 시 prmNames: {sort: “mysort”} 라고 설정하면 된다.PHP에서 컬럼값을 소팅할때 $POST['mysort']로 찾아본다면 myurl.php?page=1&rows=10&sidx=myindex&sord=asc
보다
로 서버에 요청보내는게 낫다.myurl.php?page=1&rows=10&mysort=myindex&sord=asc일부 파라메터를 null로 설정하면 서버로 전송되지 않는다. 예를들어 prmNames: {nd:null} 이렇게 설정하면 nd 는 서버로 전송되지 않는다.npage - scroll옵션을 참고 page - 요청한 페이지 (기본값: page) rows - 요청한 row갯수 (기본값: rows) sort - 정렬컬럼 (기본값: sidx) order - 정렬순서 (기본값: sord) search - 검색기준 (기본값: _search) nd - 요청에 전달된 시간 (기본값: nd) id - 편집모듈에서 데이터 전달하는 id의 이름 (기본값: id) oper - 작업파라메터 (기본값: oper) editoper - 편집모드에서 데이터 전달 시 작업이름 (기본값: edit) addoper - 추가모드에서 데이터가 전달된경우 작업이름 (기본값: add) deloper - 삭제모드에서 데이터 전달 시 작업이름 totalrows - 서버에서 받을 총 row갯수, rowTotal참고 (기본값: totalrows) subgridid - subgrid안에서 로드된 데이터를 클릭 시 전달되는 이름 (기본값: id) | none |
| postData | array | 이 배열은 URL에 직접적으로 추가되며 연관배열로써 다음과 같이 사용한다. {name1: value1 ...} | empty array |
| reccount | integer | 읽기전용. 그리드의 정확한 row 수를 결정한다. records 파라메터와 헷갈리지 마라. 대부분의 경우 records 파라메터와 같이 똑같겠지만 사실 똑같지 않다. 예를들어 rowNum옵션에 15를 정의한경우, 서버에서 20개를 받아왔을때 records는 20 이지만 reccount는 15이며, 그리드에는 15개만 보여지게 된다. | 0 |
| recordpos | string | Pager에서 record infomation의 위치를 결정한다. (기본: right) ex) left, center, right | right |
| records | integer | 읽기전용. request에서 받아온 그리드안에 있는 레코드 갯수 | none |
| recordtext | string | Pager에 보여지는 정보를 나타낸다. viewrecords옵션이 true인 경우에만 유효하다. 텍스트는 레코드 갯수가 0보다 큰 경우에만 나타난다. {0} - 페이지번호에 의존한 레코드 위치 and 요청했던 레코드 번호 {1} - 마지막 위치 {2} - 받아온 데이터의 총 레코드 | see lang file |
v3.5 부터 사용하지 않는다. (링크) | |||
| rowList | array[] | Pager 안에서 보여지는 row의 갯수를 변경가능한 select box element의 생성자 배열. 실행중에 변경이 되며, url로 전달되는 rowNum파라메터를 대체한다. 배열이 비어있으면 select box element가 나타나지 않는다. 일반적으로 [10,20,30] 으로 설정할 수 있으며 rowNum파라메터가 30이면 select box의 선택된 값은 30이다. | empty arrray |
| rownumbers | boolean | true 설정 시 그리드의 왼쪽에 새로운 컬럼이 추가된다. 이 컬럼의 목적은 1부터 시작하는 사용가능한 row의 숫자를 카운트 하는데 있다. 이 경우 rn이라는 이름의 새 Element가 colModel에 자동으로 확장된다. colModel에서 rn이름을 사용하면 안된다는것에 유의해라. | false |
| rowNum | integer | 그리드에 보여질 레코드 갯수를 설정한다. 이 파라메터는 서버에 요청하는 url에 전달된다. (이 파라메터에 10을 설정했을 때 서버에 10개의 레코드를 검색하도록 요청 하지만 만약 서버에서 15개를 반환한경우 화면에는 10개의 레코드만 로드된다.) | 20 |
| rowTotal | integer | 이 파라메터를 설정 시 서버가 작업에 필요한 row의 총갯수를 로드할 수 있도록 지시할 수 있다. rowNum이 그리드에 보여지는 총레코드 갯수라면, rowTotal은 우리가 작업(operate)가능한 row의 총갯수를 결정한다. 이 파라메터가 설정되면 우리는 서버에 totalrows라는 이름으로 파라메터로 추가하여 보낸다. 이 파라메터를 체크하고 사용 가능한경우에 rows파라메터를 이 파라메터로 교체할 수 있다. 이 파라메터는 대부분 loadonce파라메터를 true로 셋팅하고 같이 사용한다. | null |
| rownumWidth | integer | rownumbers 옵션이 true인경우 row number 컬럼의 width를 결정한다. | 25 |
| savedRow | array | 읽기전용. row나 cell을 편집하기전에 inline / cell 편집모듈에서 사용이 된다. Cell Editing / Inline Editing 참조. | empty array |
| scroll | boolean or integer | 동적 스크롤 그리드를 생성한다. true 설정 시 Pager 요소가 비활성화 되고 수직 스크롤을 이용해 데이터를 로드할 수 있으며, 그리드는 항상 처음부터 마지막 로드된 데이터까지 가지고 있게된다. 만약 숫자형식으로 설정하게되면 (예를들어 1) 그리드는 visible라인만 가지고 있게된다. 이는 메모리릭에 대해서 걱정하지 않도록 일부의 데이터만 로드할수 있다. 이외에 npage라는 서버프로토콜의 선택적 확장도 있다. (prmNames 배열 참고) prmNames내의 npgae옵션을 설정 시 그리드는 때때로 한번에 한페이지 이상 요청을 하고, 그렇지 않으면 여러번의 GET 요청을 수행한다. 주의: 이 옵션은 그리드의 height옵션이 'auto' 이거나 '100%'로 설정된경우 사용할 수 없다. | false |
| scrollOffset | integer | 수직 스크롤바의 width를 결정한다. 브라우저마다 이 너비를 다르게 해석하기 때문에 이 값은 바뀔 수 있다. | 18 |
| scrollTimeout | integer (milliseconds) | scroll 옵션이 1인경우 timeout handler를 컨트롤할 수 있다. | 200 |
| scrollrows | boolean | true설정 시 그리드에 나타난(visible) row를 setSelection로 선택하면 해당 row가 보이도록 그리드를 스크롤한다. 이 기능은 수직스크롤 그리드와 Navigation버튼의 Form Editing 사용 시 유용하다. 숨겨진 row를 Navigating하면 선택된 row가 보여지며 그리드가 스크롤된다. | false |
| selarrrow | array | 읽기전용. multiselect 옵션이 true인경우 현재 선택된 row를 제공한다. 이 값은 1차원배열이며 배열의 값은 그리드에서 선택된 id에 해당한다. | empty array [] |
| selrow | string | 읽기전용. 마지막으로 선택된 row의 id가 들어있다. 소팅을 하거나 페이징을 하게되면 null로 셋팅되어진다. | null |
| shrinkToFit | boolean or integer | 이 옵션이 설정되면 그리드의 width를 고려하여 컬럼의 width를 어떻게 재계산할지 정의한다. 이 값이 true이고 컬럼의 width도 설정된경우 모든 컬럼은 width의 비율만큼 조정된다. 예를들어 300픽셀 그리드에 width가 80, 120픽셀 두개의 열만 정의한경우 해당 열들은 전체 그리드에 맞게 늘어나며, 여기에 할당되는 추가 width는 그리드 자체 width와 사용가능한 추가width에 따라 달라진다. 재계산은 다음과 같이 한다. 1열 width: (300(new width)/200(sum of all widths))*80(first column width) = 120px 2열 컬럼 width: (300(new width)/200(sum of all widths))*120(second column width) = 180px 이제 열의 width의 합은 그리드의 width인 300px이 된다. 값이 false이며, width값이 설정되지 않았다면 리사이징은 발생하지 않는다. 따라서 shrinkToFit을 false로 설정하면 1열의 width는 80px, 2열의 width는 120px, 그리드는 300px width를 유지한다. shrinkToFit 값이 정수인경우 width는 그에따라 계산된다. FIXME - 정수를 사용하면 정교한 효과를 볼수도 있다. | true |
| sortable | boolean | true 설정 시, 마우스로 컬럼을 드래그앤드롭으로 순서를 변경할 수 있다. 이 옵션은 jQuery UI 정렬위젯을 사용하기 때문에 페이지의 HTML 헤더태그에 관련 파일을 로드해야 한다. 참고: colModel 객체에는 sortable속성이 있으며, 그리드의 특정 컬럼을 정렬하거나 하지 않게 지정할 수 있다. | false |
| sortname | string | 서버에서 처음 로드될 때 데이터가 정렬되는 컬럼 (원격데이터를 로드하려면 datatypes를 xml이나 json으로 사용해야한다.) 이 파라메터는 url에 추가되며, 값을 설정하고 colModel의 값과 일치하면 컬럼헤더에 소팅관련 아이콘이 나타나며 그리드가 정렬된다. 이 아이콘은 오름차순,내림차순을 나타내며 sortorder파라메터를 참고해라. prmNames도 같이 참고. | empty string |
| sortorder | string | datatype을 xml 또는 json을 사용하여 서버에서 데이터를 가져올 때의 초기 정렬 순서 해당 파라메터는 서버에 url요청 시 추가된다(prmNames 참고) ex) asc | desc | asc |
| subGrid | boolean | true 설정 시 sub-grid를 사용할 수 있으며, 기본 그리드의 왼쪽에 컬럼이 추가된다. 해당 컬럼은 '더하기' 이미지가 있으며 클릭 시 row가 펼쳐진다. 기본적으로 모든 row는 접혀진 상태이다. (Subgrid 항목 참조) | false |
| subGridOptions | object | subgrid에 대한 옵션을 추가한다. 기본값은 Subgrid 항목을 참고 | see Subgrid |
| subGridModel | array-[] | subGrid 속성이 true인 경우에만 사용이 가능하며, subgrid 데이터의 컬럼모델을 설명하고 있는 배열속성이다. (자세한 정보는 Subgrid 항목 참조) | empty array |
| subGridType | mixed | 옵션 사용 시 subgrid의 서비스 로딩가능. 사용하지 않는경우 부모그리드가 사용하는 datatype파라메터가 사용된다. | null |
| subGridUrl | string | subGrid옵션이 true인경우에만 사용가능. 이 옵션은 하위그리드의 데이터를 가져오는 URL옵션이다. jqGrid는 이 URL에 파라메터로 row의 id를 추가한다. 추가해야할 파라메터가 필요한경우 subGridModel의 params옵션을 사용해라. | empty string |
| subGridWidth | integer | subgrid가 true인경우 하위그리드 컬럼의 width값을 정의한다. | 20 |
| toolbar | array | 이 옵션은 그리드의 toolbar에 대해 정의한다. 두가지 요소로 구성되며, 첫번째 요소는 toolbar의 사용여부, 두번째는 데이터테이블의 Body Layer에서 상대적인 위치를 정의하며, top | bottom | both 의 값을 사용가능하다. 만약 toolbar: [true, 'both'] 라고 설정 시 데이터 테이블의 상/하단에 toolbar가 만들어진다. 두개의 toolbar는 모두 DIV요소로 만들어진다. 상단바의 id는 't_' + id_of_the_grid 와 같이 그리드 id에 't_' 를 접미사로 붙이며, 하단바의 id는 'tb_' + id_of_the_grid 와 같이 그리드id에 'tb_'를 붙이게된다. toolbar가 하나만 생성되는경우 위치와 관계없이 't_' + id_if_the_grid 와 같이 된다. | [false, ''] |
| toppager | boolean | 이 옵션이 활성화되면 Pager요소는 (가능한경우) 그리드 상단의 캡션 아래에 위치한다. 만약 또다른 Pager를 정의하면 같이 공존할수 있고 동시에 유지된다. 새로 생성된 Pager의 id는 grid_id + '_toppager' 로 만들어진다. | false |
| totaltime | integer | 읽기전용. 현재 사용가능한 xml 또는 json 데이터가 로딩된 시간을 제공한다. request가 완료되면 측정이 시간되고, 마지막 row가 추가되면 측정이 종료된다. | 0 |
| treedatatype | mixed | 초기 datatype을 제공한다.(datatype옵션 참고) 일반적으로 이 값은 변경하면 안되며, reading process 동안 datatype 옵션과 같이 똑같다. | null |
| treeGrid | boolean | tree grid 포멧 활성화 여부 (TreeGrid참조) | false |
| treeGridModel | string | treeGrid가 사용된 방법을 정의한다. (중첩 / 인접) ex) nested | adjacency | nested |
| treeIcons | array | treeGrid에 사용되는 아이콘을 설정한다. 아이콘은 UI테마 roller이미지에 유효한 이름이어야 한다. 기본값은 다음과 같다. {plus:'ui-icon-triangle-1-e',minus:'ui-icon-triangle-1-s',leaf:'ui-icon-radio-off'} | |
| treeReader | array | 기본 그리드에 정의된 colModel을 확장한다. 여기에 기술된 필드는 colModel 배열의 끝에 추가되거나 숨겨진다. 즉, 서버에서 반환된 데이터에 해당 필드에 대한 값이 있어야 한다. (유효한 값에대한 자세한 정보는 TreeGrid 항목을 참고) | |
| tree_root_level | numeric | treeGrid가 사용가능할 때 Root Element가 시작되는 레벨을 정의힌다. | 0 |
| url | string | 그리드를 채우는데 필요한 데이터를 반환하는 URL. clientArray옵션을 설정하면 수동으로 서버에 데이터를 보낼 수 있다. (Inline Editing 항목 참조) | null |
| userData | array | 이 배열은 request에서 커스텀정보를 포함하고 있으며 언제든지 사용 가능하다. | empty array |
| userDataOnFooter | boolean | true로 설정 시 커스텀데이터인 userData 를 footer에 배치시킨다. 규칙은 다음과 같다. userData배열에 colModel에 정의된 이름과 매칭되는 이름이 포함된경우, 해당 컬럼의 위치에 값이 배치되며, 만약 값이 없다면 아무것도 배치되지 않는다. 이 옵션을 사용하면 (가능한경우) 해당 컬럼에 현재 formatter option 사용이 가능하다. | false |
| viewrecords | boolean | true설정 시 jqGrid는 쿼리의 총 레코드 갯수 중에서 시작/끝 레코드 번호를 표시한다. 기본적으로 Pager bar 항목 오른쪽 하단에 'View X to Y out of Z' 이와같이 보여진다. 이 값이 true이면 emptyrecords와 recordtext 옵션을 포함하여 다른 파라메터로 조정이 가능하다. | false |
| viewsortcols | array | 컬럼 헤더에 나타나는 소팅아이콘에 대해서 다른 모습과 동작을 정의하며 기본값은 [false, 'vertical', true] 이다. 첫번째 파라메터는 정렬가능한 속성이 true로 설정된 모든열에 아이콘이 표시되어야 하는지 여부 false로 설정 시 소팅가능한 컬럼중 마지막 컬럼에만 아이콘이 표시되며, true로 설정 시 정렬가능한 모든 컬럼에 아이콘이 표시된다. 두번째 파라메터는 (수평 또는 수직)아이콘 형식을 나타내며 vertical | horizontal 두가지 형식중에 사용가능하다. 세번째 파라메터는 클릭기능을 정의하며, true로 설정 시 아이콘이 아니라 컬럼의 헤더를 클랙해도 데이터가 정렬되고 false 설정 시 아이콘을 클릭한 경우에만 데이터가 정렬된다. 중요: 세번째 파라메터를 false로 설정하는 경우 첫번째 요소를 true로 설정해라. 그렇지 않으면 아이콘이 표시되지 않고 사용자가 정렬기능을 사용하기 위해서 헤더의 어느부분을 클릭해야 할지 알수 없게된다. | [false,'vertical',true] |
| width | number | 이 옵션이 설정되지 않으면 그리드의 width값은 colModel에 정의(px)된 컬럼의 width값의 합이 된다. 이 옵션이 설정되면 각 컬럼의 초기 width값은 shrinkToFit 옵션의 값에 따라 설정된다. | none |
| xmlReader | array | 예상되는 xml 데이터의 구조를 설명하는 배열 (자세한 설명은 Retrieving Data in XML Format 참조) |
글로벌 옵션 설정 및 덮어쓰기
1004lucifer
글로벌 옵션 설정: jQuery extend 함수 이용
글로벌 옵션 덮어쓰기: jqGrid 생성 시 해당 옵션 추가
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" type="text/css" media="screen" href="bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jquery/ui/jquery-ui.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="jqGrid/css/ui.jqgrid.css" />
<script src="jqGrid/jquery.js" type="text/javascript"></script>
<script src="jqGrid/js/i18n/grid.locale-kr.js" type="text/javascript"></script>
<script src="jqGrid/js/minified/jquery.jqGrid.min.js" type="text/javascript"></script>
<script src="bootstrap/dist/js/bootstrap.js" type="text/javascript"></script>
<script src="jquery/ui/jquery-ui.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery.extend(jQuery.jgrid.defaults, { autowidth:true }); // 글로벌 옵션 설정
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
<script>
var dataArray = [
{
"name": "Lorene Battle",
"phone": "(936) 574-3976"
},
{
"name": "Wendi Downs",
"phone": "(815) 510-3017"
}
];
$(document).ready(function() {
$("#list").jqGrid({
datatype: 'local',
styleUI: 'Foundation',
data: dataArray,
colModel: [
{name: 'name', label : 'Name'},
{name: 'phone', label : 'Phone Number'}
],
caption : 'Users Grid',
height: 'auto',
sortname: 'phone',
autowidth: false, // 글로벌 옵션 덮어쓰기
pager: '#pager',
rowNum: 5
});
});
</script>
</body>
</html>
참고
- http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options
상세한 설명 감사합니다!
답글삭제도움이 된것 같아 기분이 좋네요. ^^
삭제감사합니다 !!
답글삭제네~ 감사합니다. ㅎㅎ
삭제