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

CSS

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

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": 0, CustomFormat: replacestr}, //CustomFormat 설정, 2자리마다 *가 반복
    {"Header": ["사원수","사원수"],"Type": "Int","Name": "sPerson","Width": "80","Align": "Right","CanEdit": 1},
    {"Header": ["금년신입","금년신입"],"Type": "Int","Name": "sNewPerson","Width": "70","Align": "Right","CanEdit": 1},
    {"Header": ["평균연봉","평균연봉"],"Type": "Float","Name": "sPay","Width": "100","Align": "Right","CanEdit": 1}
  ]
},
//시트 이벤트
'event':{
	onFocus: function(evt) {    
		if(evt.row != evt.orow || evt.col != evt.ocol) {
      if(evt.col == 'sCorp' && evt.row.Kind == 'Data') {
        evt.sheet.setAttribute(evt.orow, evt.col, 'CustomFormat', replacestr);
        evt.sheet.setAttribute(evt.row, evt.col, 'CustomFormat', '');
      } else {
        evt.sheet.setAttribute(evt.orow, 'sCorp', 'CustomFormat',replacestr);
      }
		}
  },
  onRenderFirstFinish: function(evt) {
  	evt.sheet.loadSearchData(data);
  }
},
//시트객체 생성
'create':function () {
    var options = this.init;

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

function replacestr(v) {
	var str = '';
	for(var i = 0; i < v.length-1; i++) {
		str += "*";
	}
	return v.substr(0,1) + str;
}

var data =...