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

JavaScript

var ib = ib || {};

ib = {
  //시트 초기화 구문
  'init': {
    //공통기능 설정 부분
    "Cfg": {
      "SearchMode": 0
    },
    //틀고정 좌측 컬럼 설정
    "LeftCols": [{
      Header: "NO",
      Type: "Int",
      Name: "SEQ"
    }],
    //중앙(메인) 컬럼 설정
    "Cols": [
      {
        Header: "직급",
        Type: "Text",
        Name: "Position", 
        Width: 150,
        Button: "Defaults",
        // 화면에 표시될 셀 값의 Format 형태를 설정. 값이 A0면 "사원"이 화면에 표시
        Format: {
          "A0": "사원",
          "A1": "대리",
          "B0": "과장",
          "B1": "차장",
          "B3": "부장",
          "C0": "이사",
          "C1": "상무",
          "C2": "사장"
        },
        // 셀 편집시 화면에 표시될 Format 형태를 설정
        EditFormat: {
          "A0": "사원",
          "A1": "대리",
          "B0": "과장",
          "B1": "차장",
          "B3": "부장",
          "C0": "이사",
          "C1": "상무",
          "C2": "사장"
        },
        Suggest: "|사원|대리|과장|차장|부장|이사|상무|사장", // 입력시 아이템 필터링
        Defaults: "|A0|A1|B0|B1|B3|C0|C1|C2" // 셀 선택시 기본값
      }
    ]
  },
  //시트 이벤트
  'event': {
		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();

var data = [{"Position":"A0"},{"Position":"A1"},{"Position":"A0"},{"Position":"B0"},{"Position":"A0"},{"Position":"B1"},{"Position":"C0"},{"Position":"C2"},{"Position":"C1"},{"Position":"C2"},{"Position":"B0"},{"Position":"A0"}];