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="doFix">
헤더 병합 조건
<select id="hSel" class="sel">
    <option value="0" selected>0 (병합 안함)</option>
    <option value="1">1 (열 기준 병합)</option>
    <option value="2">2 (행 기준 병합)</option>
    <option value="3">3 (열 우선 병합)</option>
    <option value="4">4 (행 우선 병합)</option>
    <option value="5">5 (열 우선 사방 병합)</option>
    <option value="6">6 (행 우선 사방 병합)</option>
</select>
<br>
데이터 병합 조건
<select id="dSel" class="sel">
    <option value="0" selected>0 (병합 안함)</option>
    <option value="1">1 (열 기준 병합)</option>
    <option value="2">2 (행 기준 병합)</option>
    <option value="3">3 (열 우선 병합)</option>
    <option value="4">4 (행 우선 병합)</option>
    <option value="5">5 (열 우선 사방 병합)</option>
    <option value="6">6 (행 우선 사방 병합)</option>
</select>
<br>
앞컬럼 기준 병합 조건
<select id="pSel" class="sel">
    <option value="0" selected>0 (전체영역에 앞컬럼 기준 병합 안함함)</option>
    <option value="1">1 (데이터 영역에만 앞컬럼 기준 병합)</option>
    <option value="2">2 (헤더 영역에만 앞컬럼 기준 병합)</option>
    <option value="3">3 (헤더 및 데이터 영역에 앞컬럼 기준 병합)</option>
</select>
</div>
<br>
<div style='height:500px'><div id='sheetDiv' style='width:100%;height:100%'></div></div>

CSS

a{text-decoration:none;color:#4444FF;}
.doFix {
    height: 100px;
    width: 500px;
    position: fixed;
    top: 30%;
    right: 100px;
}

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 2,
    "MessageWidth": 300,
    "IgnoreFocused": 1,
    "Size": "Tiny",
    "NoVScroll": 1,
    PrevColumnMerge: 0,
    HeaderMerge: 0,
    DataMerge: 0
  },
  "Def": {
    "Row": {
      "CanFormula": true
    }
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Type": "Int","Width": 50,"Align": "Center","Name": "SEQ", "ColMerge": 0}
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": ["1","1","2","2"], "Type": "Text", "Name": "C1", "Width": 150},
    {"Header": ["1","1","1","2"], "Type": "Text", "Name": "C2", "Width": 150},
    {"Header": ["1","1","2","2"], "Type": "Text", "Name": "C3", "Width": 150},
    {"Header": ["1","2","2","2"], "Type": "Text", "Name": "C4", "Width": 150},
  ]
},
//시트 이벤트
'event':{
    onRenderFirstFinish: function(evt) {
    	evt.sheet.loadSearchData(ib.data);
    }
},
//시트객체 생성
'create':function () {
    var options = this.init;

    options.Events = this.event;
    IBSheet.create({
      id: 'sheet', // 생성할 시트의 id
      el: 'sheetDiv', // 시트를 생성할 Dom 객체 및 id
      options: options, // 생성될 시트의 속성
    });
},
//조회 데이터
'data':[{"C1":"0","C2":"0","C3":"0","C4":"0"},{"C1":"0","C2":"0","C3":"1","C4":"0"},{"C1":"0","C2":"0","C3":"1","C4":"1"},{"C1":"0","C2":"1","C3":"1","C4":"1"},{"C1":"1","C2":"0","C3":"0","C4":"0"},{"C1":"1","C2":"0","C3":"1","C4":"0"},{"C1":"1","C2":"0","C3":"1","C4":"1"},{"C1":"1","C2":"1","C3":"1","C4":"1"},{"C1":"1","C2":"1","C3":"1","C4":"0"},{"C1":"1","C2":"1","C3":"0","C4":"1"},{"C1":"1","C2":"0","C3":"1","C4":"1"},{"C1":"1","C2":"0","C3":"1","C4":"0"},{"C1":"1","C2":"0","C3":"0","C4":"1"},{"C1":"1","C2":"0","C3":"0","C4":"0"},{"C1":"0","C2":"1","C3":"1","C4":"1"},{"C1":"0","C2":"1","C3":"1","C4":"0"},{"C1":"0","C2":"1","C3":"0","C4":"1"},{"C1":"0","C2":"0","C3":"1","C4":"1"},{"C1":"0","C2":"0","C3":"1","C4":"0"},{"C1":"0","C2":"0","C3":"0","C4":"1"},{"C1":"0","C2":"0","C3":"0","C4":"0"}]
}
ib.create();

var selElements =...