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'><button onclick='ib.sampleBtn(this)' class='mgr10'>단일 컬럼 소계</button> <button onclick='ib.sampleBtn(this)' class='mgr10'>단일 컬럼 소계/누계</button><hr/> <button onclick='ib.sampleBtn(this)' class='mgr10'>다중 컬럼 소계</button> <button onclick='ib.sampleBtn(this)' class='mgr10'>다중 컬럼 소계/누계</button><hr/> <button onclick='ib.sampleBtn(this)' class='mgr10'>소계행 삭제</button></div>


<div style='height:calc(100% - 108px)'><div id='sheetDiv' style='width:100%;height:100%'></div></div>

CSS

a{text-decoration:none;color:#4444FF;}
.subSumClass{background:red !important; color: yellow;}

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  "Def": {
    "Col": {
      "Spanned": 1
    },
    "Row": {
      "CanFormula": 1,
      "Spanned": 1
    },
    "SubSum": { //소계행의 배경색등을 지정, 누계까지 포함된다.
         "Color" : "red",
         "TextColor": "#0000FF",
          "TextFont": "Dotum",
         // "Class": "subSumClass" // Class만든 후 class명으로 호출도 가능
      }
  },
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 0,
    "SuppressMessage": 3,
    "DataMerge": 3,
    "SelectionSummary": {
      "Mode": "DelRow",
      "Width": 400
    },
    "InfoRowConfig": {
      "Visible": 1,
      "Layout": [
        "SummaryLabel",
        "Count"
      ],
      "Space": "Top"
    }
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": "정책 사업","Name": "sPolicy","Type": "Text","MinWidth": 150,"RelWidth": 1},
    {"Header": "단위 사업","Name": "sUnit","Type": "Text","MinWidth": 150,"RelWidth": 1},
    {"Header": "세부사업","Name": "sDetail","Type": "Text","MinWidth": 150,"RelWidth": 1},
    {"Header": "A","Name": "A","Type": "Int"},
    {"Header": "B","Name": "B","Type": "Int"},
    {"Header": "C","Name": "C","Type": "Int"},
    {"Header": "D","Name": "D","Type": "Int"},
    {"Header": "E","Name": "E","Type": "Int"},
    {"Header": "F","Name": "F","Type": "Int","Formula": "E + 10"}
  ]
},
//시트 이벤트
'event':{

},
//시트객체 생성
'create':function () {
    var options = this.init;

    options.Events = this.event;
    IBSheet.create({
      id: 'sheet', // 생성할 시트의 id
      el: 'sheetDiv', // 시트를 생성할 Dom 객체 및 id
      options: options, // 생성될 시트의 속성
      data: this.data // 생성될 시트의 정적데이터
    });
  },
//화면 기능
'sampleBtn':function () {
    switch (arguments[0].innerText) {
      case '단일 컬럼 소계':
        sheet.makeSubTotal([
          {
            stdCol: 'sPolicy',
            sumCols: 'A|B|C|D',
            position: 'bottom',
            captionCol: [
              {
                col: 'sPolicy',
                val: '%s: %col',
                cumVal: '%s: %col',
   ...