2. 데이터 구조 및 작성 방법에 대하여

2.1 데이터 구조 개요

AUIGrid는 JSON 기반의 1차원 객체 배열 데이터를 기본으로 사용하며, 트리 구조, XML, CSV 형태의 데이터도 가공하여 사용할 수 있습니다.

각 데이터 항목은 한 행(Row)을 나타내며, 객체의 속성명은 그리드 컬럼의 dataField설정 값과 일치해야 합니다.

2.2 JSON 데이터 구조 (기본)

[
  { "id": 1, "name": "홍길동", "product": "iPhone", "price": 1200000 },
  { "id": 2, "name": "김영희", "product": "Galaxy", "price": 950000 }
]

구조 설명

• 배열 형태로 각 객체가 하나의 행(Row)
• 그리드 칼럼 레이아웃에서 정의한 dataField에 해당하는 key 값 사용

AUIGrid 컬럼 레이아웃 설정 예시

// 그리드 칼럼 레이아웃 설정
const columnLayout = [
  { dataField: "id", headerText: "ID" },
  { dataField: "name", headerText: "이름" },
  { dataField: "product", headerText: "제품" },
  { dataField: "price", headerText: "가격", dataType: "numeric" }
];

2.3 XML 데이터 구조

<rows>
  <row>
    <id>1</id>
    <name>홍길동</name>
    <product>iPhone</product>
    <price>1200000</price>
  </row>
  <row>
    <id>2</id>
    <name>김영희</name>
    <product>Galaxy</product>
    <price>950000</price>
  </row>
</rows>

주의사항: AUIGrid는 XML을 직접 처리하지 않으며, 브라우저에서 DOMParser 등으로 JSON 변환 후 사용합니다. 따라서 성능적으로 JSON 이 우수합니다.

2.4 CSV 데이터 구조

id,name,product,price
1,홍길동,iPhone,1200000
2,김영희,Galaxy,950000

주의사항: AUIGrid는 CSV를 문자열 파싱 후 JSON 배열로 변환 후 사용합니다. 따라서 성능적으로 JSON 이 우수합니다.

2.5 트리(Tree)형 JSON 구조

[
  {
    "name": "관리부",
    "manager": "홍길동",
    "children": [
      { "name": "총무팀", "manager": "김철수" },
      { "name": "회계팀", "manager": "이영희" }
    ]
  }
]

참고 사항: AUIGrid에 삽입한 데이터가 children 을 갖는 계층적 데이터 구조(Hierarchical Data Structure)라면 그리드는 따로 설정없이 계층적 구조의 트리 그리드를 출력합니다.

만약 일반 1차원 객체 배열 데이터를 계층적 데이터 구조(Hierarchical Data Structure)로 표현하고자 하는 경우 반드시 3가지 속성을 설정해야 합니다.

트리 뷰 속성 설정 예시

// 그리드 속성 설정
const gridProps = {
    // 일반 데이터를 트리로 표현할지 여부(treeIdField, treeIdRefField 설정 필수)
    flat2tree: true,
    // 트리의 고유 필드명
    treeIdField: "id",
    // 계층 구조에서 내 부모 행의 treeIdField 참고 필드명
    treeIdRefField: "parent"
};

2.6 데이터 유형별 특징 요약

형식	사용 권장도	특징	처리 방식
JSON	매우 우수	AUIGrid 표준 형식	바로 사용 가능
XML	일반	구조 명확, 브라우저 파싱 필요	JSON으로 변환 필요
CSV	일반	단순 구조, 라인 기반	문자열 파싱 필요

2.7 데이터 속성별 주의사항

dataType	설명	정렬 기준	예시
string	문자열	알파벳 순	"홍길동"
numeric	숫자	숫자 크기	1000, 3500
date	날짜	날짜 순서	"2024-01-01"
boolean	참/거짓	false 우선	false, true

💡 TIP: 실시간 연동을 원한다면 JSON 구조를 사용하는 REST API 또는 fetch/ajax를 권장합니다.