Quick Start

IBSheet8을 처음 접하는 개발자가 아무 설정도 없는 상태에서 화면에 시트 하나를 띄우기까지를 순서대로 따라할 수 있도록 정리한 문서입니다.
각 단계를 위에서부터 그대로 따라오면 됩니다.

STEP 0. 제품 파일 준비하기

IBSheet8은 자바스크립트 라이브러리라 별도의 설치 과정 없이, 배포 파일을 웹 경로에 복사해 사용합니다.

STEP 1. HTML에 파일 추가하기

시트를 사용할 HTML 문서에 아래 파일을 추가합니다. 기본 모듈 4개는 필수이고, 선택 모듈(plugins)은 필요한 기능만 골라 넣습니다.

<!----- ibsheet 기본 모듈 ----->
<!-- 디자인 css -->
<link rel="stylesheet" type="text/css" href="ibsheet/css/default/main.css">
<!-- 시트 코어 파일 -->
<script src="ibsheet/ibsheet.js"></script>
<!-- 라이선스 파일 -->
<script src="ibsheet/ibleaders.js"></script>
<!-- 메세지 파일 ko.js 나 en.js 중 하나 추가 -->
<script src="ibsheet/locale/ko.js"></script>


<!----- ibsheet 선택 모듈 ----->
<!-- 엑셀 다운/업로드 관련 모듈 -->
<script src="ibsheet/plugins/ibsheet-excel.js"></script>
<!-- 찾기,상세보기 등 다이얼로그 관련 모듈 -->
<script src="ibsheet/plugins/ibsheet-dialog.js"></script>
<!-- 공통 속성 관련 모듈 -->
<script src="ibsheet/plugins/ibsheet-common.js"></script>

STEP 2. 시트를 그릴 영역(div) 만들기

시트는 단독으로 생성할 수 없습니다. 먼저 시트를 그릴 div 요소를 만들고, 그 div의 id를 시트 생성 시 el 값으로 지정하면 해당 div 안에 시트가 그려집니다.

<!-- 시트가 될 DIV 객체 -->
<div id="sheetDiv" style="width:100%; height:500px;"></div>

STEP 3. 열(Cols) 정의하기

시트에 어떤 열을 보여줄지 options의 Cols에 정의합니다. 각 열에는 Name(데이터 필드명)과 Type(열 종류)을 반드시 지정합니다.

var OPT = {
    //각 열에 대한 정의 (열의 이름, 유형(Type), 포맷(Format) 등을 설정)
    Cols: [
        { Header: "이름",     Name: "sa_nm",        Type: "Text" },
        { Header: "사원번호", Name: "sa_id",        Type: "Text", Align: "center" },
        { Header: "부서",     Name: "sa_dept",      Type: "Enum",
          Enum: "|경영지원|총무|인사|설계|시공1|시공2", EnumKeys: "|01|02|03|04|05|06" },
        { Header: "직급",     Name: "sa_position",  Type: "Enum",
          Enum: "|대표|상무|이사|부장|차장|과장|대리|사원", EnumKeys: "|A1|A2|A3|B0|B1|C4|C5|C6" },
        { Header: "입사일",   Name: "sa_enterdate", Type: "Date", Width: 100, Format: "yyyy/MM/dd" },
        { Header: "비고",     Name: "sa_desc",      Type: "Lines" }
    ]
};

STEP 4. 시트 생성하기 (IBSheet.create)

STEP 2의 div와 STEP 3의 options를 IBSheet.create()에 넘기면 시트가 생성됩니다.
el에는 STEP 2에서 만든 div의 id를 지정합니다.

STEP 1~4를 하나로 합친 전체 HTML은 다음과 같습니다.
이 파일을 그대로 저장해 브라우저에서 열면 시트가 생성됩니다.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <!-- STEP 1. ibsheet 파일 추가 -->
  <link rel="stylesheet" type="text/css" href="ibsheet/css/default/main.css">
  <script src="ibsheet/ibsheet.js"></script>
  <script src="ibsheet/ibleaders.js"></script>
  <script src="ibsheet/locale/ko.js"></script>

  <script>
    // STEP 3~4. 열 정의 + 시트 생성
    function initSheet() {
      var OPT = {
        Cols: [
          { Header: "이름",     Name: "sa_nm",        Type: "Text" },
          { Header: "사원번호", Name: "sa_id",        Type: "Text", Align: "center" },
          { Header: "부서",     Name: "sa_dept",      Type: "Enum",
            Enum: "|경영지원|총무|인사|설계|시공1|시공2", EnumKeys: "|01|02|03|04|05|06" },
          { Header: "직급",     Name: "sa_position",  Type: "Enum",
            Enum: "|대표|상무|이사|부장|차장|과장|대리|사원", EnumKeys: "|A1|A2|A3|B0|B1|C4|C5|C6" },
          { Header: "입사일",   Name: "sa_enterdate", Type: "Date", Width: 100, Format: "yyyy/MM/dd" },
          { Header: "비고",     Name: "sa_desc",      Type: "Lines" }
        ]
      };
      
      IBSheet.create({
        id: "sheet",     // 생성할 시트의 id
        el: "sheetDiv",  // STEP 2에서 만든 div의 id
        options: OPT     // 초기화 구문
      });
    }

    // DOM 로딩이 끝난 뒤 시트 생성
    document.addEventListener("DOMContentLoaded", initSheet);
  </script>
</head>
<body>
  <!-- STEP 2. 시트를 그릴 div -->
  <div id="sheetDiv" style="width:100%; height:500px;"></div>
</body>
</html>

시트생성 [그림] 열 설정이 적용된 시트

STEP 5. 데이터 로드하기

시트에 데이터를 채우는 표준 방법은 조회 함수입니다. 이미 받아둔 json은 loadSearchData(), 서버 url 호출은 doSearch()를 사용합니다.

// 이미 받아둔 json 데이터를 로드
sheet.loadSearchData(rtnData);

// url을 호출해 데이터를 로드
sheet.doSearch("/ex/getPersonData.do", "edate=19950101&position=C1");

시트생성 [그림] 데이터가 로드된 시트

비동기 주의: IBSheet.create()와 조회 함수(loadSearchData/doSearch)는 비동기로 동작합니다.
생성 직후 시트 함수를 바로 호출하면 시트가 아직 완성되지 않아 오류가 날 수 있습니다.
생성 후 실행할 로직(예: 조회)은 onRenderFirstFinish 이벤트에 넣습니다.
화면에 시트가 여러 개이고 모두 준비된 뒤 실행하려면 IBSheet.onRenderFirstFinishAll 정적 콜백을 사용합니다.
이벤트는 options.Events에 등록하고, 콜백 안에서 시트 객체는 evtParam.sheet로 참조합니다.

var OPT = {
    Cols: [ /* ... */ ],
    Events: {
        onRenderFirstFinish: function (evtParam) {
            // 시트가 완성된 후 조회
            evtParam.sheet.doSearch("/ex/getPersonData.do");
        }
    }
};

IBSheet.create의 data 인자로도 생성과 동시에 데이터를 넣을 수 있지만 권장하지 않습니다. 실제 개발에서는 위처럼 조회 함수(loadSearchData / doSearch)로 데이터를 불러옵니다.

// 권장하지 않음 — data 인자로 로드
var DATA = [
    { sa_nm: "홍길동", sa_id: "9821450", sa_dept: "04", sa_position: "B0", sa_enterdate: "19980305", sa_desc: "" },
    { sa_nm: "김한국", sa_id: "9510427", sa_dept: "01", sa_position: "A3", sa_enterdate: "19890317", sa_desc: "" }
];

IBSheet.create({ id: "sheet", el: "sheetDiv", options: OPT, data: DATA });

STEP 6. 시트가 안 보일 때 점검

STEP 7. 자주 쓰는 기능 맛보기

여기까지 하면 화면에 시트가 뜹니다. 이제 자주 쓰는 기본 기능을 살펴봅니다.

행 추가

addRow() 함수로 신규 행을 추가합니다.

// 선택 행 위로 새 행을 추가
sheet.addRow(sheet.getFocusedRow(), 1);

셀 값 확인 / 변경

getValue / setValue로 셀 값을 읽거나 바꿉니다.

// 셀 값 읽기 — 첫 데이터 행의 "sa_nm" 값
var name = sheet.getValue(sheet.getFirstRow(), "sa_nm");

// 셀 값 쓰기 — 100번째 행의 "sa_desc" 변경
sheet.setValue(sheet.getRowByIndex(100), "sa_desc", "임계값 근접 경고!");

글자색 / 배경색 설정

setAttribute()로 특정 셀의 속성을 변경합니다.

// "sa_id" 컬럼의 배경색을 변경
sheet.setAttribute(null, "sa_id", "Color", "#FF0000");

// 마지막 행의 글자색을 변경
sheet.setAttribute(sheet.getLastRow(), null, "TextColor", "#0000FF");

수정된 데이터 추출 / 저장

getSaveJson()으로 수정·추가·삭제된 행을 행 단위 json으로 추출합니다.

var chgData = sheet.getSaveJson();

{
    "data": [
        // 삭제 데이터
        { "id": "AR2", "sa_nm": "...", "STATUS": "Deleted" },
        // 신규 데이터
        { "id": "AR51", "sa_nm": "...", "STATUS": "Added" },
        // 수정 데이터
        { "id": "AR5", "sa_nm": "...", "STATUS": "Changed" }
    ]
}

수정 여부는 hasChangedData()로 확인하고, 서버로 저장·반영까지 한 번에 처리하려면 doSave()를 사용합니다.

행 삭제

// 특정 행을 즉시 삭제
sheet.removeRow(sheet.getFirstRow());

deleteRow()는 행 상태를 Deleted로 바꾸고(저장 시 서버 전송), removeRow()는 시트에서 즉시 제거합니다.

STEP 8. 다음 단계 (더 배우기)

기본 시트를 띄웠다면, 아래 문서로 각 기능을 더 자세히 익힐 수 있습니다.

Read More

Since

product version desc
core 8.0.0.0 기능 추가