'html'에 해당되는 글 1건

  1. 2013.02.17 (JQuery UI Plugin) jqGrid 웹(HTML) GRID 컴포넌트 사용 방법
개발2013.02.17 01:11

 

  웹에서 엑셀시트 같은 느낌의 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





 

Posted by 퍼니로거 즐건록