웹에서 엑셀시트 같은 느낌의 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
'jqGrid > 소스코드' 카테고리의 다른 글
[jQuery] jqGrid - loadColplete 옵션을 이용한 특정 Row Color 변경하기 (0) | 2015.10.22 |
---|---|
jQgrid의 지정한 칼럼, 지정한 열을 다른색으로 지정하기 (0) | 2015.10.22 |
창크기에 따라 jqgrid width 조정하기 (0) | 2015.10.16 |
jqgrid 자주 쓰는 것들 (0) | 2015.09.24 |
Jqgrid ROW에 BOLD 적용 (0) | 2015.09.24 |
jqGrid - Step2) local에서 임시데이터로 Display Test (0) | 2015.05.29 |
jqGrid - Step1) jquery와 jqgrid Plugin의 다운로드와 include (0) | 2015.05.29 |
44] 플로그인 jqGrid + mysql 데이터 검색/추가/삭제/수정 구현예제 (1) | 2014.08.19 |