IB Sheet 8 Examples

트리 사용

HTML

<link rel="stylesheet" href="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/css/style.css">
<!-- ibsheet css -->
<link rel="stylesheet" href="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/css/default/main.css"/>
<link rel="stylesheet" href="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/css/compatible/light/main.css"/>

<!--  ibsheet 필수 js -->
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/ibleaders.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/ibsheet.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/locale/ko.js"></script>

<!--  ibsheet 선택/추가 js -->
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-common.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-dialog.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-excel.js"></script>

<div class='ibsheet-wrap' id='descFunc'></div>
<b>[레벨별 합계 구하기]</b><br>
- 컬럼 순서대로 합계, 평균, 갯수, 최대값, 최소값, 삭제행 제외 합계 계산, 평균 컬럼 null 값 제외<br>
- '합계'컬럼과 '합계(삭제제외)'컬럼을 비교했을 때, '합계'컬럼은 <b>삭제</b> 포함하여 계산하고, '합계(삭제제외)'컬럼은 <b>삭제</b>를 제외하고 계산한다.<br>
- '평균'컬럼과 '평균(Null제외)'컬럼을 비교했을 때, '평균'컬럼은 <b>Null</b>데이터를 포함하여 계산하고, '평균(Null제외)'컬럼은 <b>Null</b> 데이터를 제외하여 계산한다.
<div style='height:calc(100% - 222px)'><div id='sheetDiv' style='width:100%;height:100%'></div></div>

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  "Def": {
    "Row": {
      "CanFormula": 1,
      "CalcOrder": "TreeSumCols,TreeAvgCols,TreeCountCols,TreeMaxCols,TreeMinCols,TreeSumEx,TreeExceptNull,Total"
    }
  },
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 0,
    "MainCol": "Tree",
    "Export": {
      "Url": "/jsp/"
    }
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Type": "Int","Width": 60,"Align": "Center","Name": "SEQ"},
    {"Header": "삭제","Name": "DELCHK","Extend":IB_Preset.DelCheck}
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": "트리","Type": "Text","Name": "Tree","MinWidth": "100","Align": "Left","CanEdit": 1},
    {"Header": "합계","Type": "Int","Name": "TreeSumCols","Width": "80","Align": "Right","CanEdit": 1, "Formula": IB_Preset.TreeSumFormula},
    {"Header": "평균","Type": "Int","Name": "TreeAvgCols","Width": "80","Align": "Right","CanEdit": 1,"Formula": IB_Preset.TreeAvgFormula},
    {"Header": "갯수","Type": "Int","Name": "TreeCountCols","Width": "80","Align": "Right","CanEdit": 1,"Formula": IB_Preset.TreeCountFormula},
    {"Header": "최대값","Type": "Int","Name": "TreeMaxCols","Width": "80","Align": "Right","CanEdit": 1,"Formula": IB_Preset.TreeMaxFormula},
    {"Header": "최소값","Type": "Int","Name": "TreeMinCols","Width": "80","Align": "Right","CanEdit": 1,"Formula": IB_Preset.TreeMinFormula},
    {"Header": "합계(삭제제외)","Type": "Int","Name": "TreeSumEx","Width": "120","Align": "Right","CanEdit": 1,"Formula": TreeSumExFormula},
    {"Header": "평균(Null제외)","Type": "Int","Name": "TreeExceptNull","Width": "120","Align": "Right","CanEdit": 1,"Formula": TreeExceptNullFormula, Format:"#,###"},
    {"Header": "합계*갯수","Type": "Int","Name": "Total","Width": "120","Align": "Right","CanEdit": 1,"Formula": TotalFormula}
  ]
},
//시트 이벤트
'event':{
    onBeforeExpand:function (evtParam) {
      console.log(evtParam.eventName + ':' + evtParam.row.HasIndex);
    }
},
//시트객체 생성
'create':function () {
    var options = this.init;

    options.Events = this.event;
   ...