실습 jqGrid 버전: CDN 제공하는 v4.6 버전으로 테스트
그리드 관련 메소드 사용방법과 메소드 항목에 대해서 알아본다.
Method 사용방법
jqGrid 메소드는 jqGrid 객체를 반환하므로 체인 형식으로 사용이 가능하며,
사용방법은 기존과 새로운방법 2가지 종류가 있다.
두가지 규칙을 자유롭게 사용할 수 있으나 새로운 방법은 jQuery 플러그인과 이름이 충돌나지 않도록 개선되었기에 신규 방법을 권장한다.
기존 사용방법
<script>
...
jQuery("#grid_id").setGridParam({...}).hideCol("somecol").trigger("reloadGrid");
...
</script>
신규 사용방법
<script>
...
jQuery("#grid_id").jqGrid('method', parameter1,...parameterN );
...
</script>
신규 API만 사용하도록 jqGrid 설정 구성
(주의사항: locale파일과 jqGrid 파일 사이에 스크립트를 넣어야 한다.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>My First Grid</title> <link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.7.1.custom.css" /> <link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" /> <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script> <script src="js/i18n/grid.locale-en.js" type="text/javascript"></script> <script type="text/javascript"> jQuery.jgrid.no_legacy_api = true; </script> <script src="js/jquery.jqGrid.min.js" type="text/javascript"></script> </head> <body> ... </body> </html>
Method 항목
1004lucifer
| Method | Param | Returns | Description |
|---|---|---|---|
| addRowData | rowid, data, position, srcrowid | true on success, false otherwise | 지정된 위치에 id=rowid를 가지는 새로운 행을 삽입 data는 {name1:value1,name2:value2 ..} 형식을 가진다. 여기서 name은 colModel에 설명된 열의 이름이다. 이 메소드는 한번에 여러개의 행을 삽입 가능하며 [{name1:value1 ..},{name1:value1 ..}] 과 같은 배열이어야 하며 첫번째 옵션인 rowid는 데이터 객체의 이름을 포함해야 한다. 이경우에 이름은 colModel의 일부일 필요는 없다 |
| bindKeys | {onEnter: null, onSpace: null, onLeftKey: null, onRightKey: null, scrollingRows: true} | jqGrid object | 이 메소드를 호출하면 Up, Down으로 행을 선택할 수 있다. 행이 선택되고 enter, space, left, right 와 같은 키가 눌려지면 추가 이벤트를 호출할 수 있다. 이벤트에 대해서 선택된 rowid가 전달된다 |
| clearGridData | clearfooter | jqGrid object | 그리드에서 현재 로드된 데이터를 지운다. clearfooter 옵션이 true인경우 footer row 공간의 데이터를 지운다. (링크 - 추가 설명) |
| delRowData | rowid | true on success, false otherwise | id=rowid 인 row를 삭제한다. 서버에서 데이터가 삭제되지 않는다. |
| editRow | rowid, keys | none? | rowid 열을 에디팅 한다. keys는 boolean값이며, enter, esc 와 같은 키 사용여부이다. |
| footerData | action, data, format | jqGrid object | footer에 데이터를 가져오거나 설정한다. (footerrow 옵션을 참고) action - get이나 set을 할수 있으며 기본 get이다. get은 name:value 형식으로 리턴을 하는데 name은 colModel의 이름이다. (set도 비슷함) format - 기본true, 새로운값이 설정되었을때 포멧 메소드를 사용하도록 지시한다. false로 하면 formatter 사용이 무효화 된다. |
| getCell | rowid, iCol | cell content | id=rowid and column=iCol 인 셀의 컨텐츠를 반환한다. iCol은 colModel에 지정된 컬럼index 또는 name이 될 수 있다. row나 cell을 편집할때 이 방법을 사용하지 마라. input Element의 실제값이 아니라 cell내용을 반환한다. |
| getCol | colname, returntype, mathoperation | array[] or value | 열의 값이 있는 배열을 반환한다. colname은 열의index 이거나 colModel의 이름일수 있다. returntype은 반환된 배열의 유형을 결정하며, 기본값인 false로 설정되면 배열에는 값만 포함되며, true로 설정되면 배열에는 객체집합이 포함된다. 객체는 {id:rowid, value:cellvalue}로 정의되며 rowid는 행의id이며 cellvalue는 셀의 값이다. mathoperation 에는 sum, avg, count 값이 들어갈수 있다. 이 파라메터를 설정하면 해당 열에서 유효한 값이 연산되어 반환된다. 파라메터 값이 올바르지 않으면 빈배열이 반환된다. |
| getDataIDs | none | array[] | 현재 그리드안에서 id들의 배열을 반환한다. 가능한 데이터가 없으면 빈 배열을 반환. |
| getGridParam | name | mixed value | 요청한 매개변수의 값을 반환한다. name - 옵션 배열의 이름 name이 설정되지 않으면 entry옵션이 반환된다. |
| getInd | rowid, rowcontent | mixed | rowcontent가 false(기본)으로 설정된경우 그리드에서 id=rowid로 지정된 row의 index를 반환한다. rowcontent가 true인경우 entry row object를 반환한다. rowid를 찾을 수 없는경우 false를 반환한다. |
| getLocalRow | rowid | row object | datatype이 'local'인경우 data파라메터의 로컬배열스토어의 row data를 반환한다. |
| getRowData | rowid or none | array{} | id=rowid의 배열데이터를 반환한다. 반환된 배열은 name:value 형식이며, name은 colModel의 이름이며, value는 해당 row의 관련 컬럼값이다. rowid를 찾을 수 없는경우 빈배열을 반환한다. 1. row나 cell을 편집할때 이 방법을 사용하지 마라. input Element의 실제값이 아니라 cell내용을 반환한다. 2. 성능이슈가 있습니다. for, when 구문 안에서 이 메소드를 사용하지 마라. (매번 row데이터를 계산한다.) rowid가 설정되지 않은경우 그리드 안의 모든 배열데이터를 반환한다. |
| hideCol | colname or [colnames] | jqGrid object | 하나의 colname이 주어지면 해당 이름에 맞는 열을 숨긴다. ['name1', name2'] 형식의 배열이 주어지면 해당 이름의 열을 모두 숨긴다. colname은 colModel에서의 이름과 일치해야 한다. (그리드폭은 변경되지 않는다.) |
| remapColumns | permutation, updateCells, keepHeader | none | (순열)permutation배열을 기반으로 그리드열을 다시 정렬한다. permutation배열의 index는 현재 정렬이고, 값은 새로운 정렬이다. 예를들어 [1,0,2] 배열값이 있는경우 해당 함수를 호출 시 첫번째 컬럼이 두번째 컬럼으로 재정렬이 된다. updateCells가 true인경우 cell데이터가 재정렬된다. keepHeader가 true인경우 header cell위로 데이터가 재정렬된다. |
| resetSelection | none | jqGrid object | 선택된 row(s)를 Reset(unselects)한다. multiselect모드에서도 동작한ㄴ다. |
| restoreRow | rowid | none? | rowid로 지정된 row를 편집전의 상태로 되돌린다. |
| saveRow | rowid, callback, url, extraparams | none? | editRow메소드를 통해 편집모드로 열려진 rowid로 지정된 row를 저장한다. callback - 저장이 완료된 후에 호출되는 콜백함수이다. 서버요청시 xhr객체를 허용한다. url - 서버에 요청할 URL이며 이 값을 지정하면 editurl에 지정된 값을 덮어쓴다. extraparams - 서버에 전달되는 추가 매개변수이다. 데이터는 id==rowid&name=value로 구성되어 보내며 name은 colModel의 이름이다. |
| setCaption | caption | jqGrid object | 그리드의 새로운 캡션을 설정한다. 캡션레이어가 숨겨져 있으면 보여진다. |
| setCell | rowid, colname, data, class, properties, forceup | jqGrid object | 해당 메소드는 특정 cell의 내용을 변경할 수 있으며, class및style 속성을 변경할 수 있다. rowid - row의 id colname - 컬럼이름(0부터 시작하는 컬럼의 인덱스형식의 숫자도 가능) data - 빈문자열이라면 내용이 변경되지 않음. class - 문자열이면 셀에 클래스를 추가하며, 배열인경우 해당 클래스로 CSS를 새로 설정한다. forceup - true로 설정된경우 값이 비어있어도 업데이트를 수행한다. |
| setGridParam | object | jqGrid object | 특정 파라메터를 설정한다. * 일부 파라메터를 적용하려면 trigger('reloadGrid')를 수행해야한다. 이 방법을 수행할경우 이벤트를 override 할 수 있다는것에 유의해야한다. object - {name:value} 형식의 옵션배열로 지정한다. |
| setGridHeight | new_height | jqGrid object | 그리드의 새로운 높이를 동적으로 설정한다. 높이가 그리드에는 설정되지 않고 그리드셀 에만 설정된다는것에 유의해야 한다. new_height - px, %, auto |
| setGridWidth | new_width, shrink | jqGrid object | 그리드에 동적으로 새로운 너비를 설정한다. new_width - px shrink - true or false shrink는 shrinkToFit과 동일한 동작을 하며 이 파라메터가 설정되지 않으면 shrinkToFit 값을 사용한다. |
| setLabel | colname, data, class, properties | jqGrid object | 지정한 컬럼의 헤더에 새로운 라벨을 설정할수 있고, 속성,class도 지정할 수 있다. colname - colModel의 컬럼명(0부터 시작하는 컬럼의 인덱스형식의 숫자일 수 있음) data - 라벨에 넣을 데이터, 빈문자열이면 내용이 변경되지 않음 class - 문자열인경우 클래스에 추가하고, 배열인경우 해당 배열로 새CSS속성을 설정한다. properties - 라벨의 attr속성을 설정한다. |
| setRowData | rowid, data, cssprop | true on success, false otherwise | 배열값을 rowid의 row에 업데이트한다. data - {name1:value1, name2:value2 ..}형식이며 name은 colModel에 기술된 이름이고, value는 신규값이다. cssprop - 문자열인경우 row에 class를 추가하며, 객체인경우 CSS프로퍼티에 추가한다. data 없이 속성 및 클래스를 업데이트할경우 data를 false로 설정해야함에 유의해야한다. * row나 cell을 편집할때는 이 방법을 사용하지 마라. 사용하게되면 content를 셋팅하고 input Element를 override 하게된다. |
| setSelection | rowid, onselectrow | jqGrid object | id=rowid 의 row 선택을 토글한다. onselectrow값이 true(기본)인경우 onSelectRow함수가 수행되지만 false인경우 수행되지 않는다. |
| showCol | colname | jqGrid object | colname - 문자열인 경우 해당 열을 표시한다. ['name1', 'name2'] 같은 배열 형식인 경우 배열의 모든 컬럼을 표시한다. colname은 colModel의 유효한 이름이어야 한다. width는 변하지 않는다. |
| trigger("reloadGrid") | none | none | 그리드를 현재 설정으로 다시 로드한다. datatype이 xml 또는 json일경우 서버에 새로 요청을 한다. 이미 구성된 그리드에 적용을 해야 한다. * 이 방법은 header 정보를 변경하지 않는다. 즉, colModel의 변경사항에 영향을 미치지 않는다. colModel이 다른경우 gridUnload 후 reload 방법을 사용할 수 있다. * loadonce값이 false인경우 절대 사용하지 마라. (추가 설명 링크) |
| unbindKeys | none | jqGrid object | bindkeys 메소드에 정의된 이벤트 해제한다. |
아래는 사용방법이 다른 3가지 메소드
1004lucifer
| Method | Param | Returns | Description |
|---|---|---|---|
| addJSONData | data | none | data를 그리드에 채운다. data - 배열형식의 데이터 ex) var mygrid = jQuery('#'+grid_id)[0]; var myjsongrid = eval('('+jsonresponse.responseText+')'); mygrid.addJSONData(myjsongrid); myjsongrid = null; jsonresponse =null; addJSONData로 데이터를 넣기전에 myjsongrid 데이터 조작이 가능하다. |
| addXmlData | data | none | data를 그리드에 채운다. ex) var mygrid = jQuery('#'+grid_id)[0]; mygrid.addXmlData(xmlresponse.resopnseXML); myjsongrid = null; jsonresponse =null; addXmlData로 데이터를 넣기전에 xmlresponse 데이터 조작이 가능하다. |
| updateColumns | none | none | 헤더의 폭을 데이터와 동기화 시킨다. 테이블 드래그앤드롭 사용시 유용하다. var mygrid = jQuery('#'+grid_id)[0]; mygrid.updateColumns(); |
공통 기능 및 설정
1004lucifer
프로젝트의 어느위치에서나 사용할 수 있으며 jqGrid 객체와 상관이 없다.
(아래에서 grid.jqGridFunction 이 옵션명)
<script> ... jQuery.jgrid.jqGridFunction( parameter1,...parameterN ); ... </script>
공통기능 항목
| Function/Option | Param | Returns | Description |
|---|---|---|---|
| ajaxOptions | empty object | none | 그리드에 사용된 모든 ajax요청에 대한 전역 ajax설정 가능 특정 모듈에 대한 모든 현재 ajax설정을 덮어쓰기 가능. v3.6 부터 3레벨의 ajax 설정이 있으며, 첫번째 레벨은 ajax를 사용할때 모듈에 대한 기술이다. 두번째 레벨은 이 옵션에서 결정되며, 세번째 레벨은 특정 메소드의 추가 파라메터로 전달할 수 있다. 세번째 레벨의 ajax설정이 우선순위가 높다. 즉, 모든 ajax셋팅에 대해 전역 설정이 이루어진다. jQuery.extend(jQuery.ajax({method specific options}, ajaxOptions, ThirdLevelajaxSettinds)); 이에따라 서버로 보내는 파라메터 변환이 가능하며 ajax요청 함수에 대한 직렬화 선언이 가능하다. |
| jqID | string | parsed string | 두개의 백슬래시(\\) 특수문자가 한개의 백슬래시(\)로 올바르게 치환되어 jQuery selector를 올바르게 사용할 수 있다. |
| jgrid.htmlDecode | string | decoded_string | HTML 인코딩된 문자열을 원래 HTML 코드로 다시 디코딩한다. |
| jgrid.htmlEncode | string | encoded_string | HTML문자열을 인코딩한다. |
| jgrid.format | string | formated_string | 간단한 문자열 템플릿. 첫번째 인수의 자리 표시자를 바꾸는데 사용한다. ex) jQuery.jqgformat(“Please enter a value between {0} and {1}.”, 4, 8) => "Please enter a value between 4 and 8" |
| jgrid.getCellIndex | cell | index | IE7 에서만 버그때문에 사용된다. CellIndex 계산관련.. |
| jgrid.stringToDoc | xmlString | xmlDoc | xmlstring 을 xmlDoc(dom document)로 반환한다. |
| jgrid.stripHtml | content | new_content | content에서 html을 제거한다. |
| jgrid.parse | jsonString | object | 이 함수는 jsonString(JSON 텍스트)를 파싱하여 객체나 배열을 생성한다. 자바스크립트의 하이재킹 공격을 막기위해 개발자가 이 기능을 사용하길 권장한다. 변수의 JSON 표현을 반환한다. 순환구조가 감지되면 안전하게 중단시키지만 복원까지는 하지 못한다. 1. JSON문자열의 시작부분 while(1); 를 위치시킨다. 2. 시작과 끝부분에 주석이 있다. 다음과 같은 JSON 응답 while(1);/*{[ {“name”:“safe value 1”}, {“name”:“safe value 2”}, … ]}*/ jqGrid는 datatype:'json' 인경우에 이 함수를 사용한다. |
애드온 메소드
- grid.custom.js 파일에 포함되어 있는 애드온 매소드
애드온 메소드 항목
1004lucifer
| Function/Option | Param | Returns | Description |
|---|---|---|---|
| filterGrid | grid_id, params | HTML object | 그리드에 대한 사용자 검색form에 적용하여 호출할 수 있으며, 그리드에 대해서 적용하는게 아니라 HTML Element 검사에 활용할 수 있다. grid_id - 검색이 적용될 그리드의 id params - 매개변수의 배열 * 더 이상 공식적으로 지원되지 않으며 grid.addons.js 파일을 수동으로 포함시켜야 동작이 가능하다 - 링크 |
| filterToolbar | params | jqGrid object | 이 메소드는 검색 input Element가 그리드의 header Element 바로 아래에 배치되는 것을 제외하고 filterGrid와 동일하다. header Element가 리사이즈 되면 input search Element 또한 새로운 width로 리사이즈 된다. filterGrid와의 다른 차이점은 filterToolbar는 colModel의 정의를 사용한다. |
| getColProp | colname | array{} | colModel의 컬럼 이름의 속성배열을 반환한다. |
| GridDestroy | grid_id | true on success, false otherwise | DOM에서 id=grid_id 인 그리드객체를 삭제한다. (html과 관련된것과 그리드의 모든 이벤트를 unbind 시킨다) |
| GridUnload | grid_id | true on success, false otherwise | GridDestroy와 다른점은 그리드는 삭제되지만 table, pager Element는 그대로 남겨져 재사용이 가능하다. |
| setGridState | state | jqGrid object | 그리드(의존된것포함)와 상태파라메터를 보이거나 감춘다. state를 'visible'로 설정하면 그리드가 보여진다. state를 'hidden'으로 설정 시 그리드가 숨겨진다. * onHeaderClick이벤트가 호출되지 않고 그리드의 캡션은 항상 보여지는 것에 유의해야 한다. |
| setColProp | colname, properties | jqGrid object | colModel에서 새 properties를 설정한다. 이 메소드는 컬럼의 properties를 동적으로 변경하는데 좋다. 일부 속성에서 효과가 없음.(colModel 옵션 참고) ex) jQuery(“#grid_id”).setColProp('colname',{editoptions:{value:“True:False”}}); => editoptions 값이 바뀌게 된다. |
| sortGrid | colname, reload | jqGrid object | colname 을 정렬하고 정렬아이콘을 표시한다. 소팅아이콘을 제외하고 아래의 예제와 결과는 동일하다. ex) setGridParam({sortname:'myname'}).trigger('reloadGrid') reload가 true인경우 그리드는 현재페이지와 정렬순서 셋팅을 다시 로드한다. |
| updateGridRows | data, rowidname, jsonreader | true on success, false otherwise | rowidname에 주어진 그리드의 기존데이터를 업데이트한다. data - 배열데이터 [{name:value,name1:value1…}, {name:value,name2:value2…}] 여기서 name은 colModeld의 이름이고, value는 실제값이다. data item object에 모든 컬럼이 있을필요는 없다(setRowData 메소드와 동일) rowidname(string) - id로 작동되는 row의 이름이다. 만약 없다면 'id' 라는 이름으로 사용된다. jsonreader(boolean) - 기본으로 false이며, true 설정 시 jsonReader로 데이터를 셋팅하여 사용한다. * jsonReader객체의 'repeatitems'가 true로 설정되어 있어야 작동한다. 이경우 데이터가 name:value 쌍으로 이루어지지 않을수도 있다. 하지만 컬럼수가 colModel의 컬럼수와 같은 값이어야한다. * 더 이상 공식적으로 지원되지 않으며 grid.addons.js 파일을 수동으로 포함시켜야 동작이 가능하다 - 링크 |
참고
- http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods
댓글
댓글 쓰기