AUIGrid 는 JSON 형식과 XML 형식의 데이터를 지원합니다.
아래와 같이 직원 급여 테이블을 출력했을 때 어떻게 AUIGrid 에 맞게 데이터를 작성하는지 본 문서에서 설명하겠습니다.
|
이름(name) |
직급(position) |
근속연수(years) |
연봉(salary) |
|
홍길동 |
과장 |
8년 |
48,000,000 |
|
김대리 |
대리 |
6년 |
38,000,000 |
|
이진리 |
사원 |
3년 |
32,000,000 |
|
최소원 |
사원 |
3년 |
32,000,000 |
|
김말단 |
사원 |
1년 |
28,000,000 |
l JSON
JSON 데이터는 자바스크립트 배열(Array)과 Object 를 문자열로 묶은 표현기법입니다.
배열(Array)은 [] 와 같고 Object 는 {} 과 같습니다.
개별 행이 하나의 Object 가 됩니다. 즉, 위의 테이블에선 총 5명이 있으니 5행(row)가 존재해야 합니다. 이 말은 바로 5개의 Object( {} ) 이 있다는 이야기 입니다.
개발에서 여러 개를 묶는 방법의 기초는 배열로 선언하는 방법입니다.
1행을 선언하면, { “name” : “홍길동”, “position” : “과장”, “years” : “8년”, “salary” : 48000000 } 이 됩니다.
행은 {} 으로 정의하고 그 행에 해당되는 각 칼럼은 key-value 의 해쉬로 정의됩니다.
마찬가지로 2행을 선언하면 { “name” : “김대리”, “position” : “대리”, “years” : “6년”, “salary” : 38000000 } 입니다.
이를 JSON 형식의 전체 소스로 정의하면 다음과 같습니다.
|
[ { "name" : "홍길동", "position" : "과장", "years" : "8년", "salary" : 48000000 }, { "name" : "김대리", "position" : "대리", "years" : "6년", "salary" : 38000000 }, { "name" : "이진리", "position" : "사원", "years" : "3년", "salary" : 32000000 }, { "name" : "최소원", "position" : "사원", "years" : "3년", "salary" : 32000000 }, { "name" : "김말단", "position" : "사원", "years" : "1년", "salary" : 28000000 } ]; |
이 데이터가 곧 JSON 형식의 데이터입니다. 서버 사이드에서 이와 같은 형식의 데이터를 만들어 클라이언트에 응답으로 보내면 됩니다.
클라이언트에서는 JSON 을 parse 하여 자바스크립트 Object 로 만들어 AUIGrid.setGridData( "그리드ID", "data ); 함수로 데이터를 설정할 수 있습니다.
l XML
AUIGrid 는 XML로 데이터를 작성하는 것을 추천하지 않습니다. 많은 양의 데이터를 응답으로 받을 때 전송 용량도 많을 뿐더러 자바스크립트에서 사용하기에 다소 버겁기 때문입니다.
반드시 데이터 건수가 많은 경우에는 JSON 을 사용하십시오.
위 급여 테이블은 AUIGrid 에서 사용할 수 있는 XML 형식으로 작성하면 다음과 같습니다.
|
<rows> <row> <name>홍길동</name> <position>과장</position> <year>8년</year> <salary>48000000</salary> </row> <row> <name>김대리</name> <position>과장대리</position> <year>6년</year> <salary>38000000</salary> </row> <row> <name>이진리</name> <position>사원</position> <year>3년</year> <salary>32000000</salary> </row> <row> <name>최소원</name> <position>사원</position> <year>3년</year> <salary>32000000</salary> </row> <row> <name>김말단</name> <position>사원</position> <year>1년</year> <salary>28000000</salary> </row> </rows>
|
보다 자세한 XML 작성 방법은 http://www.w3.org/standards/xml/ 를 참고하여 작성해주십시오.
현재 운영 중인 시스템의 테이블 및 데이터를 AUIGrid 에 맞추고자 할 때 궁금한 점 있으면 게시판에 남겨주세요. 답변드리도록하겠습니다.