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>

<!--  ibsheet 선택/추가 js (IB_Preset 트리 프리셋 사용을 위해 common 플러그인 필요) -->
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/ibsheet-common.js"></script>

<div class="demo-info">
  <strong>Formula — Tree 구조 집계 (부서별 실적)</strong>
  <p>트리 시트에서 부모 행 값을 자식 행 값으로 자동 집계합니다. leaf 행은 사용자 입력, 부모 행은 Formula로 자동 계산.</p>
  <ul>
    <li><strong>IB_Preset</strong>: <code>TreeSumFormula</code>, <code>TreeAvgFormula</code>, <code>TreeCountFormula</code>, <code>TreeMaxFormula</code> (ibsheet-common.js 제공)</li>
    <li><strong>커스텀 Formula</strong>: 삭제행 제외 합계, null 제외 평균, 매출×인원 곱셈 합계 — Row 객체 속성(<code>childNodes</code>, <code>firstChild</code>, <code>nextSibling</code>, <code>Deleted</code>) 활용</li>
  </ul>
</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': {
    "Def": {
      "Row": {
        // Formula 동작을 위해 CanFormula 필수
        "CanFormula": 1,
        // Formula 적용 컬럼 계산 순서 (띄어쓰기 없이 ',' 로 연결)
        "CalcOrder": "Sales,SalesAvg,Headcount,TeamCount,ScoreMax,ActiveSales,ScoreAvg,Revenue"
      }
    },
    "Cfg": {
      "SearchMode": 0,
      "MainCol": "Department"
    },
    "LeftCols": [
      {"Type": "Int", "Width": 50, "Align": "Center", "Name": "SEQ"},
      {"Header": "삭제", "Name": "DELCHK", "Extend": IB_Preset.DelCheck}
    ],
    "Cols": [
      {"Header": "조직", "Type": "Text", "Name": "Department", "MinWidth": 140, "Align": "Left", "CanEdit": 1},

      // IB_Preset 트리 프리셋 사용 (ibsheet-common.js 필요)
      {"Header": "매출", "Type": "Int", "Name": "Sales", "Width": 90, "Align": "Right", "CanEdit": 1, "Format": "#,##0", "Formula": IB_Preset.TreeSumFormula},
      {"Header": "평균매출", "Type": "Int", "Name": "SalesAvg", "Width": 90, "Align": "Right", "CanEdit": 1, "Format": "#,##0", "Formula": IB_Preset.TreeAvgFormula},
      {"Header": "팀원", "Type": "Int", "Name": "Headcount", "Width": 70, "Align": "Right", "CanEdit": 1, "Formula": IB_Preset.TreeSumFormula},
      {"Header": "팀수", "Type": "Int", "Name": "TeamCount", "Width": 70, "Align": "Right", "CanEdit": 1, "Formula": IB_Preset.TreeCountFormula},
      {"Header": "최고점수", "Type": "Int", "Name": "ScoreMax", "Width": 80, "Align": "Right", "CanEdit": 1, "Formula": IB_Preset.TreeMaxFormula},

      // 커스텀 트리 Formula
      {"Header": "활성매출(삭제제외)", "Type": "Int", "Name": "ActiveSales", "Width": 140, "Align": "Right", "CanEdit": 1, "Format": "#,##0", "Formula": TreeSumExFormula},
      {"Header": "평균점수(null제외)", "Type": "Int", "Name": "ScoreAvg", "Width": 140, "Align": "Right", "CanEdit": 1, "Format": "#,###", "Formula": TreeExceptNullFormula},
      {"Header": "매출×인원", "Type": "Int", "Name": "Revenue", "Width": 110, "Align": "Right", "CanEdit": 1, "Format": "#,##0", "Formula": TotalFormula}
    ]
  },
  // 시트...