실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트
jqGrid 에서 가장 중요한 부분인 ColModel API
jQuery("#gridid").jqGrid({ ... colModel: [ {name:'name1', index:'index1'...}, {...}, ... ], ... });
* name 속성은 필수이며, getColProp/setColProp 메소드를 이용해 가져오거나 수정이 가능하다.
colModel 옵션
1004lucifer
| Property | Type | Description | Default |
|---|---|---|---|
| align | string | Body 셀 안의 데이터 위치, Header 셀 해당 안됨 ex) left, center, right |
left |
| cellattr | function | 이 함수는 데이터를 생성하는 동안 셀에 속성을 동적으로 추가한다. 예를들어 Table cell의 모든 유효한 속성을 사용하거나 다른 속성을 갖는 스타일 속성을 사용할 수 있다. 이 함수는 문자열을 반환해야 하며 아래와 같은 매개변수가 전달된다. - rowId: row's id - val: 셀에 추가될 값 - rawObject: row data object - cm: colModel에서 컬럼 리스트의 모든 프로퍼티 - rdata: row에 삽입될 데이터의 value (colModel 에서 data1 이라는 이름이 있다면 data1:value 형식의 array) ex) function (rowId, val, rawObject, cm, rdata) { if (rawObject.prop1 == 'hour') { return 'colspan=2, style="color: red;"'; } |
null |
| classes | string | 컬럼에 클래스 속성 추가 2개 이상인경우 공백으로 구분한다. ex) 'class1 class2' 그리드에 'ui-ellipsis' 라는 미리 정의된 class가 있는데 해당 class를 적용하면 특정row를 생략시킬 수 있다. |
empty string |
| datefmt | string | editrules {date:true} 인경우 date format 지정가능 PHP와 비슷한 날짜형식을 사용하며 슬래시(/), 대시(-), 점(.) 기호를 date 구분자로 지원된다. y,Y,yyyy for four digits year YY, yy for two digits year m,mm for months d,dd for days. (Array Data 참고) |
ISO Date (Y-m-d) |
| defval | string | 검색필드의 기본값. 이 옵션은 사용자정의검색(Custom Search)에서만 사용가능하며 초기검색으로 설정된다. |
empty |
| editable | boolean | 필드의 편집가능여부 지정. 이 옵션은 cell, inline, form 모듈에서 사용이 가능하다. | false |
| editoptions | array | edittype option에 대한 속성에서 허용가능한 옵션의 배열 속성을 추가 ex) 1. <input type="text" ...../> - editoptions: {size:10, maxlength: 15} => <input type="text" size="10" maxlength="15" /> 2. <input type="checkbox" .../> - editoptions: { value:"Yes:No" } => <input type="checkbox" value="Yes" offval="No".../> |
empty array |
| editrules | array | editable 필드의 rule을 정한다. 대부분 서버에 값을 전송하기전에 validate 용으로 사용됨 ex) editrules:{number:true, required:true....} |
empty array |
| edittype | string | inline과 form 편집에서 사용할 유형을 설정 ex) text, textarea, select, checkbox, password, button, image, file |
text |
| firstsortorder | string | 설정 시 해당 열이 첫번째로 정렬되며, 이후에 보통 토글로 컬럼 소팅이 된다. ex) asc, desc |
null |
| fixed | boolean | shrinkToFit 옵션과 같이 true 설정 시 컬럼의 width 값이 재계산 되지 않는다. 또한 그리드 width를 변경하기위해 setGridWidth 메소드를 사용해도 width값이 변경되지 않는다. |
false |
| formoptions | array | form 편집의 다양한 옵션을 정의한다. (form 옵션 참고) | empty |
| formatoptions | array | 특정 컬럼에 대해서 포멧옵션을 정의하며, 언어파일을 덮어쓴다. (Formatter 참고) | none |
| formatter | mixed | 필드의 형식(포멧)을 제어하기위한 미리 정의된 타입(string)이거나 사용자정의 function 이름. (Formatter 참고) |
none |
| frozen | boolean | true로 설정 시 setFrozenColumns 메소드를 호출 후 컬럼이 고정된다. | false |
| hidedlg | boolean | true 설정 시 사용자가 컬럼을 표시/숨김 설정하는 모달대화상자에 해당 컬럼이 나타나지 않는다. | false |
| hidden | boolean | 컬럼 초기화 시 숨겨질지 여부를 정의한다. | false |
| index | string | 정렬할 때 사용할 index이름. sidx 파라메터로 전달된다. | empty string |
| jsonmap | string | 가져온 json 데이터에 대해서 컬럼에 json 매핑을 정의한다. | none |
| key | boolean | 서버에서 받아온 (readers에 정의한)id를 덮어쓴다. 설정되는 id는 고유한 row id 이어야 하며, 이 속성은 하나의 컬럼에만 포함이 될 수 있다. 이 옵션은 readers 보다 우선순위가 높다. 하나이상의 key가 있는경우 첫번째만 사용되며 두번째키는 무시된다. |
false |
| label | string | colName 배열이 비었을 때 컬럼의 제목을 정의한다. colName 배열과 이 옵션이 모두 정의되지 않으면 컬럼 제목은 name 속성에서 가져온다. |
none |
| name | string | 그리드에서 컬럼의 고유한 name을 설정하며, 이 속성은 필수로 설정해야 한다. 다른 속성/이벤트 이름과 subgrid, cb, rn 은 예약어로써 사용을 할 수 없다. |
Required |
| resizable | boolean | 컬럼의 resize 여부 정의 | true |
| search | boolean | search 모듈이 사용될 때 해당 컬럼의 검색을 활성화/비활성화 여부를 정의한다. (검색기본구성 참고) | true |
| searchoptions | array | 검색 시 사용할 검색기본구성에 대해 검색옵션을 정의한다. | empty |
| sortable | boolean | 소팅 가능여부를 정의한다. | true |
| sortfunc | function | datatype 설정이 local인 경우 사용자정의 정렬을 수행하는 사용자정의함수이다. a, b, direction 이렇게 3개의 매개변수가 전달된다. a, b: 이전/이후 비교가능한 값 direction: 오름차순/내림차순을 알수 있는 1 / -1 값 이 함수의 반환값은 1, -1, 0 이렇게 3개중에 하나이어야 한다. |
null |
| sorttype | mixed | datatype 설정이 local인 경우 사용되며, 컬럼에 적당한 소팅유형을 정의한다. 가능한 값은 아래와 간다. int/integer - for sorting integer float/number/currency - for sorting decimal numbers date - for sorting date text - for text sorting function - defines a custom function for sorting. function 에는 소팅될 값을 매개변수로 전달하며, 마찬가지로 값을 반환해야 한다. (Array Data 참조) |
text |
| stype | string | 검색할 때 element의 타입을 정의한다. (검색기본구성 참고) | text |
| surl | string | 사용자정의 검색 및 edittype:'select' 인 경우에만 사용가능하며, select 로 구성된 값을 가져오기 위한 url을 기술한다. | empty string |
| template | object | colModel의 유효한 속성을 설정한다. 이 옵션은 컬럼모델의 기본값을 쉽게 덮어쓸 수 있다. (cmTemplate 옵션을 참고) |
null |
| title | boolean | false 설정 시 마우스로 cell을 오버(가리킬때) 시 타이틀이 나타나지 않는다. | true |
| width | number | 컬럼의 초기 width 값(픽셀) 설정하며, 퍼센트로 설정할 수 없다. | 150 |
| xmlmap | string | 가져온 xml데이터에 대해서 컬럼에 xml 매핑을 정의한다. CSS형식을 사용한다.(데이터조작 참고) | none |
| unformat | function | 편집을 사용할 때 cell의 값을 unformat 하는 사용자정의 함수. (사용자정의 Formatter 참고) (이 함수는 소팅할때도 호출이 되며 반환값은 소팅으로 비교된 값이어야 한다.) |
null |
| viewable | boolean | viewGridRow 메소드가 활성화 된 경우에만 사용가능하며, false 설정 시 컬럼이 view Form에 보여지지 않는다. | true |
name, width, resizable, label 옵션은 그리드가 구성된 이후에 동적으로 변경 할 수 없는 옵션이며, 변경된경우 변경사항이 적용되지 않거나 그리드 오류가 발생한다.
(label 은 메소드를 이용하여 변경 가능)
참고
- http://www.trirand.com/jqgridwiki/doku.php?id=wiki:colmodel_options
댓글
댓글 쓰기