IBSheet8 Manual Sample

author(s): IBSheet

HTML

<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 -->
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/ibsheet-common.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/ibsheet-dialog.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/ibsheet-excel.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/jszip.min.js"></script>


<div class='ibsheet-wrap' id='descFunc'>
  다이얼로그 없이 makePivotTable로 직접 피벗 시트를 생성합니다.
  <div>
    <button type='button' class='mgr10' onclick='samplePageObj.sampleBtn(this)'>① 단순 합계 (열 없음)</button>
    <button type='button' class='mgr10' onclick='samplePageObj.sampleBtn(this)'>② 부서×직급 교차표</button>
    <button type='button' class='mgr10' onclick='samplePageObj.sampleBtn(this)'>③ Sum + Count</button>
    <button type='button' class='mgr10' onclick='samplePageObj.sampleBtn(this)'>④ 콜백 후처리</button>
    <button type='button' class='mgr10' onclick='samplePageObj.sampleBtn(this)'>⑤ 행 합계 숨김</button>
    <button type='button' class='mgr10' onclick='samplePageObj.sampleBtn(this)'>원본으로 돌아가기</button>
  </div>
</div>

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

JavaScript

var samplePageObj = {
  //시트 초기화
  'init': {
    "Def": {
      "Col": { "Align": "Center", "RelWidth": 1 }
    },
    "Cfg": {
      "CanSort": 1,
      "CanEdit": 0,
      "InfoRowConfig": { "Visible": 1, "Layout": ["Count"] }
    },
    "LeftCols": [
      {"Header": "No", "Type": "Int", "Width": 50, "Align": "Center", "Name": "SEQ", "RelWidth": 0, "CanMove": 0, "CanFocus": 0}
    ],
    "Cols": [
      {"Header": "부서명",     "Type": "Text", "Name": "sDept"},
      {"Header": "팀명",       "Type": "Text", "Name": "sTeam"},
      {"Header": "직급",       "Type": "Text", "Name": "sPosition"},
      {"Header": "성명",       "Type": "Text", "Name": "sName"},
      {"Header": "성별",       "Type": "Enum", "Name": "sGender",    "Enum": "|男|女|기타", "EnumKeys": "|男|女|기타"},
      {"Header": "연령대",     "Type": "Enum", "Name": "sAgeRanges", "Enum": "|10대|20대|30대|40대|50대|60대", "EnumKeys": "|10대|20대|30대|40대|50대|60대"},
      {"Header": "거주지",     "Type": "Text", "Name": "sAddr"},
      {"Header": "나이",       "Type": "Int",  "Name": "sAge",    "Align": "Right"},
      {"Header": "근속(년)",   "Type": "Int",  "Name": "sPeriod", "Align": "Right"},
      {"Header": "급여",       "Type": "Int",  "Name": "sSalary", "Align": "Right", "Format": "#,###"},
      {"Header": "상여",       "Type": "Int",  "Name": "sBonus",  "Align": "Right", "Format": "#,###"}
    ]
  },

  'event': {
    onRenderFirstFinish: function (evtParam) {
      // 시트 생성 직후 데이터 로드
      evtParam.sheet.loadSearchData(samplePageObj.data);
    }
  },

  'create': function () {
    var options = this.init;
    options.Events = this.event;
    IBSheet.create({
      id: 'sheet',
      el: 'sheetDiv',
      options: options
    });
  },

  //=====================================================================
  // ★ 피봇 테이블 바로 생성 ★ (다이얼로그 없이 makePivotTable로 직접 호출)
  //=====================================================================
  'makePivot': function () {
    // criterias: 피봇 대상에 사용 가능한 컬럼 목록 (선택)
    var criterias = {
     ...