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 -->
<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'><div><label>내려받을 파일명:</label><input type='text' class='mgr10' id='filename' style='width:280px'></div><div><button type='button' class='mgr10' onclick='samplePageObj.sampleBtn(this)'>down2Excel</button><button type='button' class='mgr10' onclick='samplePageObj.sampleBtn(this)'>loadExcel</button></div></div>


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

JavaScript

var samplePageObj = samplePageObj||{};
samplePageObj = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 0,
    "HeaderMerge": 6,
    "FitWidth": 1,
    "Export": {
      "Url": "https://api.ibsheet.com/ibsheet/v8/"
    }
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Header": ["No","No"],"Type": "Int","Width": 50,"Align": "Center","Name": "SEQ","CanMove": 0,"CanFocus": 0}
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": ["신청인","신청인"],"Type": "Text","MinWidth": 80,"Name": "sName","Align": "Center"},
    {"Header": ["선택","선택"],"Type": "Bool","MinWidth": 80,"Name": "check"},
    {"Header": ["신청사유","신청사유"],"Type": "Enum","MinWidth": 80,"Name": "Reason","ColMerge": 0,"Align": "Center","Enum": "|야근|주말특근|휴일특근","EnumKeys": "|01|02|03"},
    {"Header": ["신청금액","신청금액"],"Type": "Int","MinWidth": 125,"Name": "Qty","Required": 1},
    {"Header": ["근태기간","시작일"],"Name": "Date1","Extend": IB_Preset.YMD},
    {"Header": ["근태기간","종료일"],"Name": "Date2","Extend": IB_Preset.YMD},
    {"Header": ["시간","시작"],"Name": "Time1","Extend": IB_Preset.HM,"Width": 100,"TimePicker": 1},
    {"Header": ["시간","종료"],"Name": "Time2","Extend": IB_Preset.HM,"Width": 100,"TimePicker": 1}
  ]
},
//시트 이벤트
'event':{
    onRenderFirstFinish:function (evtParam) {
      //create 함수는 비동기로 동작하므로 생성 직후 동작은 여기서 진행
      var sheet = evtParam.sheet;
      sheet.loadSearchData(samplePageObj.data);
    },
    onBeforeExport:function (evtParam) {
      console.log(evtParam.eventName + ' 발생');
    },
    onExportFinish:function (evtParam) {
      console.log(evtParam.eventName + ' 발생');
    }
},
//시트객체 생성
'create':function () {
    document.getElementById('filename').value = IBSheet.dateToString(new Date(), 'yyyy-MM-dd HH:mm') + '_IBSheet엑셀 예제_비밀번호설정';
    var options = this.init;

    options.Events = this.event;
    IBSheet.create({
      id: 'sheet', // 생성할 시트의 id
      el: 'sheetDiv', // 시트를 생성할 Dom 객체 및 id
      options: options // 생성될 시트의 속성
    });
    sheet.Name = '엑셀다운로드 예제';
  },
//화면...