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>

<div class='demo-info'>
  서버에서 받은 열 정의로 시트의 헤더(열 구성)를 만듭니다.<br/>
  - <b>열 구성 다시 만들기</b> : 열 구성 전체가 바뀌므로 열 정의로 <code>Cols</code> 를 만들어 <code>IBSheet.create</code> 로 다시 생성합니다.<br/>
  - <b>열 덧붙이기</b> : 기존 시트에 열 몇 개만 추가하므로 기존 데이터는 두고 <code>addCol</code> 로 덧붙입니다.
  <div class='btns'>
    <button type='button' onclick='ib.sampleBtn(this)'>사원 정보 조회</button>
    <button type='button' onclick='ib.sampleBtn(this)'>월별 실적 조회</button>
    <button type='button' onclick='ib.sampleBtn(this)'>열 덧붙이기</button>
  </div>
  <div id='msg'></div>
</div>

<div id='sheetDiv' style='width:100%;height:300px'></div>

CSS

a{text-decoration:none;color:#4444FF;}
.demo-info{ margin-bottom:10px; font-size:13px; line-height:1.6; }
.demo-info .btns{ margin-top:8px; }
.demo-info button{ margin-right:6px; }
#msg{ margin-top:6px; color:#2E6DB4; }

JavaScript

var ib = ib || {};
ib = {
  //서버에서 조회해 왔다고 가정한 응답 (열 정의 + 데이터)
  //데이터의 키는 열 정의의 colId 와 같아야 합니다.
  'server': {
    '사원 정보 조회': {
      columns: [
        { colId: "empNo",  colNm: "사번",   dataType: "Text", width: 100 },
        { colId: "empNm",  colNm: "이름",   dataType: "Text", width: 100 },
        { colId: "hireDt", colNm: "입사일", dataType: "Date", width: 110, format: "yyyy-MM-dd", dataFormat: "yyyyMMdd" },
        { colId: "salary", colNm: "급여",   dataType: "Int",  width: 110, format: "#,##0" }
      ],
      data: [
        { empNo: "9821450", empNm: "홍길동", hireDt: "19980305", salary: 4200000 },
        { empNo: "9510427", empNm: "김한국", hireDt: "19890317", salary: 5100000 },
        { empNo: "1203391", empNm: "이영희", hireDt: "20120402", salary: 3800000 }
      ]
    },
    '월별 실적 조회': {
      columns: [
        { colId: "team", colNm: "팀",  dataType: "Text", width: 100 },
        { colId: "jan",  colNm: "1월", dataType: "Int",  width: 90, format: "#,##0" },
        { colId: "feb",  colNm: "2월", dataType: "Int",  width: 90, format: "#,##0" },
        { colId: "mar",  colNm: "3월", dataType: "Int",  width: 90, format: "#,##0" }
      ],
      data: [
        { team: "영업1팀", jan: 1200, feb: 1350, mar: 980 },
        { team: "영업2팀", jan: 860,  feb: 910,  mar: 1120 }
      ]
    }
  },

  //열 정의 → Cols 배열
  'makeCols': function (columns) {
    var cols = [];
    for (var i = 0; i < columns.length; i++) {
      var c = columns[i];
      var col = { Name: c.colId, Header: c.colNm, Type: c.dataType, Width: c.width };
      if (c.format) col.Format = c.format;
      if (c.dataFormat) col.DataFormat = c.dataFormat;
      cols.push(col);
    }
    return cols;
  },

  //열 구성이 바뀌므로 시트를 다시 생성 (create)
  'rebuild': function (res) {
    //같은 id 로 다시 만들 때는 기존 시트를 먼저 제거해야 합니다.
    if (IBSheet.hasSheet("sheet")) {
      sheet.dispose();
    }
    IBSheet.create({
      id: "sheet",
      el: "sheetDiv",
      options: {
        Cfg: { SearchMode: 2 },
        Cols:...