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://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.inputmask/5.0.9/jquery.inputmask.min.js"></script>

<div style='height:500px'><div id='sheetDiv' style='width:100%;height:100%'></div></div>

CSS

a{text-decoration:none;color:#4444FF;}

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 2,
    "HeaderMerge": 3,
    "MessageWidth": 300,
    EditMaskFunc: {
      "sMoney": sMoneyMask,
      "sMoneyResolve": sMoneyResolveMask,
      "sPhone": sPhoneMask,
      "sPhoneResolve": sPhoneResolveMask,
      "sBirth": sBirthMask,
      "sBirthResolve": sBirthResolveMask
    }
  },
  "Def": {
    "Row": {
      "CanFormula": true
    }
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Type": "Int","Width": 50,"Align": "Center","Name": "SEQ"}
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": "이름","Name": "sName","Type": "Text","Width": 80,"Align": "Center"},
    {"Header": "사원번호","Name": "sId","Type": "Text","Width": 80,"Align": "Center","Visible": 0},
    {"Header": "상세보기","Name": "pop","Type": "Button","Width": 80,"Align": "Center","DefaultValue": "확인"},
    {"Header": "선택","Name": "sCheck","Type": "Bool","Width": 80,"Align": "Center"},
    {"Header": "급여","Name": "sMoney","Type": "Int","Format": "#,### 만원","MinWidth": 150,"Align": "Center"},
    {"Header": "전화번호","Name": "sPhone","Type": "Text","CustomFormat": "(###)####-####","MinWidth": 160,"Width": 200,"MaxWidth": 300,"Align": "Center","CanEdit": 1},
    {"Header": "생년월일","Name": "sBirth","Type": "Date","Width": 150,"Align": "Center"},
    {"Header": "우편번호","Name": "sPostNo","Type": "Text","EditMask": "^\\d*$","Size": 6,"CustomFormat": "PostNo","Align": "Center"},
    {"Header": "주소","Name": "sAddr","Type": "Text","Width": 80,"Format": "||[|]","Align": "Center"},
    {"Header": "카드번호","Name": "sCard","Type": "Text","MinWidth": 250,"EditMask": "^\\d*$","CustomFormat": "[General] ####-####-####-####|[ Amex ] ####-######-#####","Size": 16,"Align": "Center"},
    {"Header": "코멘트","Name": "sCustom","Type": "Text","RelWidth": 1}
  ]
},
//시트 이벤트
'event':{
    onRenderFirstFinish: function(evt) {
    	evt.sheet.loadSearchData(ib.data);
    }
},
//시트객체 생성
'create':function () {
    var options = this.init;

    options.Events =...