jqgrid

jqGrid작성자 : 멋진인생

이메일 : neda.air@gmail.com홈페이지 : http://run2you.tistory.com

Basic Grid options(1)Property Type Description default

url string 호출할 url null

datatype string Grid 를 처리할 응답 , xml, json 등 xml

colNames array[] Header layer 에 들어갈 컬럼 이름 empty array[]

colModel array 컬럼의 파라미터를 서술한 배열 empty array

rowNum integer Grid 에 표시될 rows 수 , 서버에서 n 개를 리턴하더라도 표기된 수 만큼만 표시 해 줌 . -1 값일경우는 무제한으로 표시함

20

caption string Header layer 에 표시될 제목 empty string

autowidth boolean True 시 부모 요소의 길이로 grid 길이를 재 계산 하여 설정 false

width number 해당 필드가 세팅되어 있지 않다면 colModel (in pixels) 의 값을계산 하여 width 산정 , 세팅 되어 있다면 각 컬럼의 길이를 shrinkToFit( ＊ ) 옵션 의 값에 의해 산정

none

rownumbers boolean True 일시 좌측에 1 부터 시작하는 컬럼을 추가 false

toolbar array 첫번째 boolean 은 툴바의 노출 여부 , 두번째 값은 툴바의 위치“top”,”bottom”, “both” 중 하나 선택 .

[false,'']

＊ shrinkToFit : 각 컬럼 의 길이를 width 값을 기준 하여 계산하게 만드는 옵션 . 기본값 true

Basic Grid options(2)Property Type Description default

height mixed Grid 의 높이 . 숫자입력 ( 픽셀 ), 퍼센티지 (100% 로만 가능 ), ‘auto’상기 세가지 경우만 가능

150

multiselect boolean True 일시 다중 선택 가능 . 왼쪽에 새로운 컬럼 (checked) 생성됨true 일시 colModel 의 name 에 rn 을 설정 하지 말것 . 새로운 컬럼 이름이 자동으로 rn 으로 생성되기에 중복이 발생됨

false

footerrow boolean True 일시 grid 와 pager 사이에 footer 테이블이 하나 생성됨 false

userDataOn-Footer

boolean Ajax 응답 결과 userData 의 값이 있고 colModel 의 name 과 동일 할시 footerrow 에 userData 의 값을 뿌려줌

false

gridview boolean 3.4 버전의 jQgrid 는 속도가 늦었지만 3.5 이후는 빨라졌다고함 . 하지만treeGrid, subGrid 와 afterInsertRow event 를 사용하지 않을 시 이 필드를 true 시킨 것만으로 속도를 더욱 향상 시킨다고 함

false

selrow string 읽기 전용 . 마지막 선택한 row 의 id 를 반환 null

selarrrow array-[] multiselect 가 true 일시 선택된 row 의 id 들을 반환 empty array []

hiddengrid boolean True 일시 grid 가 숨김 상태이다 . ( 서버에 요청조차 하지 않음 )Caption 레이어에 있는 show/hide 버튼클릭시 서버에 요청 and grid 노출

false

colModel OptionsProperty Type Description default

align string Cell 에서의 위치 left, center, right 사용가능 left

editable boolean 수정 가능 여부 false

name string 컬럼 에서의 유일한 이름을 설정하여야 함 . 이 값은 필수값 Required

resizable boolean 해당 셀의 Resize 여부 true

width number 해당 셀의 초기화 width , 현재 percentage 는 지원 않함 150

eventEvent Parameters Description

loadComplete xhr 모든 서버 요청 이후 바로 실행됨

loadError xhr,status,error

요청이 실패 했을 시 호출

onSelectRow rowid,status

Row 를 클릭 했을 시 발생rowid: 클릭된 row 의 idStatus: 선택된 상태 . multiselect 가 true 일시 선택되면 true, 선택 해제 시 false. multise-lect 가 false 이면 무조건 true

onCellSelect rowid,iCol, cellcontent,target

Row 의 cell 을 클릭시 발생rowid : 선택된 row 의 idiCol : cell 의 indexCellcontent : cell 의 contenttarget : 클릭한 target 요소

onSelectAll aRowids,status

multiselect 옵션이 true 이면서 header 체크박스를 클릭시aRowids : 선택된 row 의 id 배열status : 선택되면 true, 선택해제되면 false

gridComplete none 그리드에 모든 데이터들이 로드 되고 다른 프로세스 들이 끝난후에 발생함

xhr : XMLHttpRequest object

methodMethod Parame-

tersreturns Description

setSelection rowid,onselectrow

true on suc-cess, false otherwise

row 의 id 가 rowid 와 같으면 선택onselectrow 가 true 이면 (defaullt) onSelectRow 이벤트 발생

trigger(“reloadGrid”)

none jqGrid object 현재 설정된 세팅 으로 리로드함 . 서버에 재 요청을 보냄

getRowData rowid array{} id = rowid 인 row 의 값을 요청 name:value 형식이며name 은 colModel 의 name 과 매칭함

getGridParam name mixed value Basic Grid options 의 property = name 인 값을 반환Name 생략시 Basic Grid options 의 모든 값을 object 배열로 return

getCell rowid, iCol

cell content id = rowid 이며 column = iCol 인 컬럼의 content 를 반환iCol 은 column 의 index 혹은 colModel 의 name

• 참조 사이트– http://www.trirand.com/blog/ jQgrid 사이트– http://www.trirand.com/jqgrid/jqgrid.html jQgrid 데모– http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs jQgrid document