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>

<!--  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-excel.js"></script>
<script src="https://www.ibsheet.com/v8/assets/lib/ibsheet/plugins/jszip.min.js"></script>

<h3 style="margin:0 0 6px">맞벌이 부부 가계부 - 사용자(남편/아내/공동)별 엑셀 다운로드</h3>

<p style="margin:0 0 8px;font-size:13px;color:#333">
  아래 시트의 데이터를 <b>사용자별로 나눠</b> 엑셀로 받는 4가지 방법입니다.
  <b>여러 파일</b>은 사용자마다 파일 1개씩(총 3개), <b>워크시트</b>는 한 파일 안에 사용자별 워크시트로 나눕니다.
</p>
<ul style="margin:0 0 8px;padding-left:18px;font-size:12px;color:#444;line-height:1.7">
  <li><b>사용자별 여러 파일</b> : 사용자마다 <b>다운로드용 임시 시트를 만들어</b> 각각 다운로드합니다. 시트를 많이 만들어도 화면이 멈추지 않게 처리합니다.</li>
  <li><b>여러 파일 (directExcelData)</b> : 임시 시트 없이 <b>시트 하나에 데이터(JSON)만 바꿔가며</b>, 앞 파일이 끝나면 다음 파일을 이어서 다운로드. 그룹이 많을 때 가볍습니다.</li>
  <li><b>한 파일 워크시트</b> : 임시 시트 + 버퍼로 <b>한 파일 안에 워크시트 3개</b>.</li>
  <li><b>워크시트 (directExcelData)</b> : 임시 시트 없이 버퍼로 한 파일에 워크시트 3개.</li>
</ul>

<div>
  <button type='button' onclick='ib.sampleBtn(this)'>사용자별 여러 파일</button>
  <button type='button' onclick='ib.sampleBtn(this)'>여러 파일 (directExcelData)</button>
  <button type='button' onclick='ib.sampleBtn(this)'>한 파일 워크시트</button>
  <button type='button' onclick='ib.sampleBtn(this)'>워크시트 (directExcelData)</button>
  <button type='button' onclick='ib.sampleBtn(this)'>로그 지우기</button>
</div>

<div style='height:240px;margin-top:8px'><div id='sheetDiv' style='width:100%;height:100%'></div></div>
<div id="log"></div>

CSS

body { font-family: sans-serif; padding: 10px; }
button { padding: 6px 10px; margin-right: 6px; }
#log {
  margin-top: 8px; padding: 8px; border: 1px solid #ccc;
  height: 110px; overflow: auto; white-space: pre-wrap; font-size: 12px;
}

JavaScript

var ib = ib || {}
ib = {
  //── 시트 초기화 정보 (공통설정 + 컬럼) ──
  'init': {
    "Cfg": { "SearchMode": 2 },   // SearchMode:2 = 서버조회 없이 loadSearchData 로 직접 데이터를 넣는 방식
    //컬럼 정의: Name 은 영문 식별자(데이터의 key), Header 는 화면·엑셀에 보이는 제목
    "Cols": [
      { "Header": "No",   "Name": "SEQ",  "Type": "Int",  "Width": 50,  "Align": "Center" },
      { "Header": "사용자", "Name": "USER", "Type": "Enum", "Enum": "|남편|아내|공동", "Width": 70, "Align": "Center" },
      { "Header": "분류", "Name": "CAT",  "Type": "Text", "Width": 80,  "Align": "Center" },
      { "Header": "내용", "Name": "ITEM", "Type": "Text", "Width": 150 },
      { "Header": "금액", "Name": "AMT",  "Type": "Int",  "Width": 110, "Format": "#,##0" }
    ]
  },

  //── 시트 이벤트 ──
  event: {
    onRenderFirstFinish: function (evtParam) {
      // 시트 생성이 끝난 시점 — 이때 데이터를 로드한다.
      evtParam.sheet.loadSearchData(ib.data)
    },
    // [directExcelData 여러 파일 전용] 원본 시트 하나로 여러 파일을 순차로 받을 때,
    //   한 파일 다운로드가 끝나면(onExportFinish) 다음 그룹 파일을 이어서 받기 위한 콜백.
    //   ib.chain 이 켜져 있을 때만 동작(다른 다운로드에는 간섭하지 않음).
    onExportFinish: function (evtParam) {
      if (!ib.chain) return
      ib.log("  ✔ " + ib.chainKeys[ib.chainIdx] + ".xlsx 완료")
      ib.chainIdx++
      if (ib.chainIdx < ib.chainKeys.length) ib.fireDirect(evtParam.sheet)   // 다음 그룹 파일
      else { ib.chain = false; ib.log("전체 완료") }                          // 마지막이면 종료
    }
  },

  //── directExcelData "여러 파일" 순차 다운로드 진행 상태 (위 onExportFinish 가 참고) ──
  chain: false,          // 순차 다운로드 진행 중인지 여부
  chainGroups: {},       // { 그룹키: 행배열 }
  chainKeys: [],         // 그룹키 목록(다운로드 순서)
  chainIdx: 0,           // 지금 몇 번째 그룹인지
  chainDownCols: "",     // 다운로드할 컬럼 순서
  // 현재 그룹 하나를 directExcelData 로 내려받는다.
  //   directExcelData: 시트에 로드된 데이터가 아니라, 넘긴 JSON 배열을 그대로 엑셀로 만든다(임시 시트 불필요).
  fireDirect: function (srcSheet) {
    var k = this.chainKeys[this.chainIdx]
    var fn = k + "_directExcelData.xlsx"        // 임시시트 방식 파일과 이름이 겹치지 않게 표시(구분용)
    this.log("directExcelData: " + fn)
   ...