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>


<!--  외부 라이브러리 추가 -->
<script src="https://unpkg.com/xlsx-populate/browser/xlsx-populate.js"></script>

<div><button type='button' class='mgr10' onclick='ib.sampleBtn(this)'>exportData</button><button type='button' class='mgr10' onclick='ib.sampleBtn(this)'>importData</button></div></div>


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

JavaScript

var securedBlob = null;
var ib = ib || {}
ib = {
  //시트 초기화 구문
  'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 0,
    "HeaderMerge": 6,
    "FitWidth": 1
  },
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": ["신청인","신청인"],"Type": "Text","MinWidth": 80,"Name": "sName","ColMerge": 1},
    {"Header": ["선택","선택"],"Type": "Bool","MinWidth": 80,"Name": "check","ColMerge": 1},
    {"Header": ["신청사유","신청사유"],"Type": "Enum","MinWidth": 80,"Name": "Reason","ColMerge": 0,"Align": "Center","Enum": "|야근|주말특근|휴일특근","EnumKeys": "|01|02|03"},
    {"Header": ["신청금액","신청금액"],"Type": "Int","MinWidth": 85,"Name": "Qty","ColMerge": 1,"Required": 1},
    {"Header": ["근태기간","시작일"],"Name": "Date1","Extend": {"Type": "Date","Align": "Center","Width": 110,"Format": "yyyy/MM/dd","DataFormat": "yyyyMMdd","EditFormat": "yyyyMMdd","Size": 8,"EmptyValue": "<span style='color:#AAA'>년,월,일 순으로 숫자만 입력해 주세요.</span>"}},
    {"Header": ["근태기간","종료일"],"Name": "Date2","Extend": {"Type": "Date","Align": "Center","Width": 110,"Format": "yyyy/MM/dd","DataFormat": "yyyyMMdd","EditFormat": "yyyyMMdd","Size": 8,"EmptyValue": "<span style='color:#AAA'>년,월,일 순으로 숫자만 입력해 주세요.</span>"}},
    {"Header": ["시간","시작"],"Name": "Time1","Extend": {"Type": "Date","Align": "Center","Width": 70,"Format": "HH:mm","EditFormat": "HHmm","DataFormat": "HHmm","Size": 6,"EmptyValue": "<span style='color:#AAA'>시,분 순으로 4개 숫자만 입력해 주세요.</span>"}},
    {"Header": ["시간","종료"],"Name": "Time2","Extend": {"Type": "Date","Align": "Center","Width": 70,"Format": "HH:mm","EditFormat": "HHmm","DataFormat": "HHmm","Size": 6,"EmptyValue": "<span style='color:#AAA'>시,분 순으로 4개 숫자만 입력해 주세요.</span>"}},
    {"Header": ["rDate","rDate"],"Name": "rDate","Extend": {"Type": "Date","Align": "Center","Width": 110,"Format": "yyyy/MM/dd","DataFormat": "yyyyMMdd","EditFormat": "yyyyMMdd","Size": 8,"EmptyValue": "<span style='color:#AAA'>년,월,일 순으로 숫자만 입력해 주세요.</span>"},"Visible": 0},
    {"Header": ["chk","chk"],"Name": "chk","Type": "Bool","Visible": 0}
 ...