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><b>Ymd</b>, <b>Ym</b>, <b>Md</b>,  헤더를 이동시 년월일 밖으로 이동하지 못한다.<br/>
<b>회사명</b>, 컬럼을 년월일 컬럼 사이로 이동하지 못한다.<br/>
</div>

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

CSS

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

JavaScript

var samplePageObj = samplePageObj||{};
samplePageObj = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 0,
    "HeaderMerge": 3,
    "CanColMove":2, 
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Header": ["No","No"],"Type": "Int","Width": 50,"Align": "Center","Name": "SEQ","CanMove": 0,"CanFocus": 0}
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": ["회사명","회사명"],"Type": "Text","Name": "sCorp","Width": "100","Align": "Center","CanEdit": 1},
    {"Header": ["사원수","사원수"],"Type": "Int","Name": "sPerson","Width": "80","Align": "Right","CanEdit": 1},
    {"Header": ["년월일","Ymd"],"Name": "sDate_Ymd","Extend": {"Type": "Date","Align": "Center","Width": 110,"Format": "yyyy/MM/dd","DataFormat": "yyyyMMdd","EditFormat": "yyyyMMdd","Size": 8,"EmptyValue": "<span style='color:#AAA'>년,월,일 순으로 숫자만 입력해 주세요.</span>"},"Width": 110},
    {"Header": ["년월일","Ym"],"Name": "sDate_Ym","Extend": {"Type": "Date","Align": "Center","Width": 80,"Format": "yyyy/MM","DataFormat": "yyyyMM","EditFormat": "yyyyMM","Size": 6,"EmptyValue": "<span style='color:#AAA'>년,월 순으로 숫자만 입력해 주세요.</span>"},"Width": 90},
    {"Header": ["년월일","Md"],"Name": "sDate_Md","Extend": {"Type": "Date","Align": "Center","Width": 60,"Format": "MM/dd","EditFormat": "MMdd","DataFormat": "MMdd","Size": 4,"EmptyValue": "<span style='color:#AAA'>월,일 순으로 숫자만 입력해 주세요.</span>"},"Width": 90},
    {"Header": ["시분초","Hms"],"Name": "sDate_Hms","TimePicker": 1,"Extend": {"Type": "Date","Align": "Center","Width": 70,"Format": "HH:mm:ss","EditFormat": "HHmmss","DataFormat": "HHmmss","Size": 8,"EmptyValue": "<span style='color:#AAA'>시,분,초 순으로 8개 숫자만 입력해 주세요.</span>"},"Width": 100},
    {"Header": ["시분초","Hm"],"Name": "sDate_Hm","TimePicker": 1,"Extend": {"Type": "Date","Align": "Center","Width": 70,"Format": "HH:mm","EditFormat": "HHmm","DataFormat": "HHmm","Size": 6,"EmptyValue": "<span style='color:#AAA'>시,분 순으로 4개 숫자만 입력해 주세요.</span>"},"Width": 90},
    
  ]
},
//시트 이벤트
'event':{
    onRenderFirstFinish:function...