3. 간단하게 그리드 생성해 보기(Quick Start)

이 문서는 AUIGrid를 처음 사용하는 개발자를 위한 가장 간단하면서도 완성된 형태의 사용 예제입니다. HTML 구조 작성부터, 그리드 출력, JSON 데이터 로딩까지 순차적으로 작성합니다.

3.1 기본 HTML 구조

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>AUIGrid Quick Start</title>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- AUIGrid 라이센스 파일입니다. 그리드 출력을 위해 꼭 삽입하십시오. -->
  <script src="./AUIGrid/AUIGridLicense.js"></script>
  <!-- AUIGrid 라이브러리 메인 JS -->
  <script src="./AUIGrid/AUIGrid.js"></script>
  <!-- AUIGrid CSS 테마 파일 (원하는 테마로 변경 가능) -->
  <link rel="stylesheet" href="./AUIGrid/AUIGrid_style.css" />

  <script>
    // AUIGrid 생성 후 반환 ID
    let myGridID;

    document.addEventListener("DOMContentLoaded", () => {
      // 칼럼 레이아웃 정의  
      const columnLayout = [
        { dataField: "name", headerText: "Name", width: 140 },
        { dataField: "country", headerText: "Country", width: 120 },
        { dataField: "product", headerText: "Product", width: 120 },
        { dataField: "quantity", headerText: "Quantity" },
        { dataField: "price", headerText: "Price", dataType: "numeric" },
        { dataField: "date", headerText: "Date" }
      ];
      
      // 그리드 속성 설정
      const gridProps = { 
        editable: true
      };

      // 실제로 #grid_wrap 에 그리드 생성
      myGridID = AUIGrid.create("#grid_wrap", columnLayout, gridProps);

      // 그리드 cellClick 이벤트 바인딩
      AUIGrid.bind(myGridID, "cellClick", function(event) {
        console.log(event);
        // 그리드 셀 클릭 시 알림 창
        alert(`${event.type} 이벤트, 클릭한 값: ${event.value}`);
      });

      // 데이터 로딩
      fetch("./data/normal_100.json")
        .then(response => {
          if (!response.ok) throw new Error("HTTP error " + response.status);
          return response.json();
        })
        .then(data => {
          // 그리드에 데이터 JSON 데이터 삽입
          AUIGrid.setGridData(myGridID, data);
        })
        .catch(error => {
          alert("데이터 요청 실패: " + error.message);
        });
    });
  </script>
</head>
<body>
  <h1>AUIGrid Quick Start</h1>
  <!-- 에이유아이 그리드가 이곳에 생성됩니다. -->
  <div id="grid_wrap" style="width:800px; height:480px;"></div>
</body>
</html>

3.2 주요 요소 설명

구성	설명
`AUIGridLicense.js`	AUIGrid 라이선스 등록 파일 (필수)
`AUIGrid.js`	AUIGrid 라이브러리 메인 파일 (필수)
`AUIGrid_style.css`	AUIGrid 테마 CSS 파일 (원하는 테마가 있을 때 해당 파일로 변경 가능) (필수)
`columnLayout`	그리드 컬럼 레이아웃 정의 배열 (필수). 구체적 칼럼 작성에 대한 내용은 여기 문서를 클릭하세요.
`gridProps`	그리드 속성 정의 객체 (선택). 자세한 속성에 대한 내용은 여기 문서를 클릭하세요.
`AUIGrid.setGridData()`	그리드 데이터 삽입 메소드 (필수). 구체적 메소드에 대한 내용은 여기 문서를 클릭하세요.
`AUIGrid.bind()`	그리드 이벤트 정의 바인딩 메소드 (선택). 구체적 이벤트에 대한 내용은 여기 문서를 클릭하세요.
`AUIGrid.create()`	실제 그리드 생성 함수 (필수)
`fetch().then()`	외부 JSON 파일로부터 비동기 데이터 로딩

3.3 생성 완료 후 판단

단일 HTML 파일로 빠르게 테스트 가능
외부 프레임워크 없이 기본적인 AUIGrid 실행 확인
JSON 데이터는 ./data/normal_100.json에 존재해야 함

3.4 설치 후 테스트

위 HTML 파일을 브라우저로 열어 결과 화면을 확인하세요. 에러 없이 그리드가 나타나면 성공입니다.

3.5 최종 확인 라이브 샘플

다음 링크에서 확인 가능합니다.

https://www.auisoft.net/blog/auigrid/quick_start.html

⚠️ 주의: 이 예제는 복사하여 바로 실행할 수 있는 구조이지만, fetch 경로에 맞는 JSON 파일이 반드시 존재해야 합니다.