IBSheet8 Manual Sample

author(s): IBSheet

HTML

<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-dialog.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>


<div class='ibsheet-wrap' id='descFunc'>visible:0인 컬럼, SEQ, 상태, 체크박스 컬럼을 제외하고 다운로드합니다.<div><button type='button' class='mgr10' onclick='ib.sampleBtn(this)'>엑셀파일 내보내기</button><button type='button' class='mgr10' onclick='ib.sampleBtn(this)'>다운로드 다이얼로그</button></div>



<div style='height:calc(100% - 222px)'><div id='sheetDiv' style='width:100%;height:100%'></div></div>

JavaScript

var ib = ib || {};
ib = {
  //시트 초기화 구문
  'init': {
    "Def": {
      "Row": {
        "CanFormula": 1
      }
    },
    //공통기능 설정 부분
    "Cfg": {
      "SearchMode": 0,
      "HeaderMerge": 6,
      "FitWidth": 1,
      "Export": {
        "Url": "https://api.ibsheet.com/ibsheet/v8/"
      }
    },
    //틀고정 좌측 컬럼 설정
    "LeftCols": [{
      Header: ["No", "No"],
      Type: "Int",
      Name: "SEQ"
    }],
    //중앙(메인) 컬럼 설정
    "Cols": [{
        Header: ["상태", "상태"],
        Name: "sStatus",
        Extend: IB_Preset.STATUS
      },
      {
        "Header": ["신청인", "신청인"],
        "Type": "Text",
        "MinWidth": 80,
        "Name": "sName",
        "ColMerge": 1
      },
      {
        "Header": ["선택", "선택"],
        "Type": "Bool",
        "MinWidth": 80,
        "Name": "check",
        "ColMerge": 1
      },
      {
        "Header": ["신청사유", "신청사유"],
        "Type": "Enum",
        "MinWidth": 80,
        "Name": "Reason",
        "ColMerge": 0,
        "Align": "Center",
        "Enum": "|야근|주말특근|휴일특근",
        "EnumKeys": "|01|02|03"
      },
      {
        "Header": ["신청금액", "신청금액"],
        "Type": "Int",
        "MinWidth": 85,
        "Name": "Qty",
        "ColMerge": 1,
        "Required": 1
      },
      {
        "Header": ["근태기간", "시작일"],
        "Name": "Date1",
        "Extend": {
          "Type": "Date",
          "Align": "Center",
          "Width": 110,
          "Format": "yyyy/MM/dd",
          "DataFormat": "yyyyMMdd",
          "EditFormat": "yyyyMMdd",
          "Size": 8,
          "EmptyValue": "<span style='color:#AAA'>년,월,일 순으로 숫자만 입력해 주세요.</span>"
        }
      },
      {
        "Header": ["근태기간", "종료일"],
        "Name": "Date2",
        "Extend": {
          "Type": "Date",
          "Align": "Center",
          "Width": 110,
          "Format": "yyyy/MM/dd",
          "DataFormat": "yyyyMMdd",
          "EditFormat": "yyyyMMdd",
          "Size": 8,
          "EmptyValue": "<span style='color:#AAA'>년,월,일 순으로 숫자만...