1. 관련 파일 import 하기

아래와 같이 기본적인 js,css 파일을 import 합니다.

<!----- ibsheet 기본 모듈 ----->
<!-- 디자인 css -->
<link rel="stylesheet" type="text/css" href="ibsheet/css/default/main.css">
<!-- IBSheet8 코어 파일 -->
<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-common.js"></script>
<!-- 엑셀 다운/업로드 관련 모듈 -->
<script src="ibsheet/plugins/ibsheet-excel.js"></script>
<!-- 찾기, 다운로드, 편집 등 각종 다이얼로그 기능을 정의한 파일 -->
<script src="ibsheet/plugins/ibsheet-dialog.js"></script>

<!-- IE9 이하 브라우져 전용 css -->
<link rel="stylesheet" type="text/css" href="ibsheet/css/compatible/light/main.css">

<body>
   <!-- 시트 생성 div 객체  (너비,높이 설정 주의) -->
   <div id="sheetDiv" style="width:100%;height:300px"></div>
</body>

2. IBSheet8 객체 생성 및 초기화 하기


IBSheet.create() 함수를 통해 IBSheet8 객체를 생성합니다.

function PageLoad() {
  //IBSheet8 객체 초기화 속성 설정
  var OPT = {
    // 기본 기능 설정
    Cfg:{
      SearchMode: 0, // FastLoad
      HeaderMerge: 3, //헤더 영역 머지 모드 선택
    },
    //각 열(Column)에 대한 정의 (이름, 유형(Type), 포맷(Format)등을 설정)
    //열(Color)의 "Type"과 "Name" 속성은 반드시 설정되어야 합니다.
    Cols:[
      {Header: "ID", Name: "userid", Type: "Text", Align: "center", CanEdit: 0},
      {Header: "사용자 이름", Name: "userNm", Type: "Text", Align: "center"},
      {Header: "성별", Name: "gender", Type: "Enum", Enum:"|남|녀", EnumKeys:"|M|F"},
      {Header: "입사일", Name: "edate", Extend:IB_Preset.Ymd },
      {Header: "나이", Name: "age", Type: "Int", Format: "#,### 세"}
    ],
    Events: {
      //시트가 생성되어 렌더링 된 이후, 한 번만 동작하는 이벤트에서 데이터 조회
      //다중으로 시트 생성 시에는 모든 시트가 생성 된 후 한 번만 동작하는 이벤트인
      //onRenderFirstFinishAll를 이용하여 데이터를 조회하여 주십시오.
      onRenderFirstFinish: function(evtParam) {
        //조회 api로는 loadSearchData와 doSearch, doSearchPaging이 있습니다.
        evtParam.sheet.loadSearchData(
          [
            {userid:"2170022", userNm:"홍길동", gender:"M", edate:"20010302", age:48},
            {userid:"981065", userNm:"허심청", gender:"F", edate:"20010302", age:23},
          ]
        );
      }
    }
  };

  // IBSheet8 객체 생성
  IBSheet.create({
    id: "sheet",        // 시트 객체 ID
    el: "sheetDiv",     // 시트를 생성할 DIV객체 ID
    options: OPT       // 초기화 구문 변수
  });
}

생성된 IBSheet8 객체 모습



SEE ALSO


객체 생성과 초기화
교육 동영상


각 열(Column) 별 타입(Type) 관련 참고

IBSheet8 Appendix Type