7
jqGrid 작작작 : 작작작작 작작작 : [email protected] 작작작작 : http://run2you.tistory.com

jqGrid

  • Upload
    barb

  • View
    74

  • Download
    0

Embed Size (px)

DESCRIPTION

jqGrid. 작성자 : 멋진인생 이메일 : [email protected] 홈페이지 : http://run2you.tistory.com. Basic Grid options(1). * shrinkToFit : 각 컬럼 의 길이를 width 값을 기준 하여 계산하게 만드 는 옵션 . 기본값 true. Basic Grid options(2). colModel Options. event. xhr : XMLHttpRequest object. method. 참조 사이트 - PowerPoint PPT Presentation

Citation preview

Page 1: jqGrid

jqGrid작성자 : 멋진인생

이메일 : [email protected]홈페이지 : http://run2you.tistory.com

Page 2: jqGrid

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

Page 3: jqGrid

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

Page 4: jqGrid

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

Page 5: jqGrid

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

Page 6: jqGrid

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

Page 7: jqGrid

• 참조 사이트– 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