IBSheet8 Manual Sample

author(s): IBSheet

HTML

<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>버튼1 컬럼이 조회되거나 값이 변경될때, <B>Class</B>가 적용되어 오른쪽 버튼의 디자인이 변경됩니다.<br/>
<div>버튼2 컬럼이 조회되거나 값이 변경될때, <B>Button</B>속성을 이용하여 Button의 표시 유무를 설정 할 수 있습니다.<br/><br/>

1. btn1 컬럼에 <B>ClassFormula</B>를 설정합니다.<br/>
2. Def.Row.<B>CanFormula</B> = 1 을 설정합니다.<br/>
3. Def.Row.<B>CalcOrder</B> 에 컬럼이름+attribute(Class)을 설정합니다.<br/><br/>
<div style='height:500px'><div id='sheetDiv' style='width:100%;height:100%'></div></div>

CSS

td.RightButtonDesing u{
  background-color:rgb(231, 34, 149);
}

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 2,
   
  },
  "Def": {
    "Col": {
      "Width": 100
    },"Row":{
      "CanFormula":1,
      "CalcOrder":"btn1Class,btn2Button"
    }
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Header":"No","Type": "Int","Width": 50,"Align": "Center","Name": "SEQ"}
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": "버튼1","Type": "Text","Name": "btn1",  "Width": 120, "WidthPad":50
      ,"ClassFormula":function(fr){ 
        //Class 속성을 이용하여 Formula를 작성한다.

        // 'btn1' 컬럼 값이 "실패"인 경우
        // → 버튼을 표시하지 않는다.
        if(fr.Row["btn1"] == "실패"){
          fr.Row["btn1Button"] ="";

        // 'btn1' 컬럼 값이 "대기"인 경우
        // → 버튼을 표시하고, 버튼 텍스트와 색상을 변경  
        }else if(fr.Row["btn1"] == "대기"){ 
          fr.Row["btn1Button"] = "Button";          // 버튼 표시
          fr.Row["btn1ButtonText"] = "대기";        // 버튼 텍스트 설정
          return "RightButtonDesing";               // 버튼 클래스 적용

        // 그 외 모든 경우
        // → 버튼을 표시하고 기본 색상으로 표시  
        }else {  
          fr.Row["btn1Button"] = "Button";          // 버튼 표시
          fr.Row["btn1ButtonText"] = "확인";        // 버튼 텍스트 설정
        }
      }
    },
    {"Header": "버튼2","Type": "Text","Name": "btn2",  "Width": 120, "WidthPad":50
      ,"ButtonFormula":function(fr){ 
        //Button 속성을 이용하여 Formula를 작성한다. 

        //성공 : 버튼을 이미지로 표시한다.
        if(fr.Row["btn2"] == "성공"){ 
          return...