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

jqGrid/소스코드

nineDeveloper 2015. 5. 29. 13:46

728x90

웹에서 엑셀시트 같은 느낌의 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 값이 없기 때문에 순차적으로 위에서 부터 추가 된다.

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

options에 대한 property 설명 링크

참고 sample 링크

728x90