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>회사명 컬럼이 'GS칼텍스'인 경우, 조회 및 값 변경 시 <b>Class</b>가 적용되어 글자가 깜빡입니다.<br/><br/>

1. sCorp 컬럼에 <B>ClassFormula</B>를 설정합니다.<br/>
2. Def.Row.<B>CanFormula</B> = 1 을 설정합니다.<br/>
3. Def.Row.<B>CalcOrder</B>에 컬럼이름+attribute(Class)을 설정합니다.<br/><br/>
</div>


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

<style>
.rowAlert {font-weight:700;animation:blinkingText 1s infinite;}
@keyframes blinkingText{
0%{     color: #FF0000;    }
50%{     color: #FF0000;    }
80%{    color:transparent;  }
100%{   color: #FF0000;    }
}
</style>

JavaScript

var samplePageObj = samplePageObj||{};
samplePageObj = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 0,
    "MaxPages": 3,
    "SuppressMessage": 3,
    "HeaderMerge": 3,
    "SelFocusColor": 1
  },
  Def:{
    Row:{
      CanFormula:1,
      CalcOrder:"sCorpClass"
      
    }
  },
  //틀고정 좌측 컬럼 설정
  "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,
     ClassFormula:function(fr){
        if (fr.Row["sCorp"] == "GS칼텍스") {
              return "rowAlert";
          }
      }
    },
    {"Header": ["사원수","사원수"],"Type": "Int","Name": "sPerson","Width": "80","Align": "Right","CanEdit": 1},
    {"Header": ["금년신입","금년신입"],"Type": "Int","Name": "sNewPerson","Width": "80","Align": "Right","CanEdit": 1},
    {"Header": ["평균연봉","평균연봉"],"Type": "Float","Name": "sPay","Width": "100","Align": "Right","CanEdit": 1},
    {"Header": ["평균보너스","평균보너스"],"Type": "Float","Name": "sBonus","Width": "100","Align": "Right","CanEdit": 1},
    {"Header": ["전년매출","전년매출"],"Type": "Int","Name": "sPreYear","Width": "90","Align": "Right","CanEdit": 1,"Format": "#,### 만원"},
    {"Header": ["금년매출","금년매출"],"Type": "Float","Name": "sYear","Width": "80","Align": "Right","CanEdit": 1},
    {"Header": ["전년대비\n 증감율","전년대비\n 증감율"],"Type": "Float","Name": "sGrow","Width": "100","Align": "Right","CanEdit": 1,"Format": "#,##0.##\\%"}
  ]
},
//시트 이벤트
'event':{
    onRenderFirstFinish:function (evtParam) {
      //create 함수는 비동기로 동작하므로 생성 직후 동작은 여기서 진행
      var sheet = evtParam.sheet;
      sheet.loadSearchData(samplePageObj.data);
    }
},
//시트객체 생성
'create':function () {
    var options = this.init;

    options.Events = this.event;
    IBSheet.create({
      id: 'sheet', // 생성할 시트의 id
      el: 'sheetDiv', // 시트를 생성할 Dom 객체 및 id
      options: options // 생성될 시트의 속성
   ...