IB Sheet 8 Examples

파일 내보내기(다운로드) 예제

HTML

<link rel="stylesheet" href="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/css/style.css">
<!-- ibsheet css -->
<link rel="stylesheet" href="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/css/default/main.css"/><!--  ibsheet 필수 js -->
<script src="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/ibleaders.js"></script>
<script src="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/ibsheet.js"></script>
<script src="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/locale/ko.js"></script>

<!--  ibsheet 선택/추가 js -->
<script src="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-common.js"></script>
<script src="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-dialog.js"></script>
<script src="https://demo.ibsheet.com/ibsheet/v8/samples/customer-sample/assets/ibsheet/plugins/ibsheet-excel.js"></script>

<div class='ibsheet-wrap' id='descFunc'><div><label>내려받을 파일명:</label><input type='text' class='mgr10' id='filename' style='width:280px'></div><div><button type='button' class='mgr10' onclick='ib.sampleBtn(this)'>엑셀파일 내보내기</button><button type='button' class='mgr10' onclick='ib.sampleBtn(this)'>CSV 형식으로 내보내기</button><button type='button' class='mgr10' onclick='ib.sampleBtn(this)'>txt 형식으로 내보내기</button></div><div><button type='button' class='mgr10' onclick='ib.sampleBtn(this)'>다운로드 다이얼로그</button></div></div>


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

CSS

.IBCellHeader {
    color:  #0e0e0e !important;
    background: #bcb9b9 !important;
    border-bottom: 1px solid #6F7F94;
    border-right: 1px solid #6F7F94
}

JavaScript

var ib = ib||{};
ib = {
//시트 초기화 구문
'init':{
  //공통기능 설정 부분
  "Cfg": {
    "SearchMode": 0,
    "HeaderMerge": 6,
    "FitWidth": 1,
    "Export": {
      "Url": "https://api.ibsheet.com/ibsheet/v8/"
    }
  },
  //중앙(메인) 컬럼 설정
  "Cols": [
    {"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'>년,월,일 순으로 숫자만 입력해 주세요.</span>"}},
    {"Header": ["시간","시작"],"Name": "Time1","Extend": {"Type": "Date","Align": "Center","Width": 70,"Format": "HH:mm","EditFormat": "HHmm","DataFormat": "HHmm","Size": 6,"EmptyValue": "<span style='color:#AAA'>시,분 순으로 4개 숫자만 입력해 주세요.</span>"}},
    {"Header": ["시간","종료"],"Name": "Time2","Extend": {"Type": "Date","Align": "Center","Width": 70,"Format": "HH:mm","EditFormat": "HHmm","DataFormat": "HHmm","Size": 6,"EmptyValue": "<span style='color:#AAA'>시,분 순으로 4개 숫자만 입력해 주세요.</span>"}},
    {"Header": ["rDate","rDate"],"Name": "rDate","Extend": {"Type": "Date","Align": "Center","Width": 110,"Format": "yyyy/MM/dd","DataFormat": "yyyyMMdd","EditFormat": "yyyyMMdd","Size": 8,"EmptyValue": "<span style='color:#AAA'>년,월,일 순으로 숫자만 입력해 주세요.</span>"},"Visible": 0},
    {"Header":...