IB Sheet 8 Examples

숫자, 날짜 포맷

HTML

<link rel="stylesheet" href="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/css/style.css">
<!-- ibsheet css -->
<link rel="stylesheet" href="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/css/default/main.css"/>
<link rel="stylesheet" href="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/css/compatible/light/main.css"/>

<!--  ibsheet 필수 js -->
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/ibleaders.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/ibsheet.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/locale/ko.js"></script>

<!--  ibsheet 선택/추가 js -->
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-common.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-dialog.js"></script>
<script src="https://demo.ibleaders.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-excel.js"></script>
<div class='ibsheet-wrap' id='descFunc'>
<b>
[ Type Int -> Float 변경 ]
</b><br>
setAttribute 를 통해 Type을 바꾸고, <b>Format 변경</b>도 함께 해주셔야 합니다.<br>기존의 Int Type 설정이 남아있기 때문에 소수점이 표현되지 않습니다.<br>

<button onclick='ib.sampleBtn(this)' class='mgr10'>조회</button><hr/>
</div>
<div style='height:calc(100% - 20px)'><div id='sheetDiv' style='width:100%;height:100%'></div></div>

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 0,
    "MaxPages": 3,
    "SuppressMessage": 3,
    "HeaderMerge": 3,
    "FitWidth": true
  },
  //틀고정 좌측 컬럼 설정
  "LeftCols": [
    {"Type": "Int","Width": 50,"Align": "Center","Name": "SEQ"}
  ],
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"Header": ["회사명","회사명"],"Type": "Text","Name": "sCorp","Width": "100","Align": "Center","CanEdit": 1},
    {"Header": ["Float으로 변경","평균연봉Float"],"Type": "Float","Name": "sPay","Width": "100","Align": "Right","CanEdit": 1},
    {"Header": ["Float으로 변경","평균연봉Int"],"Type": "Int","Name": "sPay2","Width": "100","Align": "Right","CanEdit": 1}
  ]
},
//시트 이벤트
'event':{
	onDataLoad : function(evtParam) {
   
  },
  	onSearchFinish : function(evtParam) {
    // setAttribute 를 통해 Type을 바꾸고, Format도 변경한다.
    var Rows = sheet.getDataRows();
    //console.log('Rows:'+Rows);
    for(var i = 0; i < Rows.length; i++) {
    	var row = Rows[i];
      sheet.setAttribute(row, 'sPay', "Type", "Float", 1);
      sheet.setAttribute(row, 'sPay', "Format", "0.######", 1);
    }
  }
},
//시트객체 생성
'create':function () {
    var options = this.init;

    options.Events = this.event;
    IBSheet.create({
      id: 'sheet', // 생성할 시트의 id
      el: 'sheetDiv', // 시트를 생성할 Dom 객체 및 id
      options: options, // 생성될 시트의 속성
      //data: this.data // 생성될 시트의 정적데이터
    });
  },
//화면 기능
'sampleBtn':function () {

  switch (arguments[0].innerText) {
      case '조회':
       
       //이벤트 작성
       sheet.loadSearchData(ib.data);
       
        break;
        }
  },
//조회 데이터
 'data': [{
    "sCorp": "삼성전자",
    "sPay": "6290.9301",
    "sPay2": "6290.9301"
    
  }, {
    "sCorp": "SK이노베이션",
    "sPay": "9345.0219",
    "sPay2": "9345.0219"
  }, {
    "sCorp": "한국전력공사",
    "sPay": "8041.7922",
    "sPay2": "8041.7922"
  }, {
    "sCorp": "현대자동차",
    "sPay": "8574.3282",
    "sPay2": "8574.3282"
  }, {
    "sCorp": "GS칼텍스",
    "sPay": "9884.4996",
    "sPay2": "9884.4996"
  }, {
   ...