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="demo-info">
  <strong>attribute+Formula 기본 패턴</strong>
  <p>조건에 따라 속성을 동적으로 결정하는 가장 기본적인 두 가지 패턴 — <code>Color</code> 속성과 <code>CanEdit</code> 속성을 활용합니다.</p>
  <ul>
    <li><strong>Color 속성 (ColorFormula)</strong>: 정수(Int) 값에 따라 배경색 변경 (100 미만 노란색, 이상 초록색)</li>
    <li><strong>CanEdit 속성 (CanEditFormula)</strong>: 체크박스(Bool) 값에 따라 다른 컬럼의 편집 가능 여부 결정</li>
  </ul>
</div>

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

CSS

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

.demo-info {
  background: #f8f8f8;
  border-left: 3px solid #00857d;
  padding: 12px 16px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.6;
}
.demo-info p { margin: 6px 0; }
.demo-info ul { margin: 6px 0; padding-left: 20px; }
.demo-info li { margin: 2px 0; }
.demo-info code {
  background: #e8e8e8;
  padding: 2px 6px;
  border-radius: 3px;
  font-family: Consolas, Monaco, monospace;
  font-size: 12px;
}
.demo-info em { color: #555; font-style: normal; display: block; margin-top: 8px; }

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 2,
    "HeaderMerge": 3,
    "MessageWidth": 300,
    "IgnoreFocused": 1
  },
  "Def": {
    "Row": {
      CanFormula: true,
      CalcOrder: "TextDataCanEdit,IntDataColor"
    }
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Type": "Int","Width": 50,"Align": "Center","Name": "SEQ"},
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": "문자열(Text)","Type": "Text","Name": "TextData","Width": 100,"Align": "Center","CanEdit": 1,
      CanEditFormula: function(fr) {
        return fr.Row['CheckData'];
      }
    },
    {"Header": "정수(Int)","Type": "Int","Name": "IntData","Width": 80,"Align": "Right","CanEdit": 1,
    	ColorFormula: function(fr) {
        if(fr.Value < 100) {
          return "yellow";
        } else {
          return "#2ecc71";
        }
      }
    },
    {"Header": "체크박스(Bool)","Type": "Bool","Name": "CheckData","Width": 80,"Align": "Center","CanEdit": 1}
  ]
},
//시트 이벤트
'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':[{"TextData":"장순연","IntData":0,"CheckData":1},{"TextData":"김정호","IntData":0,"CheckData":0},{"TextData":"정상호","IntData":65,"CheckData":1},{"TextData":"안수현","IntData":190,"CheckData":1},{"TextData":"박만우","IntData":1120,"CheckData":0},{"TextData":"최호건","IntData":65,"CheckData":0},{"TextData":"이민후","IntData":0,"CheckData":1},{"TextData":"김호정","IntData":1120,"CheckData":0},{"TextData":"김호수","IntData":65,"CheckData":1},{"TextData":"오미려","IntData":190,"CheckData":1},{"TextData":"차수식","IntData":1120,"CheckData":0},{"TextData":"맹인주","IntData":65,"CheckData":0},{"TextData":"전명준","IntData":190,"CheckData":1}]
}
ib.create();