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>

<div class="demo-info">
  <strong>TypeFormula — Bool 컬럼을 Text 라벨로 표시 (Bool → Text)</strong>
  <p>Bool Type 컬럼의 데이터(1/0)를 "활성"/"비활성" Text 라벨로 변환하여 표시합니다.</p>
</div>

<div style='height:300px'><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': {
    "Def": {
      "Row": {
        "CanFormula": 1,
        // CalcOrder는 "열이름+속성명" 형식, 항목 사이에 공백 없이
        "CalcOrder": "ActiveFlagType",
        "Height": 32
      }
    },
    "Cfg": { "SearchMode": 0 },
    "Cols": [
      {"Header": "순번", "Name": "SEQ", "Type": "Int", "Align": "Center", "Width": 60},

      // Bool → Text 전환: 1/0 값을 "활성"/"비활성" 라벨로 표시
      // Bool은 보조 속성 없음 → Text 전환은 단순하지만 값을 표시용으로 직접 바꿔야 함
      {"Header": "상태", "Type": "Bool", "Name": "ActiveFlag", "Width": 140, "Align": "Center",
        TypeFormula: function(fr) {
          // 1/0 값을 라벨로 변환 후 Text 전환
          fr.Row[fr.Col] = fr.Row[fr.Col] ? "활성" : "비활성";
          return "Text";
        }
      }
    ]
  },
  'event': {
    onRenderFirstFinish: function(evt) {
      evt.sheet.loadSearchData(ib.data);
    }
  },
  'create': function() {
    var options = this.init;
    options.Events = this.event;
    IBSheet.create({ id: 'sheet', el: 'sheetDiv', options: options });
  },
  'data': [
    {ActiveFlag: 1},  // → "활성"
    {ActiveFlag: 0},  // → "비활성"
    {ActiveFlag: 1},
    {ActiveFlag: 0}
  ]
};
ib.create();