(JQuery UI Plugin) jqGrid 웹(HTML) GRID 컴포넌트 사용 방법

 

  웹에서 엑셀시트 같은 느낌의 GRID를 사용한는데는 jQuery와 jqGrid 조합이 최적인듯. 

 

jqGrid는 생성하는 방법은 2단계 이다.

 

1단계

   웹페이지에 그리드를 생성하려면, 먼저 그리드 생성을 원하는 위치에

                                                         <Table id="그리드id"></Table> 를 삽입한다.

2단계 

   테이블에 부여한  그리드id를 jQuery Object로 찾아 jqGrid(options) 함수를 실행한다.

 

아래 정리그림 참고. 

 

 

 

  실제 그리드를 렌더링하도록 하는 .jqGrid(options) 함수에서 options는 그리드의 각 컬럼에 대한 설정정보를 지정한다.

3단계  데이터 채우기

 - 데이터를 채우는 방법에는 서버로부터 XML ,JSON 형태로 GET URL 방식으로 내려받아 채울 수 도 있지만,

하이브리드 어플리케이션에 적용하는 경우에는

datatype : 'clientSide' 로 하고  addRowData 함수로 런타임에 데이터를 (비동기로) 채워주는 방식으로 한다.

jQuery("#grid_id").addRowData( rowid, data, position, srcrowid );  

위함수의 파라메터에 대한 설명은

rowid : 해당 ROW에 대한 고유 ID , 추후 데이터 변경, 삭제 등에 사용

data :  실제 그리드에 보여질 데이터  { key1:data1, key2:data2 } 형태가 됨

position : 데이터가 삽입될 위치 ,  "first","last","before","after" 가 사용될 수 있음

srcrowid :  앞서 position 파라메터 값이  before,after일 경우 기준위치의  row 의 id 값

실사용예

jQuery("#first_grid").addRowData( 1, { name:"나길동", no : 1,  telno : "010-1010-2020"});

위 예에서는 position, srcrowid 값이 없기 때문에 순차적으로 위에서 부터 추가 된다.

다양하게 데이터를 내려 받아 채우는 방법에 대한 정리 링크 참고

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data

options에 대한 property 설명 링크

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options

참고 sample 링크

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:first_grid