IBSheet8 Manual Sample

author(s): IBSheet

HTML

<!-- ibsheet css -->
<link rel="stylesheet" href="https://www.ibsheet.com/v8/assets/lib/ibsheet/css/default/main.css"/>
<!--  ibsheet 필수 js -->
<script src="https://www.ibsheet.com/v8/assets/lib/iblicense.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/ibsheet.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/locale/ko.js"></script>

<!-- 시트 크기를 인라인 style이 아니라 CSS class(.ucsSheetBox)로 지정.
     Cfg.UseClassStyle:1 이므로 이 class의 width/height가 시트 크기로 적용된다. -->
<div id='sheetDiv' class='ucsSheetBox'></div>

CSS

a{text-decoration:none;color:#4444FF;}

/* 시트 크기를 인라인 style이 아닌 class로 지정.
   UseClassStyle:1 이면 이 width/height가 시트에 반영된다(0이면 무시되고 기본 800px). */
.ucsSheetBox{ width:100%; height:300px; }

JavaScript

var ib = ib || {};
ib = {
  //시트 초기화 구문
  'init': {
    "Cfg": {
      "SearchMode": 2,
      "HeaderCheck": 0,
      "IgnoreFocused": 1,
      "UseClassStyle": 1      // 시트 div에 인라인 style이 없으면 class(.ucsSheetBox)의 width/height를 크기로 사용
    },
    "Cols": [
      { "Header": "수량 (qt)",  "Name": "qt",  "Type": "Int", "FormulaRow": "Sum",           "RelWidth": 1, "Align": "Right" },
      { "Header": "금액 (amt)", "Name": "amt", "Type": "Int", "FormulaRow": "합계 {Sum} 원",  "RelWidth": 1, "Align": "Right" }
    ]
  },
  //시트 이벤트
  'event': {
    onRenderFirstFinish: function (evt) {
      evt.sheet.loadSearchData(ib.data);
    }
  },
  //시트 생성
  'create': function () {
    this.init.Events = this.event;
    IBSheet.create({ id: "sheet", el: "sheetDiv", options: this.init });
  },
  //조회 데이터
  'data': [
    { "qt": 10, "amt": 5000 },
    { "qt": 20, "amt": 3000 },
    { "qt": 15, "amt": 8000 }
  ]
};
ib.create();