퍼니로그

  웹에서 엑셀시트 같은 느낌의 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 함수로 런타임에 데이터를 (비동기로) 채워주는 방식으로 한다.

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

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

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

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

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

실사용예

위 예에서는 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