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>

<div class="demo-info">
  <strong>Formula — 셀 값 자동 계산 (string · function 형식)</strong>
  <p>월별 데이터(2024.07~12)를 기반으로 "총계", "평균" 컬럼이 Formula로 자동 계산됩니다.</p>
  <ul>
    <li><strong>총계 (string 형식)</strong>: <code>"n202407+n202408+...+n202412"</code> — 컬럼명을 식에 직접 사용</li>
    <li><strong>평균 (function 형식)</strong>: <code>function(fr){return fr.Row["nSum"]/6}</code> — 다른 컬럼 값 참조</li>
  </ul>
  <em>평균이 총계에 의존하므로 <code>CalcOrder: "nSum,nAvg"</code>로 계산 순서 지정 필요.</em>
</div>

<div style='height:500px'><div id='sheetDiv' style='width:100%;height:100%'></div></div>

CSS

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

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 2,
    "HeaderMerge": 3,
    "DataMerge": 1
  },
  "Def": {
    "Row": {
      CanFormula: true,
      CalcOrder: "nSum,nSumSafe,nAvg"
    }
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Type": "Int","Width": 50,"Align": "Center","Name": "SEQ"},
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": "분야", "Type": "Text", "Name": "sCategory", "Width": 300, "Align": "Center"},
    {"Header": "직업별", "Type": "Text", "Name": "sOccupation", "Width": 250, "Align": "Center"},
    {"Header": "2024.07", "Type": "Int", "Name": "n202407", "Width": 100, "FormulaRow": "Sum"},
    {"Header": "2024.08", "Type": "Int", "Name": "n202408", "Width": 100, "FormulaRow": "Sum"},
    {"Header": "2024.09", "Type": "Int", "Name": "n202409", "Width": 100, "FormulaRow": "Sum"},
    {"Header": "2024.10", "Type": "Int", "Name": "n202410", "Width": 100, "FormulaRow": "Sum"},
    {"Header": "2024.11", "Type": "Int", "Name": "n202411", "Width": 100, "FormulaRow": "Sum"},
    {"Header": "2024.12", "Type": "Int", "Name": "n202412", "Width": 100, "FormulaRow": "Sum"},
    {"Header": "총계", "Type": "Int", "Name": "nSum", "Width": 100, Formula: "n202407+n202408+n202409+n202410+n202411+n202412", "FormulaRow": "총 {Sum}"},
    // function 형식 — 빈 값 안전 처리 (조회 데이터에 "", null, undefined가 섞여 있어도 0으로 변환)
    {"Header": "총계(안전)", "Type": "Int", "Name": "nSumSafe", "Width": 100,
      Formula: function (fr) {
        return (fr.Row["n202407"] || 0) + (fr.Row["n202408"] || 0) + (fr.Row["n202409"] || 0)
             + (fr.Row["n202410"] || 0) + (fr.Row["n202411"] || 0) + (fr.Row["n202412"] || 0);
      }, "FormulaRow": "총 {Sum}"},
    {"Header": "평균", "Type": "Int", "Name": "nAvg", "Width": 100, Formula: function (fr) {return (fr.Row["nSum"]/6)}, "FormulaRow": "평균 {Avg}"}
  ]
},
//시트 이벤트
'event':{
    onRenderFirstFinish: function(evt) {
    	evt.sheet.loadSearchData(ib.data);
    }
},
//시트객체 생성
'create':function () {
    var options =...